Typography

Font Styles

fs0
Display

Heading

fs1
H1

Heading

fs2
H2

Heading

fs3
H3

Heading

fs4
H4

Heading

fs5
H5
Heading
fs6
H6
Heading
fs7
Paragraph Main

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

fs7.1
Paragraph Large

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

fs7.2
Paragraph Small

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

Font Family

ff0
inherit

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

ff1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Font Weight

fw0
inherit
Lorem ipsum
fw1
Lorem ipsum
fw2
Lorem ipsum
fw3
Lorem ipsum

Line Height

lh0
inherit

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

lh1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

lh2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

lh3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

lh4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Letter Spacing

ls0
inherit

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

ls1

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

ls2

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

Text Transform

tt0
inherit

Lorem ipsum dolor sit amet, consectetur adipiscing elit

tt1
none

Lorem ipsum dolor sit amet, consectetur adipiscing elit

tt2
uppercase

Lorem ipsum dolor sit amet, consectetur adipiscing elit

tt3
capitalize

Lorem ipsum dolor sit amet, consectetur adipiscing elit

tt4
lowercase

Lorem ipsum dolor sit amet, consectetur adipiscing elit

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

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.

lc3

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.

lc4

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.

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 Lists
  1. This is some text inside of a div block.
  2. This is some text inside of a div block.
  3. This is some text inside of a div block.
All Unordered Lists
  • 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 conse ctetur

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

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

Lorem ipsum dolor sit amet conse ctetur

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

Lorem ipsum dolor sit amet conse ctetur

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

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

Lorem ipsum dolor sit amet conse ctetur

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

  • List item one
  • List item two
  • List item three
Lorem ipsum dolor sit amet conse ctetur

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

  1. List item one
  2. List item two
  3. List item three
Lorem ipsum dolor sit amet conse ctetur

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

Color

Properties

Background
bg{0-1}
Font Color
fc{0-2}
Border Color
bc{0-2}
Stroke Color
sc{0-1}
sm0.{1-2}

Section Mode

Get Started
fc2

Aa

bc1
bc2
sc1

Aa

cm0.1

Card Mode 1

Get Started
fc2

Aa

bc1
bc2
sc1

Aa

cm0.2

Card Mode 2

Get Started
fc2

Aa

bc1
bc2
sc1

Aa

em0.1

Element Mode 1

Get Started
fc2

Aa

bc1
bc2
sc1

Aa

Button Modes

Link Modes

Utilities

Section Vertical Spacing

vt0
Vertical Top
vb0
Vertical Bottom
vt1
Vertical Top
vb1
Vertical Bottom
vt2
Vertical Top
vb2
Vertical Bottom
vt3
Vertical Top
vb3
Vertical Bottom

Page Padding

pp0
pp1

Max Width

mw0
mw1
mw2

Stroke Width

Aa

sw0

Aa

sw1

Aa

sw2

Border Radius

br0
br1
br2
br3

Border Width

bw0
bw1
bw2

Border Direction

Top
bw{1-2}t
Bottom
bw{1-2}b
Left
bw{1-2}l
Right
bw{1-2}r
Horizontal
bw{1-2}h
Vertical
bw{1-2}v

Pointer Events

Not Clickable
pe0
Clickable
pe1
Direct Children Clickable
pe2

Icon Styles

ic1
fill: currentColor
ic2
stroke: currentColor

Cover

cf1
Cover Full
width: 100%; height: 100%;
ca1
Cover Absolute
width: 100%; height: 100%; position: absolute; top: 0; left: 0;

Live Visibility

live display: none
ld0
live display: block
ld1
live opacity: 0
lo0
live opacity: 1
lo1

These live styles are set in project settings & only appear on the published site.

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

Adaptive Spacing

Margin Top
mt{0-20}
Margin Bottom
mb{0-20}
Gap
gp{0-20}
Gap Vertical
gv{0-20}
Gap Horizontal
gh{0-20}
Padding
pd{0-20}
Padding Vertical
pv{0-20}
Padding Horizontal
ph{0-20}
Padding Top
pt{0-20}
Padding Bottom
pb{0-20}
Padding Left
pl{0-20}
Padding Right
pr{0-20}

Adaptive Values

0
0.25
0.5
0.75
1
1.25
1.5
1.75
2
2.25
2.5
2.75
3
3.25
3.5
3.75
4
4.5
5
5.5
6
6.5
7
7.5
8
8.5
9
9.5
10
11
12
13
14
15
16
17
18
19
20

Forms

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.