Switch to M&T
Overview

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.