IconLogoMark
IconUiExpandCollapseDown

Release NotesIconUiExpandCollapseDown

ComponentsIconUiExpandCollapseDown

GuidelinesIconUiExpandCollapseDown

PatternsIconUiExpandCollapseDown

WordsIconUiExpandCollapseDown

ResourcesIconUiExpandCollapseDown

Code HelpersIconUiExpandCollapseDown
Code VariablesIconUiExpandCollapseDown
Design AssetsIconUiExpandCollapseDown

Utility

Snippets and classes to help you quickly style items.

Web
React Native
Android
Apple

Visual

Use these to quickly override the styling of your components or elements.


.uni-utility__hidden

Use this to visually hide an element, but keep it in the DOM for accessibility purposes.

.uni-utility__collapse-margin--*

Collapse the margins of the element in one of the directions below:

  • top
  • right
  • bottom
  • left
  • horizontal
  • vertical
  • all

.uni-utility__collapse-padding--*

Collapse the paddings of the element in one of the directions below:

  • top
  • right
  • bottom
  • left
  • horizontal
  • vertical
  • all

Type

Quickly align or style text with the classes below.


.uni-utility__text-align--*

Align text in one of the directions below:

  • left
  • right
  • center

.uni-utility__font--bold

Bold the enclosed text.

.uni-utility__text-overflow--hidden

Hide overflowing text and clip it with an ellipsis.