Display

Set how an element is displaed and participates in the layout

Properties

Utility class	Description	Example
.display-block	Forces an element to take up the full width available and start on a new line.
.display-flex	Turns the element into a flex container, enabling Flexbox layout for its direct children.
.display-inline	The element takes up only as much width as necessary and does not start on a new line.
.display-inline-block	Elements sit side-by-side like inline elements but can accept width, height, and vertical padding/margins like block elements.
.display-inline-flex	Establishes a flex container that behaves like an inline element (it does not take up the full width of its parent).
.display-none	Entirely removes the element from the page layout; it will not be visible and takes up no space.	Hidden No visible example (display:none)
.display-table-cell	Makes the element behave like a table cell. Use with `.display-table` and `.display-table-row` to create a table-like layout where cells align horizontally and share row heights.

Utility classes

Utility classes may be included in your HTML or applied using Utility classes in your Sass.

Utility	Example	Code
.display-value	.display-inline	class=("display-inline")

Use single-quoted strings in Utility classes.
Do not quote numbers or px values. With the exception of half (05), values like '105', and '205' should be treated as strings.
String tokens for half values (like 05) and negative values (like neg-1) may also be written with their unquoted number token equivalent: 0.5, 1.5, 2.5, -1, -1.5, etc.
If multiple utilities share the same prefix (ex: .text- or .flex-) or a single utility accepts multiple kinds of values (ex: .border accepts both border weight and border color), their shared mixin can accept multiple comma-separated values:
- u-text('primary-darkest', 'no-underline', 'bold')
- u-border-top(2px, 'accent-warm')
Output any utility mixin as !important by appending !important to the mixin’s argument list:

u-bg('red-warm-50v', !important)

Utility variants

More information about utility variants can be viewed on the utility variants page. Responsive and state variants are listed as true when they are available for use.

Responsive variants

You can apply different styles at differentresponsive breakpoints using responsive utilities. Use a breakpoint prefix separated with a : to target a utility at a responsive breakpoint and higher (eg. .desktop:border-05).

Utility variable	Responsive
$font-style-settings	true

State variants

You can apply different styles for different state variants using state utilities. Use a state prefix separated with a : to target a utility for a specific state. (eg. .hover:shadow-2).

Utility variable	Active	Focus	Hover	Visited
$font-style-settings	false	false	false	false