Functional classes

Vertical

Vertical / 2XS
Vertical / XS
Vertical / S
Vertical / M
Vertical / L
Vertical / XL
Vertical / 2XL
Vertical / 3XL
Vertical / 4XL
Vertical / 5XL
Vertical / 6XL
Vertical / 7XL

Horizontal spacing

Horizontal / 2XS
Horizontal / XS
Horizontal / S
Horizontal / M
Horizontal / L
Horizontal / XL
Horizontal / 2XL
Horizontal / 3XL
Horizontal / 4XL
Horizontal / 5XL
Horizontal / 6XL
Horizontal / 7XL

Padding

Padding / 2XS
Padding / XS
Padding / S
Padding / M
Padding / L
Padding / XL
Padding / 2XL
Padding / 3XL
Padding / 4XL
Padding / 5XL

Heading

<H1>

H1 Tag

Heading / H1

H1 Class

<H2>

H2 Tag

Heading / H2

H2 Class

<H3>

H3 Tag

Heading / H3

H3 Class

<H4>

H4 Tag

Heading / H4

H4 Class

<H5>
H5 Tag
Heading / H5
H5 Class
<H6>
H6 Tag
Heading / H6
H6 Class

Font Size

Font Size / S

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.

Font Size / M

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.

Font Size / L

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.

Font Size / XL

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.

Align

Align / Left

This text aligns to the left in desktop breakpoint and smaller ones.

Align / Left Tab

This text aligns to the left in tablet and smaller breakpoints.

Align / Left Mob

This text aligns to the left in in mobile, landscape and portrait.

Align / Center

This text aligns to the center in desktop breakpoint and smaller ones.

Align / Center Tab

This text aligns to the center in tablet and smaller breakpoints.

Align / Center Mob

This text aligns to the center in in mobile, landscape and portrait.

Align / Right

This text aligns to the right in desktop breakpoint and smaller ones.

Align / Right Tab

This text aligns to the right in tablet and smaller breakpoints.

Align / Right Mob

This text aligns to the right in in mobile, landscape and portrait.

Line Height

Line Height / XS

This text has a line-height of 1 (unitless) in desktop breakpoint and smaller ones.

Line Height / XS Tab

This text has a line-height of 1 (unitless) in tablet and smaller breakpoints.

Line Height / XS Mob

This text has a line-height of 1 (unitless) in mobile, landscape and portrait.

Line Height / S

This text has a line-height of 1.25 (unitless) in desktop breakpoint and smaller ones.

Line Height / S Tab

This text has a line-height of 1.25 (unitless) in tablet and smaller breakpoints.

Line Height / S Mob

This text has a line-height of 1.25 (unitless) in mobile, landscape and portrait.

Line Height / M

This text has a line-height of 1.5 (unitless) in desktop breakpoint and smaller ones.

Line Height / M Tab

This text has a line-height of 1.5 (unitless) in tablet and smaller breakpoints.

Line Height / M Mob

This text has a line-height of 1.5 (unitless) in mobile, landscape and portrait.

Line Height / L

This text has a line-height of 1.75 (unitless) in desktop breakpoint and smaller ones.

Line Height / L Tab

This text has a line-height of 1.75 (unitless) in tablet and smaller breakpoints.

Line Height / L Mob

This text has a line-height of 1.75 (unitless) in mobile, landscape and portrait.

Line Height / XL

This text has a line-height of 2 (unitless) in desktop breakpoint and smaller ones.

Line Height / XL Tab

This text has a line-height of 2 (unitless) in tablet and smaller breakpoints.

Line Height / XL Mob

This text has a line-height of 2 (unitless) in mobile, landscape and portrait.

Line Height / 0

Line Height 0

Font

Font / DM Sans
This is DM Sans
Font / Roboto Mono
This is Roboto Mono

Font Style

Font Style / Upper

Uppercase

Font Style / Under

Underline

Font Style / Strike

Strikethrough

Font Style / None

Uppercase

Bg

Bg / Primary
Bg / Primary Lightest
Bg / Primary Lighter
Bg / Primary Light
Bg / Primary Dark
Bg / Primary Darker
Bg / Primary Darkest
Bg / Secondary
Bg / Secondary Lightest
Bg / Secondary Lighter
Bg / Secondary Light
Bg / Secondary Dark
Bg / Secondary Darker
Bg / Secondary Darkest
Bg / Neutral
Bg / Neutral Lightest
Bg / Neutral Lighter
Bg / Neutral Light
Bg / Neutral Dark
Bg / Neutral Darker
Bg / Neutral Darkest
Bg / White

Color

Color / Primary

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.

Color / Secondary

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.

Color / Neutral

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.

Color / White

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.

Ratio

Ratio / Square
Ratio / Square Tab
Ratio / Square Mob
Ratio / Panorama
Ratio / Panorama Tab
Ratio / Panorama Mob
Ratio / Landscape
Ratio / Landscape Tab
Ratio / Landscape Mob
Ratio / Standard
Ratio / Standard Tab
Ratio / Standard Mob
Ratio / Tall
Ratio / Tall Tab
Ratio / Tall Mob
Ratio / Skyscraper
Ratio / Skyscraper Tab
Ratio / Skyscraper Mob

This div has its display set to inline-block on tablet and smaller breakpoints.

Position

Position / Static

This div has its position set to static on desktop breakpoint and smaller ones.

Position / Static Tab

This div has its position set to static on tablet and smaller breakpoints.

Position / Static Mob

This div has its position set to static on mobile, landscape and portrait.

Position / Relative

This div has its position set to relative on desktop breakpoint and smaller ones.

Position / Relative Tab

This div has its position set to relative on tablet and smaller breakpoints.

Position / Relative Mob

This div has its position set to relative on mobile, landscape and portrait.

Display

Display / Block

This div has its display set to block on desktop breakpoint and smaller ones.

Display / Block Tab

This div has its display set to block on tablet and smaller breakpoints.

Display / Block Mob

This div has its display set to block on mobile, landscape and portrait.

Display / InBlock

This div has its display set to inline-block on desktop breakpoint and smaller ones.

Display / InBlock Tab

This div has its display set to inline-block on tablet breakpoint and smaller ones.

Display / InBlock Mob

This div has its display set to inline-block on mobile, landscape and portrait.

Display / Inline

This div has its display set to inline on desktop breakpoint and smaller ones.

Display / Inline Tab

This div has its display set to inline on tablet and smaller breakpoints.

Display / Inline Mob

This div has its display set to inline on mobile, landscape and portrait.

Display / None
Display / None Tab

This div has its display set to none on tablet and smaller breakpoints.

Display / None Mob

This div has its display set to none on mobile, landscape and portrait.