⬅

Display

Display Utilities

Class Name Responsive Classes Description
u-block u-[sm|md|lg]-block Display block
u-hidden u-[sm|md|lg]-hidden Display none.
u-hiddenVisually none Completely remove from the flow but leave available to screen readers.
u-inline u-[sm|md|lg]-inline Display inline.
u-inlineBlock u-[sm|md|lg]-inlineBlock Display inline-block.
u-inherit u-[sm|md|lg]-inherit Display inherit.
u-table u-[sm|md|lg]-table Display table.
u-tableCell u-[sm|md|lg]-tableCell Display table-cell.
u-tableRow u-[sm|md|lg]-tableRow Display table-row.

Responsive Visibility

Classes to show/hide the element at a set viewport size.

Class Name Description
u-hide Hidden between breakpoints `0` and `small`.
u-show Visible between breakpoints `0` and `small`.
u-sm-hide Hidden between breakpoints `small` and `medium`.
u-sm-show Visible between breakpoints `small` and `medium`.
u-md-hide Hidden between breakpoints `medium` and `large`.
u-md-show Visible between breakpoints `medium` and `large`.

Classes to show/hide the element when the viewport is at the given breakpoint and wider.

Class Name Description
u-sm-up-hide Hidden from breakpoint `small` and up.
u-sm-up-show Visible from breakpoint `small` and up.
u-md-up-hide Hidden from breakpoint `medium` and up.
u-md-up-show Visible from breakpoint `medium` and up.
u-lg-up-hide Hidden from breakpoint `large` and up.
u-lg-up-show Visible from breakpoint `large` and up.

Classes to show/hide the element when the viewport is at the given breakpoint and smaller.

Class Name Description
u-sm-down-hide Hidden from breakpoint `small` and up.
u-sm-down-show Visible from breakpoint `small` and up.
u-md-down-hide Hidden from breakpoint `medium` and up.
u-md-down-show Visible from breakpoint `medium` and up.
u-lg-down-hide Hidden from breakpoint `large` and up.
u-lg-down-show Visible from breakpoint `large` and up.