Structure

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

Container - 12 columns

Container - 10 columns

Container - 8 columns

Container - 6 columns

Container

Grid

Has Three Columns

Grid

Has Four Columns

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

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

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 White

Outcome-driven action

Button

Is Small

Outcome-driven action

Button

Is White

Is Small

Outcome-driven action

Text Link