Structure

Defined and flexible core structure we can use on all or most pages.

Container - 12 column span
Container - 10 column span
Container - 8 column span
Container - 6 column span
Container
Container
Container
Container
Grid
Grid
Has Three Columns
Grid
Has Four Columns
Flex
Flex
Is Centered
Flex
Has Wrap
Buttons Group

HTML Tags

HTML tags define default text styles.

H1

This is the heading style H1.

H2

This is the heading style H2.

H3

This is the heading style H3.

H4

This is the heading style H4.

H5
This is the heading style H5.
H6
This is the heading style H6.
P

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, unc ut sem vitae risus tristique posuere.

Block quote
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Link
Text Link
All Unordered Lists

  • This is a list item

  • This is a list item

  • This is a list item

    • This is a sub-list item

    • This is a sub-list item

    • This is a sub-list item

All Ordered Lists

  1. This is a list item

  2. This is a list item

  3. This is a list item

    • This is a sub-list item

    • This is a sub-list item

    • This is a sub-list item

Typography

All the typography style elements used throughout your website.

Heading

This is the standard heading. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Heading
Is Display

This is the heading display. Lorem ipsum dolor sit.

Heading
Style H1

This is the heading style H1

Heading
Style H2

This is the heading style H2

Heading
Style H3

This is the heading style H3

Heading
Style H4

This is the heading style H4

Heading
Style H5

This is the heading style H5

Heading
Style H6

This is the heading style H6

Large Text

This is large text. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec qu

Big Text

This is big text. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec qu

Big Text
Is Bold

This is big text. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec qu

Body Text

This is body text. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec qu

Body Text
Is Bold

This is body text. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec qu

Small Text

This is small text. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec qu

Small Text
Is Bold

This is small text. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec qu

Tiny Text

This is tiny text. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec qu

Tiny Text
Is Bold

This is tiny text. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec qu

Some Text Class
Is Muted

Apply this global class to all text elements that should be faded

Some Text Class
Muted 80

Apply this global class to all text elements that should be faded

Spacing

All the spacing used between elements throughout your website.

Box

Sample text is being used as a placeholder for real text that is normally present.

Intro

Sample text is being used as a placeholder for real text that is normally present.

Box
Has 8 Gap
Intro
Has 8 Gap
Box
Has 16 Gap
Intro
Has 16 Gap
Box
Has 32 Gap
Intro
Has 32 Gap
Box
Has 48 Gap
Box
Has 64 Gap
Box
Has 80 Gap
Flex
Has 8 Gap
Flex
Has 12 Gap
Flex
Has 16 Gap
Flex
Has 24 Gap
Divider
Separator

Buttons

All the button and link elements used throughout your website.

Button
Outcome-driven action
Button
Is Secondary
Outcome-driven action
Button
Is Secondary
Is Small
Outcome-driven action
Text Link
Text Link
Text Link
Is Black
Text Link
Icon Link
LEARN MORE
Arrow Link
Read more
Filter Item
Is Selected
Sales

Rich Text

All the rich-text styling used throughout your website.

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

  1. Item 1
  2. Item 2
  3. Item 3
    • sub-item 1
    • sub-item 2

Unordered list

  • Item A
  • Item B
  • Item C
    • sub-item 1
    • sub-item 2

Text link

Bold text

Emphasis

Superscript

Subscript