Typography

Font Styles

u-display

Heading

u-h1

Heading

u-h2

Heading

u-h3

Heading

u-h4

Heading

u-h5

Heading

u-h6

Heading

u-text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare

u-text-large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare

u-text-small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare

Line Clamp

u-line-clamp-1

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.

u-line-clamp-2

u-line-clamp-3

u-line-clamp-4

Typography Elements

All Ordered List

This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.

All Unordered List

This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.

All Block Quotes

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

rich-text

Lorem ipsum dolor sit amet, consectetur adipiscing

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt

Color

Themes

data-theme="invert"

Heading

Button Text

data-theme="inherit"

Heading

Button Text

data-theme="light"

Heading

Button Text

data-theme="dark"

Heading

Button Text

data-button-style="primary"

data-button-style="secondary"

Button Styles

Icons

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.

Layout

Grid Utilities

u-grid-custom

u-grid-column-3

u-grid-autofit

u-grid-subgrid

u-column

u-column-full

Adaptive

Size

0.125

0.25

0.5

0.75

1.25

1.5

2.5

3.5

4.5

5.5

6.5

7.5

8.5

9.5

Space

extra-small

small

medium

large

Miscellaneous

Utilities

u-full

u-absolute-full

data-padding-top="none"

data-padding-bottom="none"

data-padding-top="small"

data-padding-bottom="small"

data-padding-top="main"

data-padding-bottom="main"

data-padding-top="large"

data-padding-bottom="large"