Pin

Pin elements to an edge of their container or the viewport

Properties

Utility class	Description	Example
.pin-top	Positions an element absolutely at the top of its nearest positioned ancestor.	.pin-top
.pin-bottom	Positions an element absolutely at the bottom of its nearest positioned ancestor.	.pin-bottom
.pin-left	Positions an element absolutely at the left edge of its nearest positioned ancestor.	.pin-left
.pin-right	Positions an element absolutely at the right edge of its nearest positioned ancestor.	.pin-right
.pin-x	Pins an element to both left and right (left: 0; right: 0).	.pin-x
.pin-y	Pins an element to both top and bottom (top: 0; bottom: 0).	.pin-y
.pin-all	Pins an element to all four edges (top: 0; right: 0; bottom: 0; left: 0).	.pin-all
.pin-none	Removes any pin positioning (resets top/right/bottom/left to auto).	.pin-none
.pin-top.pin-x	Pins to the top and stretches/pins to left & right (top + horizontal pinning).	.pin-top.pin-x
.pin-bottom.pin-x	Pins to the bottom and both left & right (bottom + horizontal pinning).	.pin-bottom.pin-x
.pin-left.pin-y	Pins to the left and both top & bottom (left + vertical pinning).	.pin-left.pin-y
.pin-right.pin-y	Pins to the right and both top & bottom (right + vertical pinning).	.pin-right.pin-y

Warning

The .pin-value utilities set element offsets (top, right, bottom, left). Offsets are measured relative to the nearest ancestor with non-static positioning. For example, add .position-relative to the parent container to prevent the pinned element from escaping its container.

Utility classes

Utility classes may be included in your HTML or applied using Utility classes in your Sass.

Utility	Example	Code
.pin-value	.pin-left	class=("pin-left")

Use single-quoted strings in Utility classes.
Do not quote numbers or px values. With the exception of half (05), values like '105', and '205' should be treated as strings.
String tokens for half values (like 05) and negative values (like neg-1) may also be written with their unquoted number token equivalent: 0.5, 1.5, 2.5, -1, -1.5, etc.
If multiple utilities share the same prefix (ex: .text- or .flex-) or a single utility accepts multiple kinds of values (ex: .border accepts both border weight and border color), their shared mixin can accept multiple comma-separated values:
- u-text('primary-darkest', 'no-underline', 'bold')
- u-border-top(2px, 'accent-warm')
Output any utility mixin as !important by appending !important to the mixin’s argument list:

u-bg('red-warm-50v', !important)

Utility variants

More information about utility variants can be viewed on the utility variants page. Responsive and state variants are listed as true when they are available for use.

Responsive variants

You can apply different styles at differentresponsive breakpoints using responsive utilities. Use a breakpoint prefix separated with a : to target a utility at a responsive breakpoint and higher (eg. .desktop:border-05).

Utility variable	Responsive
$font-style-settings	false

State variants

You can apply different styles for different state variants using state utilities. Use a state prefix separated with a : to target a utility for a specific state. (eg. .hover:shadow-2).

Utility variable	Active	Focus	Hover	Visited
$font-style-settings	false	false	false	false