Responsive Attributes

Flow Margins & Padding

Desktop: 1.5rem

Tablet: 1.5rem

Mobile (Landscape): 1rem

Mobile (Portrait): inherit

Dual Content Left & Right

Desktop: 3rem

Tablet: inherit from Margin & Padding Responsive Values

Mobile (Landscape): inherit from Margin & Padding Responsive Values

Mobile (Portrait): inherit from Margin & Padding Responsive Values

Dual Content Small

Desktop: 5rem

Tablet: inherit from Dual Content Left & Right

Mobile (Landscape): inherit from Dual Content Left & Right

Mobile (Portrait): inherit from Dual Content Left & Right

Section

Desktop: 4.25rem

Tablet: 3.5rem

Mobile (Landscape): 3rem

Mobile (Portrait): inherit

Container

Desktop: 3rem

Tablet: 2rem

Mobile (Landscape): 1.5rem

Mobile (Portrait): inherit

Card

Desktop: 2rem

Tablet: 1.5rem

Mobile (Landscape): 1rem

Mobile (Portrait): inherit

Heading 1

Heading 2

Heading 3

Heading 4

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.

This is some text inside of a div block.

Text Link

General Typography Classes

Heading 1

Heading 2

Heading 3

Heading 4

This is some text inside of a div block.

Text Link

H1 Inverted

H2 Inverted

H3 Inverted

Heading 4

This is some text inside of a div block.

Text Link

Images

Colors

Background Colors

Text Colors

Default Text Color

Link Text Color

Default Inverted Text Color

Link Text Color

Buttons

Button Text

Layout Containers

Centered Block

Tight Block

Canvas

Dual Content

Card

Weight Blocks

Display

Z-layer

Alignment

SELF ALIGN

Lorem ipsum dolor

CONTENT ALIGN

Lorem ipsum dolor

TEXT ALIGN

Lorem ipsum dolor

Responsive Attributes

Flow Margins & Padding

Dual Content Left & Right

Dual Content Small

Section

Container

Card

Tags

Heading 1

Heading 2

Heading 3

Heading 4

General Typography Classes

Heading 1

Heading 2

Heading 3

Heading 4

H1 Inverted

H2 Inverted

H3 Inverted

Heading 4

Images

Colors

Background Colors

Text Colors

Buttons

Layout Containers

Centered Block

Tight Block

Canvas

Dual Content

Card

Weight Blocks

Display

Z-layer

Alignment

SELF ALIGN

CONTENT ALIGN

TEXT ALIGN

Full Margins

Horizontal & Vertical Margins

Top & Bottom Margins

Left & Right Margins

Full Paddings

Horizontal & Vertical Paddings

Animation Toolkit