Typography

Font Styles

fs0

Display

Heading

fs1

Heading

fs2

Heading

fs3

Heading

fs4

Heading

fs5

Heading

fs6

Heading

fs7

Paragraph

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

Font Weight

fw0

inherit

Lorem ipsum

fw1

Lorem ipsum

fw2

Lorem ipsum

fw3

Lorem ipsum

Line Clamp

lc1

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.

lc2

lc3

lc4

Text Wrap

tw1

balance

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

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="-1"

inverts parent theme

Heading

data-theme="0"

inherits parent's theme

Heading

data-theme="1"

light

Heading

data-theme="2"

dark

Heading

Button Styles

data-button-style="1"

data-button-style="2"

Get Started

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

Properties

Grid

gd1

Columns Portrait

cp{1-24}

Columns Landscape

cl{1-24}

Columns Tablet

ct{1-24}

Columns Desktop

cd{1-24}

Rows Portrait

rp{1-12}

Rows Landscape

rl{1-12}

Rows Tablet

rt{1-12}

Rows Desktop

rd{1-12}

Start Portrait

sp{0-24}

Start Landscape

sl{0-24}

Start Tablet

st{0-24}

Start Desktop

sd{0-24}

Order Portrait

op{0-2}

Order Landscape

ol{0-2}

Order Tablet

ot{0-2}

Order Desktop

od{0-2}

Example Grid

Spacing

0.125

0.25

0.5

0.75

1.5

Miscellaneous

Utilities

pe1

pointer-events: children

Clickable

Parent not clickable.
Direct children clickable.

cf1

cover full

width: 100%;
height: 100%;

ca1

cover absolute

width: 100%; height: 100%;
position: absolute; top: 0; left: 0;

data-padding-top="0"

data-padding-bottom="0"

data-padding-top="1"

data-padding-bottom="1"

data-padding-top="2"

data-padding-bottom="2"

data-padding-top="3"

data-padding-bottom="3"