Border Color Display Flex Float Others Outline Paragraph styles Sizing Spacing Text styles
Styles

Border Top (border_top)

1px (border-top-1px)

4 (border-top-05)

8 (border-top-1)

12 (border-top-105)

16 (border-top-2)

20 (border-top-205)

24 (border-top-3)
<p class="border-top-1px bg-primary-lighter padding-1">1px (border-top-1px)</p> <p class="border-top-05 bg-primary-lighter padding-1">4 (border-top-05)</p> <p class="border-top-1 bg-primary-lighter padding-1">8 (border-top-1)</p> <p class="border-top-105 bg-primary-lighter padding-1">12 (border-top-105)</p> <p class="border-top-2 bg-primary-lighter padding-1">16 (border-top-2)</p> <p class="border-top-205 bg-primary-lighter padding-1">20 (border-top-205)</p> <p class="border-top-3 bg-primary-lighter padding-1">24 (border-top-3)</p>

Border Bottom (border_bottom)

1px (border-bottom-1px)

4 (border-bottom-05)

8 (border-bottom-1)

12 (border-bottom-105)

16 (border-bottom-2)

20 (border-bottom-205)

24 (border-bottom-3)
<p class="border-bottom-1px bg-primary-lighter padding-1">1px (border-bottom-1px)</p> <p class="border-bottom-05 bg-primary-lighter padding-1">4 (border-bottom-05)</p> <p class="border-bottom-1 bg-primary-lighter padding-1">8 (border-bottom-1)</p> <p class="border-bottom-105 bg-primary-lighter padding-1">12 (border-bottom-105)</p> <p class="border-bottom-2 bg-primary-lighter padding-1">16 (border-bottom-2)</p> <p class="border-bottom-205 bg-primary-lighter padding-1">20 (border-bottom-205)</p> <p class="border-bottom-3 bg-primary-lighter padding-1">24 (border-bottom-3)</p>

Border Left (border_left)

1px (border-left-1px)

4 (border-left-05)

8 (border-left-1)

12 (border-left-105)

16 (border-left-2)

20 (border-left-205)

24 (border-left-3)
<p class="border-left-1px bg-primary-lighter padding-1">1px (border-left-1px)</p> <p class="border-left-05 bg-primary-lighter padding-1">4 (border-left-05)</p> <p class="border-left-1 bg-primary-lighter padding-1">8 (border-left-1)</p> <p class="border-left-105 bg-primary-lighter padding-1">12 (border-left-105)</p> <p class="border-left-2 bg-primary-lighter padding-1">16 (border-left-2)</p> <p class="border-left-205 bg-primary-lighter padding-1">20 (border-left-205)</p> <p class="border-left-3 bg-primary-lighter padding-1">24 (border-left-3)</p>

Border Right (border_right)

1px (border-right-1px)

4 (border-right-05)

8 (border-right-1)

12 (border-right-105)

16 (border-right-2)

20 (border-right-205)

24 (border-right-3)
<p class="border-right-1px bg-primary-lighter padding-1">1px (border-right-1px)</p> <p class="border-right-05 bg-primary-lighter padding-1">4 (border-right-05)</p> <p class="border-right-1 bg-primary-lighter padding-1">8 (border-right-1)</p> <p class="border-right-105 bg-primary-lighter padding-1">12 (border-right-105)</p> <p class="border-right-2 bg-primary-lighter padding-1">16 (border-right-2)</p> <p class="border-right-205 bg-primary-lighter padding-1">20 (border-right-205)</p> <p class="border-right-3 bg-primary-lighter padding-1">24 (border-right-3)</p>

Border Style (border_style)

Solid (border-solid)

Dashed (border-dashed)

Dotted (border-dotted)
<p class="border-solid bg-primary-lighter padding-1">Solid (border-solid)</p> <p class="border-dashed bg-primary-lighter padding-1">Dashed (border-dashed)</p> <p class="border-dotted bg-primary-lighter padding-1">Dotted (border-dotted)</p>

Border Width Top (border_width_top)

1px (border-top-width-1px)

4 (border-top-width-05)

8 (border-top-width-1)

12 (border-top-width-105)

16 (border-top-width-2)

20 (border-top-width-205)

24 (border-top-width-3)
<p class="border-top-width-1px border-top-1px bg-primary-lighter padding-1">1px (border-top-width-1px)</p> <p class="border-top-width-05 border-top-1px bg-primary-lighter padding-1">4 (border-top-width-05)</p> <p class="border-top-width-1 border-top-1px bg-primary-lighter padding-1">8 (border-top-width-1)</p> <p class="border-top-width-105 border-top-1px bg-primary-lighter padding-1">12 (border-top-width-105)</p> <p class="border-top-width-2 border-top-1px bg-primary-lighter padding-1">16 (border-top-width-2)</p> <p class="border-top-width-205 border-top-1px bg-primary-lighter padding-1">20 (border-top-width-205)</p> <p class="border-top-width-3 border-top-1px bg-primary-lighter padding-1">24 (border-top-width-3)</p>

Border Width Bottom (border_width_bottom)

1px (border-bottom-width-1px)

4 (border-bottom-width-05)

8 (border-bottom-width-1)

12 (border-bottom-width-105)

16 (border-bottom-width-2)

20 (border-bottom-width-205)

24 (border-bottom-width-3)
<p class="border-bottom-width-1px border-bottom-1px bg-primary-lighter padding-1">1px (border-bottom-width-1px)</p> <p class="border-bottom-width-05 border-bottom-1px bg-primary-lighter padding-1">4 (border-bottom-width-05)</p> <p class="border-bottom-width-1 border-bottom-1px bg-primary-lighter padding-1">8 (border-bottom-width-1)</p> <p class="border-bottom-width-105 border-bottom-1px bg-primary-lighter padding-1">12 (border-bottom-width-105)</p> <p class="border-bottom-width-2 border-bottom-1px bg-primary-lighter padding-1">16 (border-bottom-width-2)</p> <p class="border-bottom-width-205 border-bottom-1px bg-primary-lighter padding-1">20 (border-bottom-width-205)</p> <p class="border-bottom-width-3 border-bottom-1px bg-primary-lighter padding-1">24 (border-bottom-width-3)</p>

Border Width Left (border_width_left)

1px (border-left-width-1px)

4 (border-left-width-05)

8 (border-left-width-1)

12 (border-left-width-105)

16 (border-left-width-2)

20 (border-left-width-205)

24 (border-left-width-3)
<p class="border-left-width-1px border-left-1px bg-primary-lighter padding-1">1px (border-left-width-1px)</p> <p class="border-left-width-05 border-left-1px bg-primary-lighter padding-1">4 (border-left-width-05)</p> <p class="border-left-width-1 border-left-1px bg-primary-lighter padding-1">8 (border-left-width-1)</p> <p class="border-left-width-105 border-left-1px bg-primary-lighter padding-1">12 (border-left-width-105)</p> <p class="border-left-width-2 border-left-1px bg-primary-lighter padding-1">16 (border-left-width-2)</p> <p class="border-left-width-205 border-left-1px bg-primary-lighter padding-1">20 (border-left-width-205)</p> <p class="border-left-width-3 border-left-1px bg-primary-lighter padding-1">24 (border-left-width-3)</p>

Border Width Right (border_width_right)

1px (border-right-width-1px)

4 (border-right-width-05)

8 (border-right-width-1)

12 (border-right-width-105)

16 (border-right-width-2)

20 (border-right-width-205)

24 (border-right-width-3)
<p class="border-right-width-1px border-right-1px bg-primary-lighter padding-1">1px (border-right-width-1px)</p> <p class="border-right-width-05 border-right-1px bg-primary-lighter padding-1">4 (border-right-width-05)</p> <p class="border-right-width-1 border-right-1px bg-primary-lighter padding-1">8 (border-right-width-1)</p> <p class="border-right-width-105 border-right-1px bg-primary-lighter padding-1">12 (border-right-width-105)</p> <p class="border-right-width-2 border-right-1px bg-primary-lighter padding-1">16 (border-right-width-2)</p> <p class="border-right-width-205 border-right-1px bg-primary-lighter padding-1">20 (border-right-width-205)</p> <p class="border-right-width-3 border-right-1px bg-primary-lighter padding-1">24 (border-right-width-3)</p>

Border Color (border_color)

Base lightest (border-base-lightest)

Base lighter (border-base-lighter)

Base light (border-base-light)

Base (border-base)

Base dark (border-base-dark)

Base darker (border-base-darker)

Base darkest (border-base-darkest)

Ink (border-ink)

Primary lighter (border-primary-lighter)

Primary light (border-primary-light)

Primary (border-primary)

Primary vivid (border-primary-vivid)

Primary dark (border-primary-dark)

Primary darker (border-primary-darker)

Lighter (border-secondary-lighter)

Light (border-secondary-light)

Secondary (border-secondary)

Secondary vivid (border-secondary-vivid)

Secondary dark (border-secondary-dark)

Secondary darker (border-secondary-darker)

Cool lighter (border-accent-cool-lighter)

Cool light (border-accent-cool-light)

Cool (border-accent-cool)

Cool dark (border-accent-cool-dark)

Cool darker (border-accent-cool-darker)

Warm lighter (border-accent-warm-lighter)

Warm light (border-accent-warm-light)

Warm (border-accent-warm)

Warm dark (border-accent-warm-dark)

Warm darkest (border-accent-warm-darker)

Emergency (border-emergency)

Emergency dark (border-emergency-dark)

White (border-white)

Gray 5 (border-gray-5)

Gray 10 (border-gray-10)

Gray 30 (border-gray-30)

Gray 50 (border-gray-50)

Gray 70 (border-gray-70)

Grau 90 (border-gray-90)

Black (border-black)

Red (border-red)

Orange (border-orange)

Gold (border-gold)

Yellow (border-yellow)

Green (border-green)

Mint (border-mint)

Cyan (border-cyan)

Blue (border-blue)

Indigo (border-indigo)

Violet (border-violet)

Magenta (border-magenta)
<p class="border-base-lightest border-top-1px border-bottom-1px border-left-1px border-right-1px bg-primary-lighter padding-1">Base lightest (border-base-lightest)</p> <p class="border-base-lighter border-top-1px border-bottom-1px border-left-1px border-right-1px bg-primary-lighter padding-1">Base lighter (border-base-lighter)</p> <p class="border-base-light border-top-1px border-bottom-1px border-left-1px border-right-1px bg-primary-lighter padding-1">Base light (border-base-light)</p> <p class="border-base border-top-1px border-bottom-1px border-left-1px border-right-1px bg-primary-lighter padding-1">Base (border-base)</p> <p class="border-base-dark border-top-1px border-bottom-1px border-left-1px border-right-1px bg-primary-lighter padding-1">Base dark (border-base-dark)</p> <p class="border-base-darker border-top-1px border-bottom-1px border-left-1px border-right-1px bg-primary-lighter padding-1">Base darker (border-base-darker)</p> <p class="border-base-darkest border-top-1px border-bottom-1px border-left-1px border-right-1px bg-primary-lighter padding-1">Base darkest (border-base-darkest)</p> <p class="border-ink border-top-1px border-bottom-1px border-left-1px border-right-1px bg-primary-lighter padding-1">Ink (border-ink)</p> <p class="border-primary-lighter border-top-1px border-bottom-1px border-left-1px border-right-1px bg-primary-lighter padding-1">Primary lighter (border-primary-lighter)</p> <p class="border-primary-light border-top-1px border-bottom-1px border-left-1px border-right-1px bg-primary-lighter padding-1">Primary light (border-primary-light)</p> <p class="border-primary border-top-1px border-bottom-1px border-left-1px border-right-1px bg-primary-lighter padding-1">Primary (border-primary)</p> <p class="border-primary-vivid border-top-1px border-bottom-1px border-left-1px border-right-1px bg-primary-lighter padding-1">Primary vivid (border-primary-vivid)</p> <p class="border-primary-dark border-top-1px border-bottom-1px border-left-1px border-right-1px bg-primary-lighter padding-1">Primary dark (border-primary-dark)</p> <p class="border-primary-darker border-top-1px border-bottom-1px border-left-1px border-right-1px bg-primary-lighter padding-1">Primary darker (border-primary-darker)</p> <p class="border-secondary-lighter border-top-1px border-bottom-1px border-left-1px border-right-1px bg-primary-lighter padding-1">Lighter (border-secondary-lighter)</p> <p class="border-secondary-light border-top-1px border-bottom-1px border-left-1px border-right-1px bg-primary-lighter padding-1">Light (border-secondary-light)</p> <p class="border-secondary border-top-1px border-bottom-1px border-left-1px border-right-1px bg-primary-lighter padding-1">Secondary (border-secondary)</p> <p class="border-secondary-vivid border-top-1px border-bottom-1px border-left-1px border-right-1px bg-primary-lighter padding-1">Secondary vivid (border-secondary-vivid)</p> <p class="border-secondary-dark border-top-1px border-bottom-1px border-left-1px border-right-1px bg-primary-lighter padding-1">Secondary dark (border-secondary-dark)</p> <p class="border-secondary-darker border-top-1px border-bottom-1px border-left-1px border-right-1px bg-primary-lighter padding-1">Secondary darker (border-secondary-darker)</p> <p class="border-accent-cool-lighter border-top-1px border-bottom-1px border-left-1px border-right-1px bg-primary-lighter padding-1">Cool lighter (border-accent-cool-lighter)</p> <p class="border-accent-cool-light border-top-1px border-bottom-1px border-left-1px border-right-1px bg-primary-lighter padding-1">Cool light (border-accent-cool-light)</p> <p class="border-accent-cool border-top-1px border-bottom-1px border-left-1px border-right-1px bg-primary-lighter padding-1">Cool (border-accent-cool)</p> <p class="border-accent-cool-dark border-top-1px border-bottom-1px border-left-1px border-right-1px bg-primary-lighter padding-1">Cool dark (border-accent-cool-dark)</p> <p class="border-accent-cool-darker border-top-1px border-bottom-1px border-left-1px border-right-1px bg-primary-lighter padding-1">Cool darker (border-accent-cool-darker)</p> <p class="border-accent-warm-lighter border-top-1px border-bottom-1px border-left-1px border-right-1px bg-primary-lighter padding-1">Warm lighter (border-accent-warm-lighter)</p> <p class="border-accent-warm-light border-top-1px border-bottom-1px border-left-1px border-right-1px bg-primary-lighter padding-1">Warm light (border-accent-warm-light)</p> <p class="border-accent-warm border-top-1px border-bottom-1px border-left-1px border-right-1px bg-primary-lighter padding-1">Warm (border-accent-warm)</p> <p class="border-accent-warm-dark border-top-1px border-bottom-1px border-left-1px border-right-1px bg-primary-lighter padding-1">Warm dark (border-accent-warm-dark)</p> <p class="border-accent-warm-darker border-top-1px border-bottom-1px border-left-1px border-right-1px bg-primary-lighter padding-1">Warm darkest (border-accent-warm-darker)</p> <p class="border-emergency border-top-1px border-bottom-1px border-left-1px border-right-1px bg-primary-lighter padding-1">Emergency (border-emergency)</p> <p class="border-emergency-dark border-top-1px border-bottom-1px border-left-1px border-right-1px bg-primary-lighter padding-1">Emergency dark (border-emergency-dark)</p> <p class="border-white border-top-1px border-bottom-1px border-left-1px border-right-1px bg-primary-lighter padding-1">White (border-white)</p> <p class="border-gray-5 border-top-1px border-bottom-1px border-left-1px border-right-1px bg-primary-lighter padding-1">Gray 5 (border-gray-5)</p> <p class="border-gray-10 border-top-1px border-bottom-1px border-left-1px border-right-1px bg-primary-lighter padding-1">Gray 10 (border-gray-10)</p> <p class="border-gray-30 border-top-1px border-bottom-1px border-left-1px border-right-1px bg-primary-lighter padding-1">Gray 30 (border-gray-30)</p> <p class="border-gray-50 border-top-1px border-bottom-1px border-left-1px border-right-1px bg-primary-lighter padding-1">Gray 50 (border-gray-50)</p> <p class="border-gray-70 border-top-1px border-bottom-1px border-left-1px border-right-1px bg-primary-lighter padding-1">Gray 70 (border-gray-70)</p> <p class="border-gray-90 border-top-1px border-bottom-1px border-left-1px border-right-1px bg-primary-lighter padding-1">Grau 90 (border-gray-90)</p> <p class="border-black border-top-1px border-bottom-1px border-left-1px border-right-1px bg-primary-lighter padding-1">Black (border-black)</p> <p class="border-red border-top-1px border-bottom-1px border-left-1px border-right-1px bg-primary-lighter padding-1">Red (border-red)</p> <p class="border-orange border-top-1px border-bottom-1px border-left-1px border-right-1px bg-primary-lighter padding-1">Orange (border-orange)</p> <p class="border-gold border-top-1px border-bottom-1px border-left-1px border-right-1px bg-primary-lighter padding-1">Gold (border-gold)</p> <p class="border-yellow border-top-1px border-bottom-1px border-left-1px border-right-1px bg-primary-lighter padding-1">Yellow (border-yellow)</p> <p class="border-green border-top-1px border-bottom-1px border-left-1px border-right-1px bg-primary-lighter padding-1">Green (border-green)</p> <p class="border-mint border-top-1px border-bottom-1px border-left-1px border-right-1px bg-primary-lighter padding-1">Mint (border-mint)</p> <p class="border-cyan border-top-1px border-bottom-1px border-left-1px border-right-1px bg-primary-lighter padding-1">Cyan (border-cyan)</p> <p class="border-blue border-top-1px border-bottom-1px border-left-1px border-right-1px bg-primary-lighter padding-1">Blue (border-blue)</p> <p class="border-indigo border-top-1px border-bottom-1px border-left-1px border-right-1px bg-primary-lighter padding-1">Indigo (border-indigo)</p> <p class="border-violet border-top-1px border-bottom-1px border-left-1px border-right-1px bg-primary-lighter padding-1">Violet (border-violet)</p> <p class="border-magenta border-top-1px border-bottom-1px border-left-1px border-right-1px bg-primary-lighter padding-1">Magenta (border-magenta)</p>

Border Radius Top (border_radius_top)

2px (radius-top-sm)

4px (radius-top-md)

8px (radius-top-lg)

99rem (radius-top-pill)
<p class="radius-top-sm border-top-1px border-bottom-1px border-left-1px border-right-1px bg-primary-lighter padding-1">2px (radius-top-sm)</p> <p class="radius-top-md border-top-1px border-bottom-1px border-left-1px border-right-1px bg-primary-lighter padding-1">4px (radius-top-md)</p> <p class="radius-top-lg border-top-1px border-bottom-1px border-left-1px border-right-1px bg-primary-lighter padding-1">8px (radius-top-lg)</p> <p class="radius-top-pill border-top-1px border-bottom-1px border-left-1px border-right-1px bg-primary-lighter padding-1">99rem (radius-top-pill)</p>

Border Radius Bottom (border_radius_bottom)

2px (radius-bottom-sm)

4px (radius-bottom-md)

8px (radius-bottom-lg)

99rem (radius-bottom-pill)
<p class="radius-bottom-sm border-top-1px border-bottom-1px border-left-1px border-right-1px bg-primary-lighter padding-1">2px (radius-bottom-sm)</p> <p class="radius-bottom-md border-top-1px border-bottom-1px border-left-1px border-right-1px bg-primary-lighter padding-1">4px (radius-bottom-md)</p> <p class="radius-bottom-lg border-top-1px border-bottom-1px border-left-1px border-right-1px bg-primary-lighter padding-1">8px (radius-bottom-lg)</p> <p class="radius-bottom-pill border-top-1px border-bottom-1px border-left-1px border-right-1px bg-primary-lighter padding-1">99rem (radius-bottom-pill)</p>

Border Radius Left (border_radius_left)

2px (radius-left-sm)

4px (radius-left-md)

8px (radius-left-lg)

99rem (radius-left-pill)
<p class="radius-left-sm border-top-1px border-bottom-1px border-left-1px border-right-1px bg-primary-lighter padding-1">2px (radius-left-sm)</p> <p class="radius-left-md border-top-1px border-bottom-1px border-left-1px border-right-1px bg-primary-lighter padding-1">4px (radius-left-md)</p> <p class="radius-left-lg border-top-1px border-bottom-1px border-left-1px border-right-1px bg-primary-lighter padding-1">8px (radius-left-lg)</p> <p class="radius-left-pill border-top-1px border-bottom-1px border-left-1px border-right-1px bg-primary-lighter padding-1">99rem (radius-left-pill)</p>

Border Radius Right (border_radius_right)

2px (radius-right-sm)

4px (radius-right-md)

8px (radius-right-lg)

99rem (radius-right-pill)
<p class="radius-right-sm border-top-1px border-bottom-1px border-left-1px border-right-1px bg-primary-lighter padding-1">2px (radius-right-sm)</p> <p class="radius-right-md border-top-1px border-bottom-1px border-left-1px border-right-1px bg-primary-lighter padding-1">4px (radius-right-md)</p> <p class="radius-right-lg border-top-1px border-bottom-1px border-left-1px border-right-1px bg-primary-lighter padding-1">8px (radius-right-lg)</p> <p class="radius-right-pill border-top-1px border-bottom-1px border-left-1px border-right-1px bg-primary-lighter padding-1">99rem (radius-right-pill)</p>

Background color (background_color)

Base lightest (bg-base-lightest)

Base lighter (bg-base-lighter)

Base light (bg-base-light)

Base (bg-base)

Base dark (bg-base-dark)

Base darker (bg-base-darker)

Base darkest (bg-base-darkest)

Ink (bg-ink)

Primary lighter (bg-primary-lighter)

Primary light (bg-primary-light)

Primary (bg-primary)

Primary vivid (bg-primary-vivid)

Primary dark (bg-primary-dark)

Primary darker (bg-primary-darker)

Lighter (bg-secondary-lighter)

Light (bg-secondary-light)

Secondary (bg-secondary)

Secondary vivid (bg-secondary-vivid)

Secondary dark (bg-secondary-dark)

Secondary darker (bg-secondary-darker)

Cool lighter (bg-accent-cool-lighter)

Cool light (bg-accent-cool-light)

Cool (bg-accent-cool)

Cool dark (bg-accent-cool-dark)

Cool darker (bg-accent-cool-darker)

Warm lighter (bg-accent-warm-lighter)

Warm light (bg-accent-warm-light)

Warm (bg-accent-warm)

Warm dark (bg-accent-warm-dark)

Warm darkest (bg-accent-warm-darker)

Emergency (bg-emergency)

Emergency dark (bg-emergency-dark)

White (bg-white)

Gray 5 (bg-gray-5)

Gray 10 (bg-gray-10)

Gray 30 (bg-gray-30)

Gray 50 (bg-gray-50)

Gray 70 (bg-gray-70)

Grau 90 (bg-gray-90)

Black (bg-black)

Red (bg-red)

Orange (bg-orange)

Gold (bg-gold)

Yellow (bg-yellow)

Green (bg-green)

Mint (bg-mint)

Cyan (bg-cyan)

Blue (bg-blue)

Indigo (bg-indigo)

Violet (bg-violet)

Magenta (bg-magenta)
<p class="bg-base-lightest padding-1">Base lightest (bg-base-lightest)</p> <p class="bg-base-lighter padding-1">Base lighter (bg-base-lighter)</p> <p class="bg-base-light padding-1">Base light (bg-base-light)</p> <p class="bg-base padding-1">Base (bg-base)</p> <p class="bg-base-dark padding-1 text-base-lightest">Base dark (bg-base-dark)</p> <p class="bg-base-darker padding-1 text-base-lightest">Base darker (bg-base-darker)</p> <p class="bg-base-darkest padding-1 text-base-lightest">Base darkest (bg-base-darkest)</p> <p class="bg-ink padding-1 text-base-lightest">Ink (bg-ink)</p> <p class="bg-primary-lighter padding-1">Primary lighter (bg-primary-lighter)</p> <p class="bg-primary-light padding-1">Primary light (bg-primary-light)</p> <p class="bg-primary padding-1">Primary (bg-primary)</p> <p class="bg-primary-vivid padding-1">Primary vivid (bg-primary-vivid)</p> <p class="bg-primary-dark padding-1 text-base-lightest">Primary dark (bg-primary-dark)</p> <p class="bg-primary-darker padding-1 text-base-lightest">Primary darker (bg-primary-darker)</p> <p class="bg-secondary-lighter padding-1">Lighter (bg-secondary-lighter)</p> <p class="bg-secondary-light padding-1">Light (bg-secondary-light)</p> <p class="bg-secondary padding-1">Secondary (bg-secondary)</p> <p class="bg-secondary-vivid padding-1">Secondary vivid (bg-secondary-vivid)</p> <p class="bg-secondary-dark padding-1 text-base-lightest">Secondary dark (bg-secondary-dark)</p> <p class="bg-secondary-darker padding-1 text-base-lightest">Secondary darker (bg-secondary-darker)</p> <p class="bg-accent-cool-lighter padding-1">Cool lighter (bg-accent-cool-lighter)</p> <p class="bg-accent-cool-light padding-1">Cool light (bg-accent-cool-light)</p> <p class="bg-accent-cool padding-1">Cool (bg-accent-cool)</p> <p class="bg-accent-cool-dark padding-1 text-base-lightest">Cool dark (bg-accent-cool-dark)</p> <p class="bg-accent-cool-darker padding-1 text-base-lightest">Cool darker (bg-accent-cool-darker)</p> <p class="bg-accent-warm-lighter padding-1">Warm lighter (bg-accent-warm-lighter)</p> <p class="bg-accent-warm-light padding-1">Warm light (bg-accent-warm-light)</p> <p class="bg-accent-warm padding-1">Warm (bg-accent-warm)</p> <p class="bg-accent-warm-dark padding-1 text-base-lightest">Warm dark (bg-accent-warm-dark)</p> <p class="bg-accent-warm-darker padding-1 text-base-lightest">Warm darkest (bg-accent-warm-darker)</p> <p class="bg-emergency padding-1">Emergency (bg-emergency)</p> <p class="bg-emergency-dark padding-1 text-base-lightest">Emergency dark (bg-emergency-dark)</p> <p class="bg-white padding-1">White (bg-white)</p> <p class="bg-gray-5 padding-1">Gray 5 (bg-gray-5)</p> <p class="bg-gray-10 padding-1">Gray 10 (bg-gray-10)</p> <p class="bg-gray-30 padding-1">Gray 30 (bg-gray-30)</p> <p class="bg-gray-50 padding-1">Gray 50 (bg-gray-50)</p> <p class="bg-gray-70 padding-1">Gray 70 (bg-gray-70)</p> <p class="bg-gray-90 padding-1">Grau 90 (bg-gray-90)</p> <p class="bg-black padding-1">Black (bg-black)</p> <p class="bg-red padding-1">Red (bg-red)</p> <p class="bg-orange padding-1">Orange (bg-orange)</p> <p class="bg-gold padding-1">Gold (bg-gold)</p> <p class="bg-yellow padding-1">Yellow (bg-yellow)</p> <p class="bg-green padding-1">Green (bg-green)</p> <p class="bg-mint padding-1">Mint (bg-mint)</p> <p class="bg-cyan padding-1">Cyan (bg-cyan)</p> <p class="bg-blue padding-1">Blue (bg-blue)</p> <p class="bg-indigo padding-1">Indigo (bg-indigo)</p> <p class="bg-violet padding-1">Violet (bg-violet)</p> <p class="bg-magenta padding-1">Magenta (bg-magenta)</p>

Text color (text_color)

Base lightest (text-base-lightest)

Base lighter (text-base-lighter)

Base light (text-base-light)

Base (text-base)

Base dark (text-base-dark)

Base darker (text-base-darker)

Base darkest (text-base-darkest)

Ink (text-ink)

Primary lighter (text-primary-lighter)

Primary light (text-primary-light)

Primary (text-primary)

Primary vivid (text-primary-vivid)

Primary dark (text-primary-dark)

Primary darker (text-primary-darker)

Lighter (text-secondary-lighter)

Light (text-secondary-light)

Secondary (text-secondary)

Secondary vivid (text-secondary-vivid)

Secondary dark (text-secondary-dark)

Secondary darker (text-secondary-darker)

Cool lighter (text-accent-cool-lighter)

Cool light (text-accent-cool-light)

Cool (text-accent-cool)

Cool dark (text-accent-cool-dark)

Cool darker (text-accent-cool-darker)

Warm lighter (text-accent-warm-lighter)

Warm light (text-accent-warm-light)

Warm (text-accent-warm)

Warm dark (text-accent-warm-dark)

Warm darkest (text-accent-warm-darker)

Emergency (text-emergency)

Emergency dark (text-emergency-dark)

White (text-white)

Gray 5 (text-gray-5)

Gray 10 (text-gray-10)

Gray 30 (text-gray-30)

Gray 50 (text-gray-50)

Gray 70 (text-gray-70)

Grau 90 (text-gray-90)

Black (text-black)

Red (text-red)

Orange (text-orange)

Gold (text-gold)

Yellow (text-yellow)

Green (text-green)

Mint (text-mint)

Cyan (text-cyan)

Blue (text-blue)

Indigo (text-indigo)

Violet (text-violet)

Magenta (text-magenta)
<p class="text-base-lightest padding-1 bg-base-light">Base lightest (text-base-lightest)</p> <p class="text-base-lighter padding-1 bg-base-light">Base lighter (text-base-lighter)</p> <p class="text-base-light padding-1">Base light (text-base-light)</p> <p class="text-base padding-1">Base (text-base)</p> <p class="text-base-dark padding-1 bg-base-lightest">Base dark (text-base-dark)</p> <p class="text-base-darker padding-1 bg-base-lightest">Base darker (text-base-darker)</p> <p class="text-base-darkest padding-1 bg-base-lightest">Base darkest (text-base-darkest)</p> <p class="text-ink padding-1 bg-base-lightest">Ink (text-ink)</p> <p class="text-primary-lighter padding-1">Primary lighter (text-primary-lighter)</p> <p class="text-primary-light padding-1">Primary light (text-primary-light)</p> <p class="text-primary padding-1">Primary (text-primary)</p> <p class="text-primary-vivid padding-1">Primary vivid (text-primary-vivid)</p> <p class="text-primary-dark padding-1 bg-base-lightest">Primary dark (text-primary-dark)</p> <p class="text-primary-darker padding-1 bg-base-lightest">Primary darker (text-primary-darker)</p> <p class="text-secondary-lighter padding-1">Lighter (text-secondary-lighter)</p> <p class="text-secondary-light padding-1">Light (text-secondary-light)</p> <p class="text-secondary padding-1">Secondary (text-secondary)</p> <p class="text-secondary-vivid padding-1">Secondary vivid (text-secondary-vivid)</p> <p class="text-secondary-dark padding-1 bg-base-lightest">Secondary dark (text-secondary-dark)</p> <p class="text-secondary-darker padding-1 bg-base-lightest">Secondary darker (text-secondary-darker)</p> <p class="text-accent-cool-lighter padding-1">Cool lighter (text-accent-cool-lighter)</p> <p class="text-accent-cool-light padding-1">Cool light (text-accent-cool-light)</p> <p class="text-accent-cool padding-1">Cool (text-accent-cool)</p> <p class="text-accent-cool-dark padding-1 bg-base-lightest">Cool dark (text-accent-cool-dark)</p> <p class="text-accent-cool-darker padding-1 bg-base-lightest">Cool darker (text-accent-cool-darker)</p> <p class="text-accent-warm-lighter padding-1">Warm lighter (text-accent-warm-lighter)</p> <p class="text-accent-warm-light padding-1">Warm light (text-accent-warm-light)</p> <p class="text-accent-warm padding-1">Warm (text-accent-warm)</p> <p class="text-accent-warm-dark padding-1 bg-base-lightest">Warm dark (text-accent-warm-dark)</p> <p class="text-accent-warm-darker padding-1 bg-base-lightest">Warm darkest (text-accent-warm-darker)</p> <p class="text-emergency padding-1">Emergency (text-emergency)</p> <p class="text-emergency-dark padding-1 bg-base-lightest">Emergency dark (text-emergency-dark)</p> <p class="text-white padding-1 bg-base-lightest">White (text-white)</p> <p class="text-gray-5 padding-1">Gray 5 (text-gray-5)</p> <p class="text-gray-10 padding-1">Gray 10 (text-gray-10)</p> <p class="text-gray-30 padding-1">Gray 30 (text-gray-30)</p> <p class="text-gray-50 padding-1">Gray 50 (text-gray-50)</p> <p class="text-gray-70 padding-1">Gray 70 (text-gray-70)</p> <p class="text-gray-90 padding-1">Grau 90 (text-gray-90)</p> <p class="text-black padding-1">Black (text-black)</p> <p class="text-red padding-1">Red (text-red)</p> <p class="text-orange padding-1">Orange (text-orange)</p> <p class="text-gold padding-1">Gold (text-gold)</p> <p class="text-yellow padding-1">Yellow (text-yellow)</p> <p class="text-green padding-1">Green (text-green)</p> <p class="text-mint padding-1">Mint (text-mint)</p> <p class="text-cyan padding-1">Cyan (text-cyan)</p> <p class="text-blue padding-1">Blue (text-blue)</p> <p class="text-indigo padding-1">Indigo (text-indigo)</p> <p class="text-violet padding-1">Violet (text-violet)</p> <p class="text-magenta padding-1">Magenta (text-magenta)</p>

Display (display)

Block (display-block)

Flex (display-flex)

Inline (display-inline)

Inline Block (display-inline-block)

Inline Flex (display-inline-flex)

Table Cell (display-table-cell)
<p class="display-none">None (display-none)</p> <p class="display-block">Block (display-block)</p> <p class="display-flex">Flex (display-flex)</p> <p class="display-inline">Inline (display-inline)</p> <p class="display-inline-block">Inline Block (display-inline-block)</p> <p class="display-inline-flex">Inline Flex (display-inline-flex)</p> <p class="display-table-cell">Table Cell (display-table-cell)</p>

Overflow X (overflow_x)

Visible (overflow-x-visible)

Hidden (overflow-x-hidden)

Scroll (overflow-x-scroll)

Auto (overflow-x-auto)
<p class="overflow-x-visible">Visible (overflow-x-visible)</p> <p class="overflow-x-hidden">Hidden (overflow-x-hidden)</p> <p class="overflow-x-scroll">Scroll (overflow-x-scroll)</p> <p class="overflow-x-auto">Auto (overflow-x-auto)</p>

Overflow y (overflow_y)

Visible (overflow-y-visible)

Hidden (overflow-y-hidden)

Scroll (overflow-y-scroll)

Auto (overflow-y-auto)
<p class="overflow-y-visible">Visible (overflow-y-visible)</p> <p class="overflow-y-hidden">Hidden (overflow-y-hidden)</p> <p class="overflow-y-scroll">Scroll (overflow-y-scroll)</p> <p class="overflow-y-auto">Auto (overflow-y-auto)</p>

Position (position)

Absolute (position-absolute)

Fixed (position-fixed)

Relative (position-relative)

Static (position-static)

Sticky (position-sticky)
<p class="position-absolute">Absolute (position-absolute)</p> <p class="position-fixed">Fixed (position-fixed)</p> <p class="position-relative">Relative (position-relative)</p> <p class="position-static">Static (position-static)</p> <p class="position-sticky">Sticky (position-sticky)</p>

Relative Position Top (relative_position_top)

Auto (top-auto)

Full (top-full)

-24 (top-neg-3)

-20 (top-neg-205)

-16 (top-neg-2)

-12 (top-neg-105)

-8 (top-neg-1)

-4 (top-neg-05)

0 (top-0)

4 (top-05)

8 (top-1)

12 (top-105)

16 (top-2)

20 (top-205)

24 (top-3)
<p class="top-auto">Auto (top-auto)</p> <p class="top-full">Full (top-full)</p> <p class="top-neg-3">-24 (top-neg-3)</p> <p class="top-neg-205">-20 (top-neg-205)</p> <p class="top-neg-2">-16 (top-neg-2)</p> <p class="top-neg-105">-12 (top-neg-105)</p> <p class="top-neg-1">-8 (top-neg-1)</p> <p class="top-neg-05">-4 (top-neg-05)</p> <p class="top-0">0 (top-0)</p> <p class="top-05">4 (top-05)</p> <p class="top-1">8 (top-1)</p> <p class="top-105">12 (top-105)</p> <p class="top-2">16 (top-2)</p> <p class="top-205">20 (top-205)</p> <p class="top-3">24 (top-3)</p>

Relative Position Bottom (relative_position_bottom)

Auto (bottom-auto)

Full (bottom-full)

-24 (bottom-neg-3)

-20 (bottom-neg-205)

-16 (bottom-neg-2)

-12 (bottom-neg-105)

-8 (bottom-neg-1)

-4 (bottom-neg-05)

0 (bottom-0)

4 (bottom-05)

8 (bottom-1)

12 (bottom-105)

16 (bottom-2)

20 (bottom-205)

24 (bottom-3)
<p class="bottom-auto">Auto (bottom-auto)</p> <p class="bottom-full">Full (bottom-full)</p> <p class="bottom-neg-3">-24 (bottom-neg-3)</p> <p class="bottom-neg-205">-20 (bottom-neg-205)</p> <p class="bottom-neg-2">-16 (bottom-neg-2)</p> <p class="bottom-neg-105">-12 (bottom-neg-105)</p> <p class="bottom-neg-1">-8 (bottom-neg-1)</p> <p class="bottom-neg-05">-4 (bottom-neg-05)</p> <p class="bottom-0">0 (bottom-0)</p> <p class="bottom-05">4 (bottom-05)</p> <p class="bottom-1">8 (bottom-1)</p> <p class="bottom-105">12 (bottom-105)</p> <p class="bottom-2">16 (bottom-2)</p> <p class="bottom-205">20 (bottom-205)</p> <p class="bottom-3">24 (bottom-3)</p>

Relative Position Right (relative_position_right)

Auto (right-auto)

Full (right-full)

-24 (right-neg-3)

-20 (right-neg-205)

-16 (right-neg-2)

-12 (right-neg-105)

-8 (right-neg-1)

-4 (right-neg-05)

0 (right-0)

4 (right-05)

8 (right-1)

12 (right-105)

16 (right-2)

20 (right-205)

24 (right-3)
<p class="right-auto">Auto (right-auto)</p> <p class="right-full">Full (right-full)</p> <p class="right-neg-3">-24 (right-neg-3)</p> <p class="right-neg-205">-20 (right-neg-205)</p> <p class="right-neg-2">-16 (right-neg-2)</p> <p class="right-neg-105">-12 (right-neg-105)</p> <p class="right-neg-1">-8 (right-neg-1)</p> <p class="right-neg-05">-4 (right-neg-05)</p> <p class="right-0">0 (right-0)</p> <p class="right-05">4 (right-05)</p> <p class="right-1">8 (right-1)</p> <p class="right-105">12 (right-105)</p> <p class="right-2">16 (right-2)</p> <p class="right-205">20 (right-205)</p> <p class="right-3">24 (right-3)</p>

Relative Position Left (relative_position_left)

Auto (left-auto)

Full (left-full)

-24 (left-neg-3)

-20 (left-neg-205)

-16 (left-neg-2)

-12 (left-neg-105)

-8 (left-neg-1)

-4 (left-neg-05)

0 (left-0)

4 (left-05)

8 (left-1)

12 (left-105)

16 (left-2)

20 (left-205)

24 (left-3)
<p class="left-auto">Auto (left-auto)</p> <p class="left-full">Full (left-full)</p> <p class="left-neg-3">-24 (left-neg-3)</p> <p class="left-neg-205">-20 (left-neg-205)</p> <p class="left-neg-2">-16 (left-neg-2)</p> <p class="left-neg-105">-12 (left-neg-105)</p> <p class="left-neg-1">-8 (left-neg-1)</p> <p class="left-neg-05">-4 (left-neg-05)</p> <p class="left-0">0 (left-0)</p> <p class="left-05">4 (left-05)</p> <p class="left-1">8 (left-1)</p> <p class="left-105">12 (left-105)</p> <p class="left-2">16 (left-2)</p> <p class="left-205">20 (left-205)</p> <p class="left-3">24 (left-3)</p>

Pin (pin)

Top (pin-top)

Bottom (pin-bottom)

Right (pin-right)

Left (pin-left)

X (pin-x)

Y (pin-y)

All (pin-all)

None (pin-none)

Top X (pin-top.pin-x)

Bottom X (pin-bottom.pin-x)

Left Y (pin-left.pin-y)

Right Y (pin-right.pin-y)
<p class="pin-top">Top (pin-top)</p> <p class="pin-bottom">Bottom (pin-bottom)</p> <p class="pin-right">Right (pin-right)</p> <p class="pin-left">Left (pin-left)</p> <p class="pin-x">X (pin-x)</p> <p class="pin-y">Y (pin-y)</p> <p class="pin-all">All (pin-all)</p> <p class="pin-none">None (pin-none)</p> <p class="pin-top.pin-x">Top X (pin-top.pin-x)</p> <p class="pin-bottom.pin-x">Bottom X (pin-bottom.pin-x)</p> <p class="pin-left.pin-y">Left Y (pin-left.pin-y)</p> <p class="pin-right.pin-y">Right Y (pin-right.pin-y)</p>

Z Index (z_index)

Auto (z-auto)

Top (z-top)

500 (z-500)

400 (z-400)

300 (z-300)

200 (z-200)

100 (z-100)

0 (z-0)

Bottom (z-bottom)
<p class="z-auto">Auto (z-auto)</p> <p class="z-top">Top (z-top)</p> <p class="z-500">500 (z-500)</p> <p class="z-400">400 (z-400)</p> <p class="z-300">300 (z-300)</p> <p class="z-200">200 (z-200)</p> <p class="z-100">100 (z-100)</p> <p class="z-0">0 (z-0)</p> <p class="z-bottom">Bottom (z-bottom)</p>

Flex (flex)

Auto (flex-auto)

Fill (flex-fill)

1 (flex-1)

2 (flex-2)

3 (flex-3)

4 (flex-4)

5 (flex-5)

6 (flex-6)

7 (flex-7)

8 (flex-8)

9 (flex-9)

10 (flex-10)

11 (flex-11)

12 (flex-12)
<p class="flex-auto">Auto (flex-auto)</p> <p class="flex-fill">Fill (flex-fill)</p> <p class="flex-1">1 (flex-1)</p> <p class="flex-2">2 (flex-2)</p> <p class="flex-3">3 (flex-3)</p> <p class="flex-4">4 (flex-4)</p> <p class="flex-5">5 (flex-5)</p> <p class="flex-6">6 (flex-6)</p> <p class="flex-7">7 (flex-7)</p> <p class="flex-8">8 (flex-8)</p> <p class="flex-9">9 (flex-9)</p> <p class="flex-10">10 (flex-10)</p> <p class="flex-11">11 (flex-11)</p> <p class="flex-12">12 (flex-12)</p>

Flex Direction (flex_direction)

Column (flex-column)

Row (flex-row)
<p class="flex-column">Column (flex-column)</p> <p class="flex-row">Row (flex-row)</p>

Flex Wrap (flex_wrap)

Wrap (flex-wrap)

No wrap (flex-no-wrap)
<p class="flex-wrap">Wrap (flex-wrap)</p> <p class="flex-no-wrap">No wrap (flex-no-wrap)</p>

Flex Align (flex_align)

Start (flex-align-start)

Center (flex-align-center)

End (flex-align-end)

Stretch (flex-align-stretch)
<p class="flex-align-start">Start (flex-align-start)</p> <p class="flex-align-center">Center (flex-align-center)</p> <p class="flex-align-end">End (flex-align-end)</p> <p class="flex-align-stretch">Stretch (flex-align-stretch)</p>

Flex Self Align (flex_self_align)

Start (flex-align-self-start)

Center (flex-align-self-center)

End (flex-align-self-end)

Stretch (flex-align-self-stretch)
<p class="flex-align-self-start">Start (flex-align-self-start)</p> <p class="flex-align-self-center">Center (flex-align-self-center)</p> <p class="flex-align-self-end">End (flex-align-self-end)</p> <p class="flex-align-self-stretch">Stretch (flex-align-self-stretch)</p>

Flex Justify (flex_justify)

Justify (flex-justify)

Justify Start (flex-justify-start)

Justify Center (flex-justify-center)

Justify End (flex-justify-end)
<p class="flex-justify">Justify (flex-justify)</p> <p class="flex-justify-start">Justify Start (flex-justify-start)</p> <p class="flex-justify-center">Justify Center (flex-justify-center)</p> <p class="flex-justify-end">Justify End (flex-justify-end)</p>

Flex Order (flex_order)

First (order-first)

Last (order-last)

Initial (order-initial)

0 (order-0)

1 (order-1)

2 (order-2)

3 (order-3)

4 (order-4)

5 (order-5)

6 (order-6)

7 (order-7)

8 (order-8)

9 (order-9)

10 (order-10)

11 (order-11)

12 (order-12)
<p class="order-first">First (order-first)</p> <p class="order-last">Last (order-last)</p> <p class="order-initial">Initial (order-initial)</p> <p class="order-0">0 (order-0)</p> <p class="order-1">1 (order-1)</p> <p class="order-2">2 (order-2)</p> <p class="order-3">3 (order-3)</p> <p class="order-4">4 (order-4)</p> <p class="order-5">5 (order-5)</p> <p class="order-6">6 (order-6)</p> <p class="order-7">7 (order-7)</p> <p class="order-8">8 (order-8)</p> <p class="order-9">9 (order-9)</p> <p class="order-10">10 (order-10)</p> <p class="order-11">11 (order-11)</p> <p class="order-12">12 (order-12)</p>

Clearfix (clearfix)

Yes (clearfix)
<p class="clearfix">Yes (clearfix)</p>

Float (float)

None (float-none)

Right (float-right)

Left (float-left)
<p class="float-none">None (float-none)</p> <p class="float-right">Right (float-right)</p> <p class="float-left">Left (float-left)</p>

List Reset (list_reset)

Reset default list styling

Reset (add-list-reset)
<p class="add-list-reset">Reset (add-list-reset)</p>

Opacity (opacity)

Set the opacity (or transparency) of an item in increments of 10%.

0 (opacity-0)

10 (opacity-10)

20 (opacity-20)

30 (opacity-30)

40 (opacity-40)

50 (opacity-50)

60 (opacity-60)

70 (opacity-70)

80 (opacity-80)

90 (opacity-90)

100 (opacity-100)
<p class="opacity-0 bg-primary-lighter padding-1">0 (opacity-0)</p> <p class="opacity-10 bg-primary-lighter padding-1">10 (opacity-10)</p> <p class="opacity-20 bg-primary-lighter padding-1">20 (opacity-20)</p> <p class="opacity-30 bg-primary-lighter padding-1">30 (opacity-30)</p> <p class="opacity-40 bg-primary-lighter padding-1">40 (opacity-40)</p> <p class="opacity-50 bg-primary-lighter padding-1">50 (opacity-50)</p> <p class="opacity-60 bg-primary-lighter padding-1">60 (opacity-60)</p> <p class="opacity-70 bg-primary-lighter padding-1">70 (opacity-70)</p> <p class="opacity-80 bg-primary-lighter padding-1">80 (opacity-80)</p> <p class="opacity-90 bg-primary-lighter padding-1">90 (opacity-90)</p> <p class="opacity-100 bg-primary-lighter padding-1">100 (opacity-100)</p>

Shadow (shadow)

Often used to indicate elevation.

None (shadow-none)

1 (shadow-1)

2 (shadow-2)

3 (shadow-3)

4 (shadow-4)

5 (shadow-5)
<p class="shadow-none bg-primary-lighter padding-1">None (shadow-none)</p> <p class="shadow-1 bg-primary-lighter padding-1">1 (shadow-1)</p> <p class="shadow-2 bg-primary-lighter padding-1">2 (shadow-2)</p> <p class="shadow-3 bg-primary-lighter padding-1">3 (shadow-3)</p> <p class="shadow-4 bg-primary-lighter padding-1">4 (shadow-4)</p> <p class="shadow-5 bg-primary-lighter padding-1">5 (shadow-5)</p>

Prose (prose)

Prose (usa-prose)
<p class="usa-prose">Prose (usa-prose)</p>

Outline (outline)

0 (outline-0)

1px (outline-1px)

2px (outline-2px)

4px (outline-05)
<p class="outline-0">0 (outline-0)</p> <p class="outline-1px">1px (outline-1px)</p> <p class="outline-2px">2px (outline-2px)</p> <p class="outline-05">4px (outline-05)</p>

Outline Color (outline_color)

Transparent (outline-transparent)

Block (outline-black)

White (outline-white)
<p class="outline-transparent outline-1px">Transparent (outline-transparent)</p> <p class="outline-black outline-1px">Block (outline-black)</p> <p class="outline-white outline-1px">White (outline-white)</p>

Measure (measure)

1 (measure-1)

2 (measure-2)

3 (measure-3)

4 (measure-4)

5 (measure-5)

None (measure-none)
<p class="measure-1 bg-primary-lighter padding-1">1 (measure-1)</p> <p class="measure-2 bg-primary-lighter padding-1">2 (measure-2)</p> <p class="measure-3 bg-primary-lighter padding-1">3 (measure-3)</p> <p class="measure-4 bg-primary-lighter padding-1">4 (measure-4)</p> <p class="measure-5 bg-primary-lighter padding-1">5 (measure-5)</p> <p class="measure-none bg-primary-lighter padding-1">None (measure-none)</p>

Text alignment (text_alignment)

Left (text-left)

Center (text-center)

Right (text-right)

Justify (text-justify)
<p class="text-left">Left (text-left)</p> <p class="text-center">Center (text-center)</p> <p class="text-right">Right (text-right)</p> <p class="text-justify">Justify (text-justify)</p>

Text intent (text_indent)

-72 (text-indent-neg-9)

-64 (text-indent-neg-8)

-56 (text-indent-neg-7)

-48 (text-indent-neg-6)

-40 (text-indent-neg-5)

-32 (text-indent-neg-4)

-24 (text-indent-neg-3)

-20 (text-indent-neg-205)

-16 (text-indent-neg-2)

-12 (text-indent-neg-105)

-8 (text-indent-neg-1)

-4 (text-indent-neg-05)

4 (text-indent-05)

8 (text-indent-1)

12 (text-indent-105)

16 (text-indent-2)

20 (text-indent-205)

24 (text-indent-3)

32 (text-indent-4)

40 (text-indent-5)

48 (text-indent-6)

56 (text-indent-7)

64 (text-indent-8)

72 (text-indent-9)
<p class="text-indent-neg-9">-72 (text-indent-neg-9)</p> <p class="text-indent-neg-8">-64 (text-indent-neg-8)</p> <p class="text-indent-neg-7">-56 (text-indent-neg-7)</p> <p class="text-indent-neg-6">-48 (text-indent-neg-6)</p> <p class="text-indent-neg-5">-40 (text-indent-neg-5)</p> <p class="text-indent-neg-4">-32 (text-indent-neg-4)</p> <p class="text-indent-neg-3">-24 (text-indent-neg-3)</p> <p class="text-indent-neg-205">-20 (text-indent-neg-205)</p> <p class="text-indent-neg-2">-16 (text-indent-neg-2)</p> <p class="text-indent-neg-105">-12 (text-indent-neg-105)</p> <p class="text-indent-neg-1">-8 (text-indent-neg-1)</p> <p class="text-indent-neg-05">-4 (text-indent-neg-05)</p> <p class="text-indent-05">4 (text-indent-05)</p> <p class="text-indent-1">8 (text-indent-1)</p> <p class="text-indent-105">12 (text-indent-105)</p> <p class="text-indent-2">16 (text-indent-2)</p> <p class="text-indent-205">20 (text-indent-205)</p> <p class="text-indent-3">24 (text-indent-3)</p> <p class="text-indent-4">32 (text-indent-4)</p> <p class="text-indent-5">40 (text-indent-5)</p> <p class="text-indent-6">48 (text-indent-6)</p> <p class="text-indent-7">56 (text-indent-7)</p> <p class="text-indent-8">64 (text-indent-8)</p> <p class="text-indent-9">72 (text-indent-9)</p>

Height (height)

Set the dimensions of an item.

Auto (height-auto)

Full (100%) (height-full)

Viewport (100vh) (height-viewport)

0 (height-0)

4 (height-05)

8 (height-1)

12 (height-105)

16 (height-2)

20 (height-205)

24 (height-3)

32 (height-4)

40 (height-5)

48 (height-6)

56 (height-7)

64 (height-8)

72 (height-9)

80 (height-10)

160 (height-card)

240 (height-card-lg)

320 (height-mobile)

480 (height-mobile-lg)

640 (height-tablet)

880 (height-tablet-lg)

1024 (height-desktop)

1200 (height-desktop-lg)

1400 (height-widescreen)
<p class="height-auto bg-primary-lighter padding-1">Auto (height-auto)</p> <p class="height-full bg-primary-lighter padding-1">Full (100%) (height-full)</p> <p class="height-viewport bg-primary-lighter padding-1">Viewport (100vh) (height-viewport)</p> <p class="height-0 bg-primary-lighter padding-1">0 (height-0)</p> <p class="height-05 bg-primary-lighter padding-1">4 (height-05)</p> <p class="height-1 bg-primary-lighter padding-1">8 (height-1)</p> <p class="height-105 bg-primary-lighter padding-1">12 (height-105)</p> <p class="height-2 bg-primary-lighter padding-1">16 (height-2)</p> <p class="height-205 bg-primary-lighter padding-1">20 (height-205)</p> <p class="height-3 bg-primary-lighter padding-1">24 (height-3)</p> <p class="height-4 bg-primary-lighter padding-1">32 (height-4)</p> <p class="height-5 bg-primary-lighter padding-1">40 (height-5)</p> <p class="height-6 bg-primary-lighter padding-1">48 (height-6)</p> <p class="height-7 bg-primary-lighter padding-1">56 (height-7)</p> <p class="height-8 bg-primary-lighter padding-1">64 (height-8)</p> <p class="height-9 bg-primary-lighter padding-1">72 (height-9)</p> <p class="height-10 bg-primary-lighter padding-1">80 (height-10)</p> <p class="height-card bg-primary-lighter padding-1">160 (height-card)</p> <p class="height-card-lg bg-primary-lighter padding-1">240 (height-card-lg)</p> <p class="height-mobile bg-primary-lighter padding-1">320 (height-mobile)</p> <p class="height-mobile-lg bg-primary-lighter padding-1">480 (height-mobile-lg)</p> <p class="height-tablet bg-primary-lighter padding-1">640 (height-tablet)</p> <p class="height-tablet-lg bg-primary-lighter padding-1">880 (height-tablet-lg)</p> <p class="height-desktop bg-primary-lighter padding-1">1024 (height-desktop)</p> <p class="height-desktop-lg bg-primary-lighter padding-1">1200 (height-desktop-lg)</p> <p class="height-widescreen bg-primary-lighter padding-1">1400 (height-widescreen)</p>

Width (width)

Set the dimensions of an item.

Auto (width-auto)

Full (100%) (width-full)

Viewport (100vh) (width-viewport)

0 (width-0)

4 (width-05)

8 (width-1)

12 (width-105)

16 (width-2)

20 (width-205)

24 (width-3)

32 (width-4)

40 (width-5)

48 (width-6)

56 (width-7)

64 (width-8)

72 (width-9)

80 (width-10)

160 (width-card)

240 (width-card-lg)

320 (width-mobile)

480 (width-mobile-lg)

640 (width-tablet)

880 (width-tablet-lg)

1024 (width-desktop)

1200 (width-desktop-lg)

1400 (width-widescreen)
<p class="width-auto bg-primary-lighter padding-1 maxw-full">Auto (width-auto)</p> <p class="width-full bg-primary-lighter padding-1 maxw-full">Full (100%) (width-full)</p> <p class="width-viewport bg-primary-lighter padding-1 maxw-full">Viewport (100vh) (width-viewport)</p> <p class="width-0 bg-primary-lighter padding-1 maxw-full">0 (width-0)</p> <p class="width-05 bg-primary-lighter padding-1 maxw-full">4 (width-05)</p> <p class="width-1 bg-primary-lighter padding-1 maxw-full">8 (width-1)</p> <p class="width-105 bg-primary-lighter padding-1 maxw-full">12 (width-105)</p> <p class="width-2 bg-primary-lighter padding-1 maxw-full">16 (width-2)</p> <p class="width-205 bg-primary-lighter padding-1 maxw-full">20 (width-205)</p> <p class="width-3 bg-primary-lighter padding-1 maxw-full">24 (width-3)</p> <p class="width-4 bg-primary-lighter padding-1 maxw-full">32 (width-4)</p> <p class="width-5 bg-primary-lighter padding-1 maxw-full">40 (width-5)</p> <p class="width-6 bg-primary-lighter padding-1 maxw-full">48 (width-6)</p> <p class="width-7 bg-primary-lighter padding-1 maxw-full">56 (width-7)</p> <p class="width-8 bg-primary-lighter padding-1 maxw-full">64 (width-8)</p> <p class="width-9 bg-primary-lighter padding-1 maxw-full">72 (width-9)</p> <p class="width-10 bg-primary-lighter padding-1 maxw-full">80 (width-10)</p> <p class="width-card bg-primary-lighter padding-1 maxw-full">160 (width-card)</p> <p class="width-card-lg bg-primary-lighter padding-1 maxw-full">240 (width-card-lg)</p> <p class="width-mobile bg-primary-lighter padding-1 maxw-full">320 (width-mobile)</p> <p class="width-mobile-lg bg-primary-lighter padding-1 maxw-full">480 (width-mobile-lg)</p> <p class="width-tablet bg-primary-lighter padding-1 maxw-full">640 (width-tablet)</p> <p class="width-tablet-lg bg-primary-lighter padding-1 maxw-full">880 (width-tablet-lg)</p> <p class="width-desktop bg-primary-lighter padding-1 maxw-full">1024 (width-desktop)</p> <p class="width-desktop-lg bg-primary-lighter padding-1 maxw-full">1200 (width-desktop-lg)</p> <p class="width-widescreen bg-primary-lighter padding-1 maxw-full">1400 (width-widescreen)</p>

Max height (max_height)

Set the dimensions of an item.

Auto (maxh-auto)

Full (100%) (maxh-full)

Viewport (100vh) (maxh-viewport)

None (maxh-none)

0 (maxh-0)

4 (maxh-05)

8 (maxh-1)

12 (maxh-105)

16 (maxh-2)

20 (maxh-205)

24 (maxh-3)

32 (maxh-4)

40 (maxh-5)

48 (maxh-6)

56 (maxh-7)

64 (maxh-8)

72 (maxh-9)

80 (maxh-10)

160 (maxh-card)

240 (maxh-card-lg)

320 (maxh-mobile)

480 (maxh-mobile-lg)

640 (maxh-tablet)

880 (maxh-tablet-lg)

1024 (maxh-desktop)

1200 (maxh-desktop-lg)

1400 (maxh-widescreen)
<p class="maxh-auto">Auto (maxh-auto)</p> <p class="maxh-full">Full (100%) (maxh-full)</p> <p class="maxh-viewport">Viewport (100vh) (maxh-viewport)</p> <p class="maxh-none">None (maxh-none)</p> <p class="maxh-0">0 (maxh-0)</p> <p class="maxh-05">4 (maxh-05)</p> <p class="maxh-1">8 (maxh-1)</p> <p class="maxh-105">12 (maxh-105)</p> <p class="maxh-2">16 (maxh-2)</p> <p class="maxh-205">20 (maxh-205)</p> <p class="maxh-3">24 (maxh-3)</p> <p class="maxh-4">32 (maxh-4)</p> <p class="maxh-5">40 (maxh-5)</p> <p class="maxh-6">48 (maxh-6)</p> <p class="maxh-7">56 (maxh-7)</p> <p class="maxh-8">64 (maxh-8)</p> <p class="maxh-9">72 (maxh-9)</p> <p class="maxh-10">80 (maxh-10)</p> <p class="maxh-card">160 (maxh-card)</p> <p class="maxh-card-lg">240 (maxh-card-lg)</p> <p class="maxh-mobile">320 (maxh-mobile)</p> <p class="maxh-mobile-lg">480 (maxh-mobile-lg)</p> <p class="maxh-tablet">640 (maxh-tablet)</p> <p class="maxh-tablet-lg">880 (maxh-tablet-lg)</p> <p class="maxh-desktop">1024 (maxh-desktop)</p> <p class="maxh-desktop-lg">1200 (maxh-desktop-lg)</p> <p class="maxh-widescreen">1400 (maxh-widescreen)</p>

Max Width (max_width)

Set the dimensions of an item.

Auto (maxw-auto)

Full (100%) (maxw-full)

Viewport (100vh) (maxw-viewport)

None (maxw-none)

0 (maxw-0)

4 (maxw-05)

8 (maxw-1)

12 (maxw-105)

16 (maxw-2)

20 (maxw-205)

24 (maxw-3)

32 (maxw-4)

40 (maxw-5)

48 (maxw-6)

56 (maxw-7)

64 (maxw-8)

72 (maxw-9)

80 (maxw-10)

160 (maxw-card)

240 (maxw-card-lg)

320 (maxw-mobile)

480 (maxw-mobile-lg)

640 (maxw-tablet)

880 (maxw-tablet-lg)

1024 (maxw-desktop)

1200 (maxw-desktop-lg)

1400 (maxw-widescreen)
<p class="maxw-auto">Auto (maxw-auto)</p> <p class="maxw-full">Full (100%) (maxw-full)</p> <p class="maxw-viewport">Viewport (100vh) (maxw-viewport)</p> <p class="maxw-none">None (maxw-none)</p> <p class="maxw-0">0 (maxw-0)</p> <p class="maxw-05">4 (maxw-05)</p> <p class="maxw-1">8 (maxw-1)</p> <p class="maxw-105">12 (maxw-105)</p> <p class="maxw-2">16 (maxw-2)</p> <p class="maxw-205">20 (maxw-205)</p> <p class="maxw-3">24 (maxw-3)</p> <p class="maxw-4">32 (maxw-4)</p> <p class="maxw-5">40 (maxw-5)</p> <p class="maxw-6">48 (maxw-6)</p> <p class="maxw-7">56 (maxw-7)</p> <p class="maxw-8">64 (maxw-8)</p> <p class="maxw-9">72 (maxw-9)</p> <p class="maxw-10">80 (maxw-10)</p> <p class="maxw-card">160 (maxw-card)</p> <p class="maxw-card-lg">240 (maxw-card-lg)</p> <p class="maxw-mobile">320 (maxw-mobile)</p> <p class="maxw-mobile-lg">480 (maxw-mobile-lg)</p> <p class="maxw-tablet">640 (maxw-tablet)</p> <p class="maxw-tablet-lg">880 (maxw-tablet-lg)</p> <p class="maxw-desktop">1024 (maxw-desktop)</p> <p class="maxw-desktop-lg">1200 (maxw-desktop-lg)</p> <p class="maxw-widescreen">1400 (maxw-widescreen)</p>

Min height (min_height)

Set the dimensions of an item.

Auto (minh-auto)

Full (100%) (minh-full)

Viewport (100vh) (minh-viewport)

None (min-none)

0 (minh-0)

4 (minh-05)

8 (minh-1)

12 (minh-105)

16 (minh-2)

20 (minh-205)

24 (minh-3)

32 (minh-4)

40 (minh-5)

48 (minh-6)

56 (minh-7)

64 (minh-8)

72 (minh-9)

80 (minh-10)

160 (minh-card)

240 (minh-card-lg)

320 (minh-mobile)

480 (minh-mobile-lg)

640 (minh-tablet)

880 (minh-tablet-lg)

1024 (minh-desktop)

1200 (minh-desktop-lg)

1400 (minh-widescreen)
<p class="minh-auto">Auto (minh-auto)</p> <p class="minh-full">Full (100%) (minh-full)</p> <p class="minh-viewport">Viewport (100vh) (minh-viewport)</p> <p class="min-none">None (min-none)</p> <p class="minh-0">0 (minh-0)</p> <p class="minh-05">4 (minh-05)</p> <p class="minh-1">8 (minh-1)</p> <p class="minh-105">12 (minh-105)</p> <p class="minh-2">16 (minh-2)</p> <p class="minh-205">20 (minh-205)</p> <p class="minh-3">24 (minh-3)</p> <p class="minh-4">32 (minh-4)</p> <p class="minh-5">40 (minh-5)</p> <p class="minh-6">48 (minh-6)</p> <p class="minh-7">56 (minh-7)</p> <p class="minh-8">64 (minh-8)</p> <p class="minh-9">72 (minh-9)</p> <p class="minh-10">80 (minh-10)</p> <p class="minh-card">160 (minh-card)</p> <p class="minh-card-lg">240 (minh-card-lg)</p> <p class="minh-mobile">320 (minh-mobile)</p> <p class="minh-mobile-lg">480 (minh-mobile-lg)</p> <p class="minh-tablet">640 (minh-tablet)</p> <p class="minh-tablet-lg">880 (minh-tablet-lg)</p> <p class="minh-desktop">1024 (minh-desktop)</p> <p class="minh-desktop-lg">1200 (minh-desktop-lg)</p> <p class="minh-widescreen">1400 (minh-widescreen)</p>

Min width (min_width)

Set the dimensions of an item.

Auto (minw-auto)

Full (100%) (minw-full)

Viewport (100vh) (minw-viewport)

None (min-none)

0 (minw-0)

4 (minw-05)

8 (minw-1)

12 (minw-105)

16 (minw-2)

20 (minw-205)

24 (minw-3)

32 (minw-4)

40 (minw-5)

48 (minw-6)

56 (minw-7)

64 (minw-8)

72 (minw-9)

80 (minw-10)

160 (minw-card)

240 (minw-card-lg)

320 (minw-mobile)

480 (minw-mobile-lg)

640 (minw-tablet)

880 (minw-tablet-lg)

1024 (minw-desktop)

1200 (minw-desktop-lg)

1400 (minw-widescreen)
<p class="minw-auto">Auto (minw-auto)</p> <p class="minw-full">Full (100%) (minw-full)</p> <p class="minw-viewport">Viewport (100vh) (minw-viewport)</p> <p class="min-none">None (min-none)</p> <p class="minw-0">0 (minw-0)</p> <p class="minw-05">4 (minw-05)</p> <p class="minw-1">8 (minw-1)</p> <p class="minw-105">12 (minw-105)</p> <p class="minw-2">16 (minw-2)</p> <p class="minw-205">20 (minw-205)</p> <p class="minw-3">24 (minw-3)</p> <p class="minw-4">32 (minw-4)</p> <p class="minw-5">40 (minw-5)</p> <p class="minw-6">48 (minw-6)</p> <p class="minw-7">56 (minw-7)</p> <p class="minw-8">64 (minw-8)</p> <p class="minw-9">72 (minw-9)</p> <p class="minw-10">80 (minw-10)</p> <p class="minw-card">160 (minw-card)</p> <p class="minw-card-lg">240 (minw-card-lg)</p> <p class="minw-mobile">320 (minw-mobile)</p> <p class="minw-mobile-lg">480 (minw-mobile-lg)</p> <p class="minw-tablet">640 (minw-tablet)</p> <p class="minw-tablet-lg">880 (minw-tablet-lg)</p> <p class="minw-desktop">1024 (minw-desktop)</p> <p class="minw-desktop-lg">1200 (minw-desktop-lg)</p> <p class="minw-widescreen">1400 (minw-widescreen)</p>

Aspect Ratio (aspect_ratio)

Set the dimensions of an item.

1x1 (add-aspect-1x1)

2x1 (add-aspect-2x1)

9x16 (add-aspect-9x16)

16x9 (add-aspect-16x9)

4x3 (add-aspect-4x3)

3x4 (add-aspect-3x4)
<p class="add-aspect-1x1 bg-primary-lighter padding-1 maxw-tablet">1x1 (add-aspect-1x1)</p> <p class="add-aspect-2x1 bg-primary-lighter padding-1 maxw-tablet">2x1 (add-aspect-2x1)</p> <p class="add-aspect-9x16 bg-primary-lighter padding-1 maxw-tablet">9x16 (add-aspect-9x16)</p> <p class="add-aspect-16x9 bg-primary-lighter padding-1 maxw-tablet">16x9 (add-aspect-16x9)</p> <p class="add-aspect-4x3 bg-primary-lighter padding-1 maxw-tablet">4x3 (add-aspect-4x3)</p> <p class="add-aspect-3x4 bg-primary-lighter padding-1 maxw-tablet">3x4 (add-aspect-3x4)</p>

Circle (circle)

Set the dimensions of an item.

0 (circle-0)

4 (circle-05)

8 (circle-1)

12 (circle-105)

16 (circle-2)

20 (circle-205)

24 (circle-3)

32 (circle-4)

40 (circle-5)

48 (circle-6)

56 (circle-7)

64 (circle-8)

72 (circle-9)

80 (circle-10)

160 (circle-card)

240 (circle-card-lg)

320 (circle-mobile)
<p class="circle-0 bg-primary-lighter padding-1">0 (circle-0)</p> <p class="circle-05 bg-primary-lighter padding-1">4 (circle-05)</p> <p class="circle-1 bg-primary-lighter padding-1">8 (circle-1)</p> <p class="circle-105 bg-primary-lighter padding-1">12 (circle-105)</p> <p class="circle-2 bg-primary-lighter padding-1">16 (circle-2)</p> <p class="circle-205 bg-primary-lighter padding-1">20 (circle-205)</p> <p class="circle-3 bg-primary-lighter padding-1">24 (circle-3)</p> <p class="circle-4 bg-primary-lighter padding-1">32 (circle-4)</p> <p class="circle-5 bg-primary-lighter padding-1">40 (circle-5)</p> <p class="circle-6 bg-primary-lighter padding-1">48 (circle-6)</p> <p class="circle-7 bg-primary-lighter padding-1">56 (circle-7)</p> <p class="circle-8 bg-primary-lighter padding-1">64 (circle-8)</p> <p class="circle-9 bg-primary-lighter padding-1">72 (circle-9)</p> <p class="circle-10 bg-primary-lighter padding-1">80 (circle-10)</p> <p class="circle-card bg-primary-lighter padding-1">160 (circle-card)</p> <p class="circle-card-lg bg-primary-lighter padding-1">240 (circle-card-lg)</p> <p class="circle-mobile bg-primary-lighter padding-1">320 (circle-mobile)</p>

Square (square)

Set the dimensions of an item.

0 (square-0)

4 (square-05)

8 (square-1)

12 (square-105)

16 (square-2)

20 (square-205)

24 (square-3)

32 (square-4)

40 (square-5)

48 (square-6)

56 (square-7)

64 (square-8)

72 (square-9)

80 (square-10)

160 (square-card)

240 (square-card-lg)

320 (square-mobile)
<p class="square-0 bg-primary-lighter padding-1">0 (square-0)</p> <p class="square-05 bg-primary-lighter padding-1">4 (square-05)</p> <p class="square-1 bg-primary-lighter padding-1">8 (square-1)</p> <p class="square-105 bg-primary-lighter padding-1">12 (square-105)</p> <p class="square-2 bg-primary-lighter padding-1">16 (square-2)</p> <p class="square-205 bg-primary-lighter padding-1">20 (square-205)</p> <p class="square-3 bg-primary-lighter padding-1">24 (square-3)</p> <p class="square-4 bg-primary-lighter padding-1">32 (square-4)</p> <p class="square-5 bg-primary-lighter padding-1">40 (square-5)</p> <p class="square-6 bg-primary-lighter padding-1">48 (square-6)</p> <p class="square-7 bg-primary-lighter padding-1">56 (square-7)</p> <p class="square-8 bg-primary-lighter padding-1">64 (square-8)</p> <p class="square-9 bg-primary-lighter padding-1">72 (square-9)</p> <p class="square-10 bg-primary-lighter padding-1">80 (square-10)</p> <p class="square-card bg-primary-lighter padding-1">160 (square-card)</p> <p class="square-card-lg bg-primary-lighter padding-1">240 (square-card-lg)</p> <p class="square-mobile bg-primary-lighter padding-1">320 (square-mobile)</p>

Margin top (margin_top)

0 (margin-top-0)

1 (margin-top-1)

2 (margin-top-2)

3 (margin-top-3)

4 (margin-top-4)

5 (margin-top-5)

6 (margin-top-6)

7 (margin-top-7)

8 (margin-top-8)

9 (margin-top-9)

10 (margin-top-10)

15 (margin-top-15)
<p class="margin-top-0 bg-primary-lighter padding-1">0 (margin-top-0)</p> <p class="margin-top-1 bg-primary-lighter padding-1">1 (margin-top-1)</p> <p class="margin-top-2 bg-primary-lighter padding-1">2 (margin-top-2)</p> <p class="margin-top-3 bg-primary-lighter padding-1">3 (margin-top-3)</p> <p class="margin-top-4 bg-primary-lighter padding-1">4 (margin-top-4)</p> <p class="margin-top-5 bg-primary-lighter padding-1">5 (margin-top-5)</p> <p class="margin-top-6 bg-primary-lighter padding-1">6 (margin-top-6)</p> <p class="margin-top-7 bg-primary-lighter padding-1">7 (margin-top-7)</p> <p class="margin-top-8 bg-primary-lighter padding-1">8 (margin-top-8)</p> <p class="margin-top-9 bg-primary-lighter padding-1">9 (margin-top-9)</p> <p class="margin-top-10 bg-primary-lighter padding-1">10 (margin-top-10)</p> <p class="margin-top-15 bg-primary-lighter padding-1">15 (margin-top-15)</p>

Margin right (margin_right)

0 (margin-right-0)

1 (margin-right-1)

2 (margin-right-2)

3 (margin-right-3)

4 (margin-right-4)

5 (margin-right-5)

6 (margin-right-6)

7 (margin-right-7)

8 (margin-right-8)

9 (margin-right-9)

10 (margin-right-10)

15 (margin-right-15)
<p class="margin-right-0 bg-primary-lighter padding-1">0 (margin-right-0)</p> <p class="margin-right-1 bg-primary-lighter padding-1">1 (margin-right-1)</p> <p class="margin-right-2 bg-primary-lighter padding-1">2 (margin-right-2)</p> <p class="margin-right-3 bg-primary-lighter padding-1">3 (margin-right-3)</p> <p class="margin-right-4 bg-primary-lighter padding-1">4 (margin-right-4)</p> <p class="margin-right-5 bg-primary-lighter padding-1">5 (margin-right-5)</p> <p class="margin-right-6 bg-primary-lighter padding-1">6 (margin-right-6)</p> <p class="margin-right-7 bg-primary-lighter padding-1">7 (margin-right-7)</p> <p class="margin-right-8 bg-primary-lighter padding-1">8 (margin-right-8)</p> <p class="margin-right-9 bg-primary-lighter padding-1">9 (margin-right-9)</p> <p class="margin-right-10 bg-primary-lighter padding-1">10 (margin-right-10)</p> <p class="margin-right-15 bg-primary-lighter padding-1">15 (margin-right-15)</p>

Margin bottom (margin_bottom)

0 (margin-bottom-0)

1 (margin-bottom-1)

2 (margin-bottom-2)

3 (margin-bottom-3)

4 (margin-bottom-4)

5 (margin-bottom-5)

6 (margin-bottom-6)

7 (margin-bottom-7)

8 (margin-bottom-8)

9 (margin-bottom-9)

10 (margin-bottom-10)

15 (margin-bottom-15)
<p class="margin-bottom-0 bg-primary-lighter padding-1">0 (margin-bottom-0)</p> <p class="margin-bottom-1 bg-primary-lighter padding-1">1 (margin-bottom-1)</p> <p class="margin-bottom-2 bg-primary-lighter padding-1">2 (margin-bottom-2)</p> <p class="margin-bottom-3 bg-primary-lighter padding-1">3 (margin-bottom-3)</p> <p class="margin-bottom-4 bg-primary-lighter padding-1">4 (margin-bottom-4)</p> <p class="margin-bottom-5 bg-primary-lighter padding-1">5 (margin-bottom-5)</p> <p class="margin-bottom-6 bg-primary-lighter padding-1">6 (margin-bottom-6)</p> <p class="margin-bottom-7 bg-primary-lighter padding-1">7 (margin-bottom-7)</p> <p class="margin-bottom-8 bg-primary-lighter padding-1">8 (margin-bottom-8)</p> <p class="margin-bottom-9 bg-primary-lighter padding-1">9 (margin-bottom-9)</p> <p class="margin-bottom-10 bg-primary-lighter padding-1">10 (margin-bottom-10)</p> <p class="margin-bottom-15 bg-primary-lighter padding-1">15 (margin-bottom-15)</p>

Margin left (margin_left)

0 (margin-left-0)

1 (margin-left-1)

2 (margin-left-2)

3 (margin-left-3)

4 (margin-left-4)

5 (margin-left-5)

6 (margin-left-6)

7 (margin-left-7)

8 (margin-left-8)

9 (margin-left-9)

10 (margin-left-10)

15 (margin-left-15)
<p class="margin-left-0 bg-primary-lighter padding-1">0 (margin-left-0)</p> <p class="margin-left-1 bg-primary-lighter padding-1">1 (margin-left-1)</p> <p class="margin-left-2 bg-primary-lighter padding-1">2 (margin-left-2)</p> <p class="margin-left-3 bg-primary-lighter padding-1">3 (margin-left-3)</p> <p class="margin-left-4 bg-primary-lighter padding-1">4 (margin-left-4)</p> <p class="margin-left-5 bg-primary-lighter padding-1">5 (margin-left-5)</p> <p class="margin-left-6 bg-primary-lighter padding-1">6 (margin-left-6)</p> <p class="margin-left-7 bg-primary-lighter padding-1">7 (margin-left-7)</p> <p class="margin-left-8 bg-primary-lighter padding-1">8 (margin-left-8)</p> <p class="margin-left-9 bg-primary-lighter padding-1">9 (margin-left-9)</p> <p class="margin-left-10 bg-primary-lighter padding-1">10 (margin-left-10)</p> <p class="margin-left-15 bg-primary-lighter padding-1">15 (margin-left-15)</p>

Padding top (padding_top)

0 (padding-top-0)

1 (padding-top-1)

2 (padding-top-2)

3 (padding-top-3)

4 (padding-top-4)

5 (padding-top-5)

6 (padding-top-6)

7 (padding-top-7)

8 (padding-top-8)

9 (padding-top-9)

10 (padding-top-10)

15 (padding-top-15)
<p class="padding-top-0 bg-primary-lighter padding-1">0 (padding-top-0)</p> <p class="padding-top-1 bg-primary-lighter padding-1">1 (padding-top-1)</p> <p class="padding-top-2 bg-primary-lighter padding-1">2 (padding-top-2)</p> <p class="padding-top-3 bg-primary-lighter padding-1">3 (padding-top-3)</p> <p class="padding-top-4 bg-primary-lighter padding-1">4 (padding-top-4)</p> <p class="padding-top-5 bg-primary-lighter padding-1">5 (padding-top-5)</p> <p class="padding-top-6 bg-primary-lighter padding-1">6 (padding-top-6)</p> <p class="padding-top-7 bg-primary-lighter padding-1">7 (padding-top-7)</p> <p class="padding-top-8 bg-primary-lighter padding-1">8 (padding-top-8)</p> <p class="padding-top-9 bg-primary-lighter padding-1">9 (padding-top-9)</p> <p class="padding-top-10 bg-primary-lighter padding-1">10 (padding-top-10)</p> <p class="padding-top-15 bg-primary-lighter padding-1">15 (padding-top-15)</p>

Padding right (padding_right)

0 (padding-right-0)

1 (padding-right-1)

2 (padding-right-2)

3 (padding-right-3)

4 (padding-right-4)

5 (padding-right-5)

6 (padding-right-6)

7 (padding-right-7)

8 (padding-right-8)

9 (padding-right-9)

10 (padding-right-10)

15 (padding-right-15)
<p class="padding-right-0 bg-primary-lighter padding-1 text-right">0 (padding-right-0)</p> <p class="padding-right-1 bg-primary-lighter padding-1 text-right">1 (padding-right-1)</p> <p class="padding-right-2 bg-primary-lighter padding-1 text-right">2 (padding-right-2)</p> <p class="padding-right-3 bg-primary-lighter padding-1 text-right">3 (padding-right-3)</p> <p class="padding-right-4 bg-primary-lighter padding-1 text-right">4 (padding-right-4)</p> <p class="padding-right-5 bg-primary-lighter padding-1 text-right">5 (padding-right-5)</p> <p class="padding-right-6 bg-primary-lighter padding-1 text-right">6 (padding-right-6)</p> <p class="padding-right-7 bg-primary-lighter padding-1 text-right">7 (padding-right-7)</p> <p class="padding-right-8 bg-primary-lighter padding-1 text-right">8 (padding-right-8)</p> <p class="padding-right-9 bg-primary-lighter padding-1 text-right">9 (padding-right-9)</p> <p class="padding-right-10 bg-primary-lighter padding-1 text-right">10 (padding-right-10)</p> <p class="padding-right-15 bg-primary-lighter padding-1 text-right">15 (padding-right-15)</p>

Padding bottom (padding_bottom)

0 (padding-bottom-0)

1 (padding-bottom-1)

2 (padding-bottom-2)

3 (padding-bottom-3)

4 (padding-bottom-4)

5 (padding-bottom-5)

6 (padding-bottom-6)

7 (padding-bottom-7)

8 (padding-bottom-8)

9 (padding-bottom-9)

10 (padding-bottom-10)

15 (padding-bottom-15)
<p class="padding-bottom-0 bg-primary-lighter padding-1">0 (padding-bottom-0)</p> <p class="padding-bottom-1 bg-primary-lighter padding-1">1 (padding-bottom-1)</p> <p class="padding-bottom-2 bg-primary-lighter padding-1">2 (padding-bottom-2)</p> <p class="padding-bottom-3 bg-primary-lighter padding-1">3 (padding-bottom-3)</p> <p class="padding-bottom-4 bg-primary-lighter padding-1">4 (padding-bottom-4)</p> <p class="padding-bottom-5 bg-primary-lighter padding-1">5 (padding-bottom-5)</p> <p class="padding-bottom-6 bg-primary-lighter padding-1">6 (padding-bottom-6)</p> <p class="padding-bottom-7 bg-primary-lighter padding-1">7 (padding-bottom-7)</p> <p class="padding-bottom-8 bg-primary-lighter padding-1">8 (padding-bottom-8)</p> <p class="padding-bottom-9 bg-primary-lighter padding-1">9 (padding-bottom-9)</p> <p class="padding-bottom-10 bg-primary-lighter padding-1">10 (padding-bottom-10)</p> <p class="padding-bottom-15 bg-primary-lighter padding-1">15 (padding-bottom-15)</p>

Padding left (padding_left)

0 (padding-left-0)

1 (padding-left-1)

2 (padding-left-2)

3 (padding-left-3)

4 (padding-left-4)

5 (padding-left-5)

6 (padding-left-6)

7 (padding-left-7)

8 (padding-left-8)

9 (padding-left-9)

10 (padding-left-10)

15 (padding-left-15)
<p class="padding-left-0 bg-primary-lighter padding-1">0 (padding-left-0)</p> <p class="padding-left-1 bg-primary-lighter padding-1">1 (padding-left-1)</p> <p class="padding-left-2 bg-primary-lighter padding-1">2 (padding-left-2)</p> <p class="padding-left-3 bg-primary-lighter padding-1">3 (padding-left-3)</p> <p class="padding-left-4 bg-primary-lighter padding-1">4 (padding-left-4)</p> <p class="padding-left-5 bg-primary-lighter padding-1">5 (padding-left-5)</p> <p class="padding-left-6 bg-primary-lighter padding-1">6 (padding-left-6)</p> <p class="padding-left-7 bg-primary-lighter padding-1">7 (padding-left-7)</p> <p class="padding-left-8 bg-primary-lighter padding-1">8 (padding-left-8)</p> <p class="padding-left-9 bg-primary-lighter padding-1">9 (padding-left-9)</p> <p class="padding-left-10 bg-primary-lighter padding-1">10 (padding-left-10)</p> <p class="padding-left-15 bg-primary-lighter padding-1">15 (padding-left-15)</p>

Font style (font_style)

Italic (text-italic)

No italic (text-no-italic)
<p class="text-italic">Italic (text-italic)</p> <p class="text-no-italic">No italic (text-no-italic)</p>

Font weight (font_weight)

Thin (text-thin)

Light (text-light)

Normal (text-normal)

Semibold (text-semibold)

Bold (text-bold)

Heavy (text-heavy)
<p class="text-thin">Thin (text-thin)</p> <p class="text-light">Light (text-light)</p> <p class="text-normal">Normal (text-normal)</p> <p class="text-semibold">Semibold (text-semibold)</p> <p class="text-bold">Bold (text-bold)</p> <p class="text-heavy">Heavy (text-heavy)</p>

Letterspacing (letter_spacing)

-3 (text-ls-neg-3)

-2 (text-ls-neg-2)

-1 (text-ls-neg-1)

Auto (text-ls-auto)

1 (text-ls-1)

2 (text-ls-2)

3 (text-ls-3)
<p class="text-ls-neg-3">-3 (text-ls-neg-3)</p> <p class="text-ls-neg-2">-2 (text-ls-neg-2)</p> <p class="text-ls-neg-1">-1 (text-ls-neg-1)</p> <p class="text-ls-auto">Auto (text-ls-auto)</p> <p class="text-ls-1">1 (text-ls-1)</p> <p class="text-ls-2">2 (text-ls-2)</p> <p class="text-ls-3">3 (text-ls-3)</p>

Text underline (text_underline)

Underline (text-underline)

No underline (text-no-underline)
<p class="text-underline">Underline (text-underline)</p> <p class="text-no-underline">No underline (text-no-underline)</p>

Text strike (text_strike)

Strike (text-strike)

No strike (text-no-strike)
<p class="text-strike">Strike (text-strike)</p> <p class="text-no-strike">No strike (text-no-strike)</p>

Text Decoration Color (text_decoration_color)

Base lightest (underline-base-lightest)

Base lighter (underline-base-lighter)

Base light (underline-base-light)

Base (underline-base)

Base dark (underline-base-dark)

Base darker (underline-base-darker)

Base darkest (underline-base-darkest)

Ink (underline-ink)

Primary lighter (underline-primary-lighter)

Primary light (underline-primary-light)

Primary (underline-primary)

Primary vivid (underline-primary-vivid)

Primary dark (underline-primary-dark)

Primary darker (underline-primary-darker)

Lighter (underline-secondary-lighter)

Light (underline-secondary-light)

Secondary (underline-secondary)

Secondary vivid (underline-secondary-vivid)

Secondary dark (underline-secondary-dark)

Secondary darker (underline-secondary-darker)

Cool lighter (underline-accent-cool-lighter)

Cool light (underline-accent-cool-light)

Cool (underline-accent-cool)

Cool dark (underline-accent-cool-dark)

Cool darker (underline-accent-cool-darker)

Warm lighter (underline-accent-warm-lighter)

Warm light (underline-accent-warm-light)

Warm (underline-accent-warm)

Warm dark (underline-accent-warm-dark)

Warm darkest (underline-accent-warm-darker)

Emergency (underline-emergency)

Emergency dark (underline-emergency-dark)

White (underline-white)

Gray 5 (underline-gray-5)

Gray 10 (underline-gray-10)

Gray 30 (underline-gray-30)

Gray 50 (underline-gray-50)

Gray 70 (underline-gray-70)

Grau 90 (underline-gray-90)

Black (underline-black)

Red (underline-red)

Orange (underline-orange)

Gold (underline-gold)

Yellow (underline-yellow)

Green (underline-green)

Mint (underline-mint)

Cyan (underline-cyan)

Blue (underline-blue)

Indigo (underline-indigo)

Violet (underline-violet)

Magenta (underline-magenta)
<p class="underline-base-lightest text-underline">Base lightest (underline-base-lightest)</p> <p class="underline-base-lighter text-underline">Base lighter (underline-base-lighter)</p> <p class="underline-base-light text-underline">Base light (underline-base-light)</p> <p class="underline-base text-underline">Base (underline-base)</p> <p class="underline-base-dark text-underline">Base dark (underline-base-dark)</p> <p class="underline-base-darker text-underline">Base darker (underline-base-darker)</p> <p class="underline-base-darkest text-underline">Base darkest (underline-base-darkest)</p> <p class="underline-ink text-underline">Ink (underline-ink)</p> <p class="underline-primary-lighter text-underline">Primary lighter (underline-primary-lighter)</p> <p class="underline-primary-light text-underline">Primary light (underline-primary-light)</p> <p class="underline-primary text-underline">Primary (underline-primary)</p> <p class="underline-primary-vivid text-underline">Primary vivid (underline-primary-vivid)</p> <p class="underline-primary-dark text-underline">Primary dark (underline-primary-dark)</p> <p class="underline-primary-darker text-underline">Primary darker (underline-primary-darker)</p> <p class="underline-secondary-lighter text-underline">Lighter (underline-secondary-lighter)</p> <p class="underline-secondary-light text-underline">Light (underline-secondary-light)</p> <p class="underline-secondary text-underline">Secondary (underline-secondary)</p> <p class="underline-secondary-vivid text-underline">Secondary vivid (underline-secondary-vivid)</p> <p class="underline-secondary-dark text-underline">Secondary dark (underline-secondary-dark)</p> <p class="underline-secondary-darker text-underline">Secondary darker (underline-secondary-darker)</p> <p class="underline-accent-cool-lighter text-underline">Cool lighter (underline-accent-cool-lighter)</p> <p class="underline-accent-cool-light text-underline">Cool light (underline-accent-cool-light)</p> <p class="underline-accent-cool text-underline">Cool (underline-accent-cool)</p> <p class="underline-accent-cool-dark text-underline">Cool dark (underline-accent-cool-dark)</p> <p class="underline-accent-cool-darker text-underline">Cool darker (underline-accent-cool-darker)</p> <p class="underline-accent-warm-lighter text-underline">Warm lighter (underline-accent-warm-lighter)</p> <p class="underline-accent-warm-light text-underline">Warm light (underline-accent-warm-light)</p> <p class="underline-accent-warm text-underline">Warm (underline-accent-warm)</p> <p class="underline-accent-warm-dark text-underline">Warm dark (underline-accent-warm-dark)</p> <p class="underline-accent-warm-darker text-underline">Warm darkest (underline-accent-warm-darker)</p> <p class="underline-emergency text-underline">Emergency (underline-emergency)</p> <p class="underline-emergency-dark text-underline">Emergency dark (underline-emergency-dark)</p> <p class="underline-white text-underline">White (underline-white)</p> <p class="underline-gray-5 text-underline">Gray 5 (underline-gray-5)</p> <p class="underline-gray-10 text-underline">Gray 10 (underline-gray-10)</p> <p class="underline-gray-30 text-underline">Gray 30 (underline-gray-30)</p> <p class="underline-gray-50 text-underline">Gray 50 (underline-gray-50)</p> <p class="underline-gray-70 text-underline">Gray 70 (underline-gray-70)</p> <p class="underline-gray-90 text-underline">Grau 90 (underline-gray-90)</p> <p class="underline-black text-underline">Black (underline-black)</p> <p class="underline-red text-underline">Red (underline-red)</p> <p class="underline-orange text-underline">Orange (underline-orange)</p> <p class="underline-gold text-underline">Gold (underline-gold)</p> <p class="underline-yellow text-underline">Yellow (underline-yellow)</p> <p class="underline-green text-underline">Green (underline-green)</p> <p class="underline-mint text-underline">Mint (underline-mint)</p> <p class="underline-cyan text-underline">Cyan (underline-cyan)</p> <p class="underline-blue text-underline">Blue (underline-blue)</p> <p class="underline-indigo text-underline">Indigo (underline-indigo)</p> <p class="underline-violet text-underline">Violet (underline-violet)</p> <p class="underline-magenta text-underline">Magenta (underline-magenta)</p>

Text transform (text_transform)

Uppercase (text-uppercase)

Lowercase (text-lowercase)

No uppercase (text-no-uppercase)

No lowercase (text-no-lowercase)
<p class="text-uppercase">Uppercase (text-uppercase)</p> <p class="text-lowercase">Lowercase (text-lowercase)</p> <p class="text-no-uppercase">No uppercase (text-no-uppercase)</p> <p class="text-no-lowercase">No lowercase (text-no-lowercase)</p>

Vertical Alignment (vertical_alignment)

Baseline (text-baseline)

Bottom (text-bottom)

Middle (text-middle)

Sub (text-sub)

Super (text-super)

tBottom (text-tbottom)

tTop (text-ttop)

Top (text-top)
<p class="text-baseline bg-red width-4">Baseline (text-baseline)</p> <p class="text-bottom bg-red width-4">Bottom (text-bottom)</p> <p class="text-middle bg-red width-4">Middle (text-middle)</p> <p class="text-sub bg-red width-4">Sub (text-sub)</p> <p class="text-super bg-red width-4">Super (text-super)</p> <p class="text-tbottom bg-red width-4">tBottom (text-tbottom)</p> <p class="text-ttop bg-red width-4">tTop (text-ttop)</p> <p class="text-top bg-red width-4">Top (text-top)</p>

Whitespace formatting (whitespace)

Pre (text-pre)

Pre-line (text-pre-line)

Pre-wrap (text-pre-wrap)

Wrap (text-wrap)

No wrap (text-no-wrap)
<p class="text-pre">Pre (text-pre)</p> <p class="text-pre-line">Pre-line (text-pre-line)</p> <p class="text-pre-wrap">Pre-wrap (text-pre-wrap)</p> <p class="text-wrap">Wrap (text-wrap)</p> <p class="text-no-wrap">No wrap (text-no-wrap)</p>