Display

Quickly toggle the display value of components with display utilities. The display helpers allow you to control the display of content.

Displays

The helper classes applies display helper property to an element.

• u-display-{value} - applies display css property

The value property is one of:

• none
• inherit
• block
• flex
• inline
• inline-block
• inline-flex
• list-item
• table
• table-row
• table-cell

Alignments

The alignmnent helpers allows you to control the alignment of content (text-align property).

Available Classes:

Class	Description
u-ta-left	Align Left
u-ta-center	Align Center
u-ta-right	Align Right
u-ta-justify	Align Justify
u-ta-inherit	Inherit Align

Vertical Alignments

The alignmnent helpers allows you to control the vertical alignment of content (vertical-align property).

Available Classes:

• u-va-top
• u-ta-text-top
• u-va-super
• u-va-middle
• u-va-baseline
• u-va-sub
• u-va-text-bottom
• u-va-bottom
• u-va-inherit

Visibility

Available visibility helper classes:

Class	Description
u-visibility-visible	Hidden Text
u-visibility-hidden	Visible Text
u-visibility-screenreader	Focusabled text with hidden screenreader text