For faster mobile-friendly and responsive development, Design system includes dozens of utility classes for showing, hiding, aligning, and spacing content.

Display

• display-flex
• display-block
• display-inline
• display-inline-flex
• display-inline-block
• display-none
• display-tablet-flex
• display-tablet-block
• display-tablet-inline
• display-tablet-inline-flex
• display-tablet-inline-block
• display-tablet-none
• display-desktop-flex
• display-desktop-block
• display-desktop-inline
• display-desktop-inline-flex
• display-desktop-inline-block
• display-desktop-none

Margin & padding

includes all spaces tokens and left, right, top, bottom, y, x directions and breakpoints mobile, tablet and desktop (example mr-100, px-200, mx-tablet-300 etc.)

Text Alignment

• text-center
• text-left
• text-right
• text-tablet-center
• text-tablet-left
• text-tablet-right
• text-desktop-center
• text-desktop-left
• text-desktop-right

Text Colors

• text-primary
• text-primary-disabled
• text-primary-inverted
• text-primary-inverted-disabled
• text-secondary
• text-secondary-disabled
• text-secondary-inverted
• text-secondary-inverted-disabled

Background Colors

• bg-basic
• bg-cover
• bg-inverted

Flex

Wrap

• flex-wrap
• flex-nowrap
• flex-wrap-reverse
• flex-tablet-wrap
• flex-tablet-nowrap
• flex-tablet-wrap-reverse
• flex-desktop-wrap
• flex-desktop-nowrap
• flex-desktop-wrap-reverse

Direction

• flex-column
• flex-column-reverse
• flex-row
• flex-row-reverse
• flex-tablet-column
• flex-tablet-column-reverse
• flex-tablet-row
• flex-tablet-row-reverse
• flex-desktop-column
• flex-desktop-column-reverse
• flex-desktop-row
• flex-desktop-row-reverse

Justify

• justify-content-start
• justify-content-end
• justify-content-center
• justify-content-between
• justify-content-around
• justify-content-tablet-start
• justify-content-tablet-end
• justify-content-tablet-center
• justify-content-tablet-between
• justify-content-tablet-around
• justify-content-desktop-start
• justify-content-desktop-end
• justify-content-desktop-center
• justify-content-desktop-between
• justify-content-desktop-around

Gap

includes all spaces tokens (example gap-200, gap-tablet-300 etc.)

• gap-*
• gap-tablet-*
• gap-desktop-*
• gap-x-*
• gap-x-tablet-*
• gap-x-desktop-*
• gap-y-*
• gap-y-tablet-*
• gap-y-desktop-*