BASE SYSTEM ✦ VERSION 2.0
Style Guide
Use this style guide to manage your website branding and design.
Typography
Headings
All H1 Headings
The quick brown fox jumps over the lazy dog
h1-heading
The quick brown fox jumps over the lazy dog
All H2 Headings
The quick brown fox jumps over the lazy dog
h2-heading
The quick brown fox jumps over the lazy dog
All H3 Headings
The quick brown fox jumps over the lazy dog
h3-heading
The quick brown fox jumps over the lazy dog
All H4 Headings
The quick brown fox jumps over the lazy dog
h4-heading
The quick brown fox jumps over the lazy dog
All H5 Headings
The quick brown fox jumps over the lazy dog
h5-heading
The quick brown fox jumps over the lazy dog
All H6 Headings
The quick brown fox jumps over the lazy dog
h6-heading
The quick brown fox jumps over the lazy dog
HTML Elements
Body
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales laoreet gravida. In eu faucibus felis. Cras aliquet urna dui, vitae vestibulum felis commodo in.
All Paragraphs
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales laoreet gravida. In eu faucibus felis. Cras aliquet urna dui, vitae vestibulum felis commodo in.
All Block Quotes
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales laoreet gravida. In eu faucibus felis. Cras aliquet urna dui, vitae vestibulum felis commodo in.
All Links
All Unordered Lists
- 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.
All Ordered Lists
- 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.
Text
body-x-large
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales laoreet gravida. In eu faucibus felis. Cras aliquet urna dui, vitae vestibulum felis commodo in.
body-large
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales laoreet gravida. In eu faucibus felis. Cras aliquet urna dui, vitae vestibulum felis commodo in.
body-medium
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales laoreet gravida. In eu faucibus felis. Cras aliquet urna dui, vitae vestibulum felis commodo in.
body-small
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales laoreet gravida. In eu faucibus felis. Cras aliquet urna dui, vitae vestibulum felis commodo in.
body-x-small
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales laoreet gravida. In eu faucibus felis. Cras aliquet urna dui, vitae vestibulum felis commodo in.
Subheadings
subheading-x-large
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales laoreet gravida. In eu faucibus felis. Cras aliquet urna dui, vitae vestibulum felis commodo in.
subheading-large
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales laoreet gravida. In eu faucibus felis. Cras aliquet urna dui, vitae vestibulum felis commodo in.
subheading-medium
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales laoreet gravida. In eu faucibus felis. Cras aliquet urna dui, vitae vestibulum felis commodo in.
subheading-small
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales laoreet gravida. In eu faucibus felis. Cras aliquet urna dui, vitae vestibulum felis commodo in.
subheading-x-small
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales laoreet gravida. In eu faucibus felis. Cras aliquet urna dui, vitae vestibulum felis commodo in.
Overline
overline-x-large
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales laoreet gravida. In eu faucibus felis. Cras aliquet urna dui, vitae vestibulum felis
overline-large
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales laoreet gravida. In eu faucibus felis. Cras aliquet urna dui, vitae vestibulum felis
overline-medium
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales laoreet gravida. In eu faucibus felis. Cras aliquet urna dui, vitae vestibulum felis commodo in.
overline-small
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales laoreet gravida. In eu faucibus felis. Cras aliquet urna dui, vitae vestibulum felis commodo in.
overline-x-small
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales laoreet gravida. In eu faucibus felis. Cras aliquet urna dui, vitae vestibulum felis commodo in.
Text Colors
text-color-primary
Text Color Primary
text-color-secondary
Text Color Secondary
text-color-tertiary
Text Color Tertiary
text-color-brand
Text Color Brand
text-color-inherit
Text Color Inherit
text-color-alternate
Text Color Alternate
text-color-muted
Text Color Muted
Text Weights
text-weight-x-bold
Text Weight X Bold
text-weight-bold
Text Weight Bold
text-weight-semibold
Text Weight Semibold
text-weight-medium
Text Weight Medium
text-weight-normal
Text Weight Normal
text-weight-light
Text Weight Light
Text Styles
text-link
Text Link
text-strikethrough
Text Strikethrough
text-underline
Text Underline
text-italics
Text Italics
text-all-caps
Text All Caps
text-balance
Text Balance
text-no-wrap
Text No Wrap
text-truncate
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales laoreet gravida. In eu faucibus felis. Cras aliquet urna dui, vitae vestibulum felis commodo in.
Text Alignments
text-align-left
Text Align Left
text-align-center
Text Align Center
text-align-right
Text Align Right
Elements
Badges
badge
Badge
badge
Badge
badge
secondary
Badge
badge
outline
Badge
badge
alternate
Badge
Avatar
avatar
avatar-group
avatar
Dividers
divider
divider
Is-secondary
divider
is-tertiary
Icons
icon
icon-x-small
icon-small
icon-medium
icon-large
icon-x-large
Structure
Sections
section-x-large
section-large
section-medium
section-small
section-xsmall
Containers
container-x-large
container-large
container-medium
container-small
container-x-small
Max Widths
max-width-2x-large
max-width-x-large
max-width-large
max-width-medium
max-width-small
max-width-x-small
max-width-2x-small
Columns
column
column-2x-small
column-x-small
column-small
column-medium
column-large
column-x-large
column-2x-large
column-3x-large
column-left
column-center
column-right
column-space-between
Rows
row
row-2x-small
row-x-small
row-small
row-medium
row-large
row-x-large
row-2x-large
row-left
row-center
row-right
row-top
row-bottom
row-space-between
row-wrap
Padding
padding-2x-small
padding-x-small
padding-small
padding-medium
padding-large
padding-x-large
padding-2x-large
padding-3x-large
padding-bottom
padding-top
padding-vertical
padding-horizontal
padding-left
padding-right
Utility
page-wrapper
page-padding
overflow-hidden
relative
z-index-1
z-index-2
align-center
button-group
hide
This element is hidden
hide-tablet
hide-mobile-landscape
hide-mobile-portrait
Images
image-cover
image-contain
image-fill
Colors
Background Colors
background-primary
background-secondary
background-tertiary
background-brand
background-alternate
Rich Text
rich-text
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Block quote
Ordered list
- Item 1
- Item 2
- Item 3
Unordered list
- Item A
- Item B
- Item C
Bold text
Emphasis
Superscript
Subscript
