Styly Guide

Edit the following elements directly in this Style Guide.
All changes will be reflected across the Website.

Container & Max Width

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

container xxs - 192px / 12rem

container xs - 256px / 16rem

container s - 320 px / 20rem

container m - 512px / 32rem

container lr - 768px / 48rem

container xl - 1024px / 64rem

container xxl - 1280px / 80rem

container h - 1360px / 85rem

max width xxs - 192px / 12rem

max width xs - 256px / 16rem

max width s - 320 px / 20rem

max width m - 512px / 32rem

max width lr - 768px / 48rem

max width xl - 1024px / 64rem

max width xxl - 1280px / 80rem

Padding Global

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

Padding Global horizontal - 40px / 2.5rem

Padding Global Vertical xxxxs - 12px / 0.75rem

Padding Global Vertical xxxs - 16px / 1rem

Padding Global Vertical xxs - 20px / 1.25rem

Padding Global Vertical xs - 32px / 2rem

Padding Global Vertical s - 48px / 3rem

Padding Global Vertical M - 80px / 5rem

Padding Global Vertical LR - 128px / 8rem

Padding Global Vertical XL - 160px / 10rem

Padding Global Vertical XXL - 192px / 12rem

Section Gap

The global distance between the title area and the main content

two rows gap - 56px / 3.5rem

two columns gap - 80px / 5rem

three columns gap - 24px / 1.5rem

Title Area Gap

The global distance between the title and description in the title area

title area ver - 16px / 1rem

title area hor - 80px / 5rem

HTML Heading Tags

HTML tags define default Heading styles.

H1

Sample text helps you understand how real text may look.

H2

Sample text helps you understand how real text may look.

H3

Sample text helps you understand how real text may look.

H4

Sample text helps you understand how real text may look.

H5

Sample text helps you understand how real text may look.

H6

Sample text helps you understand how real text may look.

Heading Styles

Heading classes when typography style doesn't match the default HTML tag.

Heading Style H1

Sample text helps you understand how real text may look.

Heading Style H1 Decor

Sample text helps you understand how real text may look.

Heading Style H2

Sample text helps you understand how real text may look.

Heading Style H2 Decor

Sample text helps you understand how real text may look.

Heading Style H3

Sample text helps you understand how real text may look.

Heading Style H3 Decor

Sample text helps you understand how real text may look.

Heading Style H4

Sample text helps you understand how real text may look.

Heading Style H5

Sample text helps you understand how real text may look.

Heading Style H6

Sample text helps you understand how real text may look.

Other HTML Tags

HTML tags define default text styles.

All paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

All links

Text Link

All quotes

Block Quote

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.

Text Classes

Text classes when typography style doesn't match the default HTML tag.

Text Sizes

Text Size Large

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

Text Size Medium

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

Text Size Regular

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

Text Size Small

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

Text Size Tiny

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

Text Styles

Text Style Tagline

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

Text Style Tagline Inverse

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

Text Style Badge

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

Text Style Link

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

Text Style Button

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

Text Style Tab

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

Text Style Field Label

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

Text Style Control Label

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

Text Style Placeholder

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

Text Style Stats

Text Style Quote

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

Text Style Navlink

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

Text Style Footerlink

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

Text Style Strikethrough

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

Text Style Italic

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

Text Style Allcaps

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

Text Style Underline

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

Text Weights

Text Weight Black

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

Text Weight Extrabold

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

Text Weight Bold

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

Text Weight Semibold

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

Text Weight Medium

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

Text Weight Normal

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

Text Weight Light

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

Text Weight Extra Light

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

Text Weight Thin

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

Text Alignments

Text Align Left

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

Text Align Center

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

Text Align Right

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

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 quoteblog

Ordered list

Item 1
Item 2
Item 3

Unordered list

Item A
Item B
Item C

Text link

Bold text

Emphasis

^Superscript

_Subscript

Color Semantic

Background

bg primary

bg secondary

bg tertiary

bg primary inverse

bg secondary inverse

bg tertiary inverse

bg brand

bg brand light

bg brand lightest

bg success

bg success light

bg warning

bg warning light

bg danger

bg danger light

Content

text color primary

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

text color secondary

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

text color tertiary

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

text color primary inverse

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

text color sec inverse

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

text color tertiary inverse

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

text color brand

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

text color brand light

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

text color success

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

text color warning

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

text color danger

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

text color info

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

Icon Sizes

xxxs - 8px / 0.5rem

xxs - 12px / 0.75rem

xs - 16px / 1rem

s - 20px / 1.25rem

m - 24px / 1.5rem

lr - 32px / 2rem

xl - 40px / 2.5rem

xxl - 48px / 3rem

xxxl - 56px / 3.5rem

Shadow

shadow xs

shadow s

shadow m

shadow lr

shadow xl

shadow xxl

Button

Button Primary

Button Text

Button Secondary

Button Text

Button Primary Inverse

Button Text

Button Secondary Inverse

Button Text

Button Group

Button Text

Button Group Inverse

Button Text

Icon Button

Icon Button Primary

Icon Button Secondary

Icon Button Primary Inverse

Icon Button Secondary Inverse

Icon Play

Link

Link Inverse

Link

Badge

Badge Basic

Badge

Badge Basic Inverse

Badge

Badge Primary

Badge

Badge Primary Inverse

Badge

Badge Info

Badge

Badge Group

Badge

Tagline

Form

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Tab Links

Social Icons

Social Icons Group

Social Icons Group Inverse

Navlinks & Subnavlink

Navlink

Navlink Dropdown

Subnavlink Card

Page Name

Lorem ipsum dolor sit amet consectetur elit

Navlink Inverse

Navlink

Navlink Dropdown Inverse

Subnavlink Card Inverse

Page Name

Lorem ipsum dolor sit amet consectetur elit

Footerlink

Footerlink Inverse

Footerlink

List Item Other Variants

List Item Table Row

Heading

Lorem Ipsum

List Item Icon

List Item

Accordion Item

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Accordion Items Group

Accordion Item

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Accordion Item

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Accordion Item

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Accordion Item

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Accordion Item

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.