I am a heading H1
heading H1 font size h2
I am a heading H2
I am a heading H3
I am a heading H4
I am a heading H5
I am a heading H6
Formatting toolbar. I’m a paragraph
Headings & rich text
Headings and this line is a paragraph.
Headings and this line is preformatted.
Heading 1 (H1)
Heading 2 (H2)
Heading 3 (H3)
Heading 4 (H4)
Heading 5 (H5)
Heading 6 (H6)
Headings & rich text
Headings and this line is a paragraph.
Headings and this line is preformatted.
Font Families
The primary and secondary font families used for body text.
H2 Text italic
H2 Text oblique
H2 Text normal
Here goes your text … like a paragraph any part of your text to access the formatting toolbar.
Body Text H2
paragraph- Guidelines for body text styles to ensure readability and consistency across the website.
This is just placeholder text. Don’t be alarmed, this is just here to fill up space since your finalized copy isn’t ready yet. Once we have your content finalized, we’ll replace this placeholder text with your real content.
Sometimes it’s nice to put in text just to get an idea of how text will fill in a space on your website. (blockquote)
Traditionally our industry has used Lorem Ipsum, which is placeholder text written in Latin. Unfortunately, not everyone is familiar with Lorem Ipsum and that can lead to confusion. I can’t tell you how many times clients have asked me why their website is in another language!
There are other placeholder text alternatives like Hipster Ipsum, Zombie Ipsum, Bacon Ipsum, and many more. While often hilarious, these placeholder passages can also lead to much of the same confusion.
If you’re curious, this is Website Ipsum. It was specifically developed for the use on development websites. Other than being less confusing than other Ipsum’s, Website Ipsum is also formatted in patterns more similar to how real copy is formatted on the web today.
Weight (h1 for samples)
Different font weights used for textual content.
Aa
Light 300
Aa
Regular 400
Aa
Bold 700
Color Pallete (h1)
This style guide contains a set of standards for writing and designing this website content. (p)
Brand Colors (h2)
A palette of colors that are used to represent your brand. (p)
Action
Primary
Secondary
Tertiary
Accent
Neutral Colors (h2)
A palette of colors that are used in your website. (p)
Base
Neutral
Semantic Colors
A palette of colors denote standard value states (such as good, bad, warning and info).
Success
Danger
Warning
Info
Typography
Guidelines for typography styles and usage to represent your brand effectively.
Buttons (h1)
Guidelines for button styles to maintain a consistent look and feel.
Brand Colors
A palette of colors used for button backgrounds to represent your brand.
Neutral Colors
A palette of neutral colors used for button backgrounds.
Semantic Colors
A palette of semantic colors used for button states (such as success, danger, warning, and info).
Sizes
Different sizes used for buttons to ensure consistency.
<style>
/* Class to hide style elements */
.hidden-style {
display: none !important;
}
</style>
<script>
// Script to hide color box
document.addEventListener("DOMContentLoaded", function () {
var targetDivs = document.querySelectorAll(".style-guide__color-box");
targetDivs.forEach(function (targetDiv) {
var backgroundColor = window.getComputedStyle(targetDiv).backgroundColor;
if (backgroundColor === "rgba(0, 0, 0, 0)") {
targetDiv.classList.add("hidden-style");
}
});
});
</script>
<script>
// Script to hide buttons
document.addEventListener("DOMContentLoaded", function () {
var targetButtons = document.querySelectorAll(".brxe-button");
targetButtons.forEach(function (button) {
var cssVariable = getComputedStyle(button).getPropertyValue('--btn-background-hover').trim();
if (cssVariable === '') {
button.classList.add("hidden-style");
}
});
});
</script>