Arrangement

Use these arrangement classes to manipulate if and where an element appears within a layout.

Display

Use these display classes to specify an element's rendering box. Display affects visibility as well as the page flow. The below display classes apply to all breakpoints. To specify display behavior at certain breakpoints, use the following format to add a breakpoint abbreviation u-display-{breakpoint}--{value}.

u-display--block	Sets `display: block` to element, making it a block. It will start on a new line and take all available width.
u-display--inline	Sets `display: inline` to element, making it inline. It will start in the same line as the previous element. Any specified height and width properties are negated.
u-display--inline-block	Sets `display: inline-block` to element, making it an inline block. The element starts inline with the element before it but specified height and width values will take effect.
u-display--none	Sets `display: none` to element, removing it from the page flow.

Visibility

Use visibility classes to show or hide an element while keeping them in the page flow. The below visibility classes apply to all breakpoints. To specify visibility at certain breakpoints, use the following format to add a breakpoint abbreviation u-visible-{breakpoint}.

u-hidden	Sets `visibility: hidden` to element. Hidden items still take space on the page.
u-visible	Sets `visibility: visible` to element, forcing it to appear on the page.

Screen Reader

Use the screen reader utility instead of visibility to hide an element but make it easily available for screen readers.

u-screen-reader

Sets element as a screen reader helper, visually hiding it from the page while keeping it in the DOM for accessibility utility.

Position

Use the position classes to determine the positioning method used to place an element.

u-position--absolute	Sets `position: absolute` to element.
u-position--fixed	Sets `position: fixed` to element.
u-position--relative	Sets `position: relative` to element.
u-position--unset	Sets `position: unset` to element, allowing the element to take either an inherited value or initial value depending on its parent.

Pull

Pull utilities will set the float property to align an object as needed and let elements flow around it.

u-pull--left	Sets `float: left` to element.
u-pull--right	Sets `float: right` to element.
u-pull--center	Sets `float: center` to element.
u-pull--none	Sets `float: none` to element.