IconLogoMark
IconUiExpandCollapseDown

Release NotesIconUiExpandCollapseDown

ComponentsIconUiExpandCollapseDown

GuidelinesIconUiExpandCollapseDown

PatternsIconUiExpandCollapseDown

WordsIconUiExpandCollapseDown

ResourcesIconUiExpandCollapseDown

Code HelpersIconUiExpandCollapseDown
Code VariablesIconUiExpandCollapseDown
Design AssetsIconUiExpandCollapseDown

Space

Add a little space to your interface.

Web
React Native
Android
Apple

Margin Classes

Add these margin classes to your markup to add space to the outside or between items.

All

Class NameValueAssociated Variable
uni-margin--eighth2pxvar(--space-eighth)
uni-margin--quarter4pxvar(--space-quarter)
uni-margin--half8pxvar(--space-half)
uni-margin--three-quarter12pxvar(--space-three-quarter)
uni-margin--one16pxvar(--space-one)
uni-margin--one-and-quarter20pxvar(--space-one-and-quarter)
uni-margin--one-and-half24pxvar(--space-one-and-half)
uni-margin--one-and-three-quarter28pxvar(--space-one-and-three-quarter)
uni-margin--two32pxvar(--space-two)
uni-margin--three48pxvar(--space-three)
uni-margin--four64pxvar(--space-four)

Vertical

Class NameValueAssociated Variable
uni-margin--eighth--vertical2pxvar(--space-eighth)
uni-margin--quarter--vertical4pxvar(--space-quarter)
uni-margin--half--vertical8pxvar(--space-half)
uni-margin--three-quarter--vertical12pxvar(--space-three-quarter)
uni-margin--one--vertical16pxvar(--space-one)
uni-margin--one-and-quarter--vertical20pxvar(--space-one-and-quarter)
uni-margin--one-and-half--vertical24pxvar(--space-one-and-half)
uni-margin--one-and-three-quarter--vertical28pxvar(--space-one-and-three-quarter)
uni-margin--two--vertical32pxvar(--space-two)
uni-margin--three--vertical48pxvar(--space-three)
uni-margin--four--vertical64pxvar(--space-four)

Top

Class NameValueAssociated Variable
uni-margin--eighth--top2pxvar(--space-eighth)
uni-margin--quarter--top4pxvar(--space-quarter)
uni-margin--half--top8pxvar(--space-half)
uni-margin--three-quarter--top12pxvar(--space-three-quarter)
uni-margin--one--top16pxvar(--space-one)
uni-margin--one-and-quarter--top20pxvar(--space-one-and-quarter)
uni-margin--one-and-half--top24pxvar(--space-one-and-half)
uni-margin--one-and-three-quarter--top28pxvar(--space-one-and-three-quarter)
uni-margin--two--top32pxvar(--space-two)
uni-margin--three--top48pxvar(--space-three)
uni-margin--four--top64pxvar(--space-four)

Bottom

Class NameValueAssociated Variable
uni-margin--eighth--bottom2pxvar(--space-eighth)
uni-margin--quarter--bottom4pxvar(--space-quarter)
uni-margin--half--bottom8pxvar(--space-half)
uni-margin--three-quarter--bottom12pxvar(--space-three-quarter)
uni-margin--one--bottom16pxvar(--space-one)
uni-margin--one-and-quarter--bottom20pxvar(--space-one-and-quarter)
uni-margin--one-and-half--bottom24pxvar(--space-one-and-half)
uni-margin--one-and-three-quarter--bottom28pxvar(--space-one-and-three-quarter)
uni-margin--two--bottom32pxvar(--space-two)
uni-margin--three--bottom48pxvar(--space-three)
uni-margin--four--bottom64pxvar(--space-four)

Horizontal

Class NameValueAssociated Variable
uni-margin--eighth--horizontal2pxvar(--space-eighth)
uni-margin--quarter--horizontal4pxvar(--space-quarter)
uni-margin--half--horizontal8pxvar(--space-half)
uni-margin--three-quarter--horizontal12pxvar(--space-three-quarter)
uni-margin--one--horizontal16pxvar(--space-one)
uni-margin--one-and-quarter--horizontal20pxvar(--space-one-and-quarter)
uni-margin--one-and-half--horizontal24pxvar(--space-one-and-half)
uni-margin--one-and-three-quarter--horizontal28pxvar(--space-one-and-three-quarter)
uni-margin--two--horizontal32pxvar(--space-two)
uni-margin--three--horizontal48pxvar(--space-three)
uni-margin--four--horizontal64pxvar(--space-four)

Left

Class NameValueAssociated Variable
uni-margin--eighth--left2pxvar(--space-eighth)
uni-margin--quarter--left4pxvar(--space-quarter)
uni-margin--half--left8pxvar(--space-half)
uni-margin--three-quarter--left12pxvar(--space-three-quarter)
uni-margin--one--left16pxvar(--space-one)
uni-margin--one-and-quarter--left20pxvar(--space-one-and-quarter)
uni-margin--one-and-half--left24pxvar(--space-one-and-half)
uni-margin--one-and-three-quarter--left28pxvar(--space-one-and-three-quarter)
uni-margin--two--left32pxvar(--space-two)
uni-margin--three--left48pxvar(--space-three)
uni-margin--four--left64pxvar(--space-four)

Right

Class NameValueAssociated Variable
uni-margin--eighth--right2pxvar(--space-eighth)
uni-margin--quarter--right4pxvar(--space-quarter)
uni-margin--half--right8pxvar(--space-half)
uni-margin--three-quarter--right12pxvar(--space-three-quarter)
uni-margin--one--right16pxvar(--space-one)
uni-margin--one-and-quarter--right20pxvar(--space-one-and-quarter)
uni-margin--one-and-half--right24pxvar(--space-one-and-half)
uni-margin--one-and-three-quarter--right28pxvar(--space-one-and-three-quarter)
uni-margin--two--right32pxvar(--space-two)
uni-margin--three--right48pxvar(--space-three)
uni-margin--four--right64pxvar(--space-four)

Padding Classes

Add these padding classes to your markup to add space to the inside of items.

All

Class NameValueAssociated Variable
uni-padding--eighth2pxvar(--space-eighth)
uni-padding--quarter4pxvar(--space-quarter)
uni-padding--half8pxvar(--space-half)
uni-padding--three-quarter12pxvar(--space-three-quarter)
uni-padding--one16pxvar(--space-one)
uni-padding--one-and-quarter20pxvar(--space-one-and-quarter)
uni-padding--one-and-half24pxvar(--space-one-and-half)
uni-padding--one-and-three-quarter28pxvar(--space-one-and-three-quarter)
uni-padding--two32pxvar(--space-two)
uni-padding--three48pxvar(--space-three)
uni-padding--four64pxvar(--space-four)

Vertical

Class NameValueAssociated Variable
uni-padding--eighth--vertical2pxvar(--space-eighth)
uni-padding--quarter--vertical4pxvar(--space-quarter)
uni-padding--half--vertical8pxvar(--space-half)
uni-padding--three-quarter--vertical12pxvar(--space-three-quarter)
uni-padding--one--vertical16pxvar(--space-one)
uni-padding--one-and-quarter--vertical20pxvar(--space-one-and-quarter)
uni-padding--one-and-half--vertical24pxvar(--space-one-and-half)
uni-padding--one-and-three-quarter--vertical28pxvar(--space-one-and-three-quarter)
uni-padding--two--vertical32pxvar(--space-two)
uni-padding--three--vertical48pxvar(--space-three)
uni-padding--four--vertical64pxvar(--space-four)

Top

Class NameValueAssociated Variable
uni-padding--eighth--top2pxvar(--space-eighth)
uni-padding--quarter--top4pxvar(--space-quarter)
uni-padding--half--top8pxvar(--space-half)
uni-padding--three-quarter--top12pxvar(--space-three-quarter)
uni-padding--one--top16pxvar(--space-one)
uni-padding--one-and-quarter--top20pxvar(--space-one-and-quarter)
uni-padding--one-and-half--top24pxvar(--space-one-and-half)
uni-padding--one-and-three-quarter--top28pxvar(--space-one-and-three-quarter)
uni-padding--two--top32pxvar(--space-two)
uni-padding--three--top48pxvar(--space-three)
uni-padding--four--top64pxvar(--space-four)

Bottom

Class NameValueAssociated Variable
uni-padding--eighth--bottom2pxvar(--space-eighth)
uni-padding--quarter--bottom4pxvar(--space-quarter)
uni-padding--half--bottom8pxvar(--space-half)
uni-padding--three-quarter--bottom12pxvar(--space-three-quarter)
uni-padding--one--bottom16pxvar(--space-one)
uni-padding--one-and-quarter--bottom20pxvar(--space-one-and-quarter)
uni-padding--one-and-half--bottom24pxvar(--space-one-and-half)
uni-padding--one-and-three-quarter--bottom28pxvar(--space-one-and-three-quarter)
uni-padding--two--bottom32pxvar(--space-two)
uni-padding--three--bottom48pxvar(--space-three)
uni-padding--four--bottom64pxvar(--space-four)

Horizontal

Class NameValueAssociated Variable
uni-padding--eighth--horizontal2pxvar(--space-eighth)
uni-padding--quarter--horizontal4pxvar(--space-quarter)
uni-padding--half--horizontal8pxvar(--space-half)
uni-padding--three-quarter--horizontal12pxvar(--space-three-quarter)
uni-padding--one--horizontal16pxvar(--space-one)
uni-padding--one-and-quarter--horizontal20pxvar(--space-one-and-quarter)
uni-padding--one-and-half--horizontal24pxvar(--space-one-and-half)
uni-padding--one-and-three-quarter--horizontal28pxvar(--space-one-and-three-quarter)
uni-padding--two--horizontal32pxvar(--space-two)
uni-padding--three--horizontal48pxvar(--space-three)
uni-padding--four--horizontal64pxvar(--space-four)

Left

Class NameValueAssociated Variable
uni-padding--eighth--left2pxvar(--space-eighth)
uni-padding--quarter--left4pxvar(--space-quarter)
uni-padding--half--left8pxvar(--space-half)
uni-padding--three-quarter--left12pxvar(--space-three-quarter)
uni-padding--one--left16pxvar(--space-one)
uni-padding--one-and-quarter--left20pxvar(--space-one-and-quarter)
uni-padding--one-and-half--left24pxvar(--space-one-and-half)
uni-padding--one-and-three-quarter--left28pxvar(--space-one-and-three-quarter)
uni-padding--two--left32pxvar(--space-two)
uni-padding--three--left48pxvar(--space-three)
uni-padding--four--left64pxvar(--space-four)

Right

Class NameValueAssociated Variable
uni-padding--eighth--right2pxvar(--space-eighth)
uni-padding--quarter--right4pxvar(--space-quarter)
uni-padding--half--right8pxvar(--space-half)
uni-padding--three-quarter--right12pxvar(--space-three-quarter)
uni-padding--one--right16pxvar(--space-one)
uni-padding--one-and-quarter--right20pxvar(--space-one-and-quarter)
uni-padding--one-and-half--right24pxvar(--space-one-and-half)
uni-padding--one-and-three-quarter--right28pxvar(--space-one-and-three-quarter)
uni-padding--two--right32pxvar(--space-two)
uni-padding--three--right48pxvar(--space-three)
uni-padding--four--right64pxvar(--space-four)