Visibility utilities
Visually hide content
Hide an element while keeping it accessible to screen readers.
Usage
u-hide
Hide empty element
Hide an element when there is no inner element.
Usage
u-hide-empty
Display
Remove element
Hide and remove the element. Consider using the u-hide utilities to hide an element while keeping it accessible to screen readers.
Usage
u-display-none(@[breakpoint])
-
breakpoint (optional)
Apply the utility from the specified breakpoint and larger.
Inline element
Display the element as an inline element (like <span>). Height and width properties have no effect.
Usage
u-display-inline(@[breakpoint])
-
breakpoint (optional)
Apply the utility from the specified breakpoint and larger.
Inline block element
Display the element as an inline block element. Height and width properties have effect.
Usage
u-display-inline-block(@[breakpoint])
-
breakpoint (optional)
Apply the utility from the specified breakpoint and larger.
Block element
Display the element as a block element (like <p>). It starts on a new line, and takes up the whole width by default.
Usage
u-display-block(@[breakpoint])
-
breakpoint (optional)
Apply the utility from the specified breakpoint and larger.
Flex element
Displays an element as a block-level flex container. Consider using the u-flex utility for more options.
Usage
u-display-flex(@[breakpoint])
-
breakpoint (optional)
Apply the utility from the specified breakpoint and larger.