Style Guide
HTML Headings
Heading H1
Heading H1
Heading H2
Heading H2
Heading H3
Heading H3
Heading H4
Heading H4
Heading H5
Heading H5
Heading H6
Heading H6
Heading Classes
Heading XLarge
Heading XLarge
Heading Large
Heading Large
Heading Medium
Heading Medium
Heading Small
Heading Small
Heading H1
Heading H2
Heading H3
Heading H4
Heading H5
Heading H6
Cards
Default
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac tincidunt vitae semper quis lectus nulla at volutpat.
Muted
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac tincidunt vitae semper quis lectus nulla at volutpat.
Primary
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac tincidunt vitae semper quis lectus nulla at volutpat.
Card Sizes
Small
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac tincidunt vitae semper quis lectus nulla at volutpat.
Default
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Large
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac tincidunt vitae semper quis lectu.
XLarge
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labor.
Badge
Icon Sizes
Other HTML Elements
All Paragraphs
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
Quote - Sample text is being used as a placeholder for real text that is normally present.
TExt classes
Text Alignments
text-align-left
text-align-center
text-align-right
Text ColorS
Text Color Default
Text Color Muted
Backgrounds
Rich Text
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
- The rich text element allows you to create and format headings,
- The rich text element allows you to create and format headings,
- The rich text element allows you to create and format headings,
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
List
- Sample text is being used as a placeholder for real text that is normally present.
- Sample text is being used as a placeholder for real text that is normally present.
- Sample text is being used as a placeholder for real text that is normally present.
Form
Hidden Classes
Check the Navigator to see the hidden section below. This section contains utility classes like padding, margin and container.
Inverse
Badge
Label
Cards
Inverse
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac tincidunt vitae semper quis lectus nulla at volutpat.
Inverse Text ColorS
Text Color Default
Text Color Muted