Design System

Using .t-left forces the text inside the element to align to the left.

Using .t-center forces the text inside the element to align to the center.

Using .t-right forces the text inside the element to align to the right.

Using .t-success, .t-warning or .t-error forces the text inside the element to follow the right color code.

Using .block sets display: block on the element, useful on inline elements such as <span> or <a>.

Using .p-rel sets position: relative on the element, typically to serve as a positioning context for an absolutely positioned child.

Using .hide sets display: none and opacity: 0 on the element, removing it from view and from the layout flow regardless of breakpoint. *There's an hidden element below the visible one. Check the DOM.

The large breakpoint is the toggle point for these: .hide--mobile (and its --flex/--revert variants, restoring display: flex or the inherited display above large) hides the element below the large breakpoint and shows it above; .hide--desktop (and its --flex variant) does the opposite, hiding the element from the large breakpoint upward. Resize the window to see these toggle.

Using .u-sr-accessible visually hides the element (moved off-screen, clipped to 1x1px) while keeping it readable by assistive technology. Used for labels that must exist for accessibility but shouldn't show up visually, such as in the select field.

Using .image-16-9 on a wrapper around a <figure>><img> forces the image to a 16:9 ratio, covering its container.

Using .image-3-4 on a wrapper around a <figure>><img> forces the image to a 3:4 ratio, covering its container.

Using .image-blank (paired with a <figure> containing an icon <span>) shows a centered placeholder icon on a flat background, for use before an image is uploaded.

Using .all-r rounds all 4 corners of the element (default: --m). Add --l, --m or --s to pick the radius size.

.t-l-r, .t-r-r, .b-r-r and .b-l-r round a single corner (top-left, top-right, bottom-right, bottom-left) instead of all 4, each also accepting the --l/--m/--s size modifiers. Useful when an element sits flush against another on some sides (e.g. a card image butting up against its text block).