Home Get StartedTokensDocsComponents

Docs

Using utility classes to build custom designs without writing CSS.

Utility Classes Quick Reference

Backgrounds

Background Color

Base-stypes

Reboot

Borders

Border Color
Border Opacity
Border Radius
Border Side
Border Style
Border Width
Vertical Line

Effects

Box Shadow
Opacity

Flexbox

Align Content
Align Items
Align Self
CSS Grid
Flex
Flex Direction
Flex Grow
Flex Shrink
Flex Wrap
Gap
Justify Content
Order

Grid-system

Breakpoints
Columns
Containers
Grid
Gutters

Icon

Icon Colornew

Interactivity

Pointer Events
User Select

Layout

Aspect Ratio
Clearnew
Clearfix
Display
Floats
Hidden
Overflow
Position
Stacks
Visibility
Z-Index

Sizing

Height
Max-Widthnew
Min-Widthnew
Width

Spacing

Spacing

Space Between

Transforms

Rotatenew
Scalenew
Skewnew
Transform Originnew
Translatenew

Transitions-animation

Animationnew
Transition Delaynew
Transition Durationnew
Transition Propertynew
Transition Timing Functionnew

Typography

Contentnew
Font Family
Font Size
Font Style
Font Weight
Letter Spacingnew
Line Height
Text Align
Text Color
Text Decoration
Text Decoration Colornew
Text Decoration Stylenew
Text Decoration Thicknessnew
Text Overflow
Text Transform
Text Underline Offsetnew
Vertical Align
Whitespace
Word Break