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

Grid

Has Three Columns

Flex

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

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

Paragraph

Is Large

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

Paragraph

Is Big

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

Paragraph

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

Paragraph

Grey Dark

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

Paragraph

Grey 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

Paragraph

Is Small

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

Paragraph

Is Tiny

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

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 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 Dark

Outcome-driven action

Button

Is Small

Outcome-driven action

Button

Is Blue

Is Small

Outcome-driven action

Text Link

Footer Link

Arrow Link

View Our Partnership

Arrow Link

Is Blue

View Our Partnership

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

Item 1
Item 2
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