Display

Display utilities control element visibility and display behavior. All classes support responsive breakpoint suffixes (@sm, @md, @lg, @xl, @print).

Classes

Class	Description
.util-display-none	Hides the element (display: none)
.util-block	Element fills the full width of its container and starts on a new line
.util-inline	Element flows within text, sized by its content only (width/height have no effect)
.util-inline-block	Element flows within text like inline, but accepts width, height, and vertical margins
.util-visually-hidden	Hides visually but remains accessible to screen readers
.util-visually-visible	Reverses .util-visually-hidden

Responsive Usage

Append a breakpoint suffix to apply display changes at specific screen sizes:

Example	Description
.util-display-none@md	Hidden from the md breakpoint and up
.util-block@md	Block display from the md breakpoint and up
.util-display-none@print	Hidden when printed

Breakpoint Suffixes

Suffix	Min-width
@sm	30rem (480px)
@md	50rem (800px)
@lg	60rem (960px)
@xl	80rem (1280px)
@print	Print media

Visually Hidden

The .util-visually-hidden class hides an element visually while keeping it accessible to assistive technologies. This is commonly used for skip links and screen-reader-only labels.