Display
Control the position and display characteristics of an item.
Utility Modules
Display
Sets whether an element is treated as a block or inline box and the layout used for its children.
Mixins and Functions
| Utility | Mixin | Example |
|---|---|---|
.display-value | u-display(value) | @include u-display('block') |
Utility Classes
| Module name | Are responsive modifiers turned on? | Active state modifiers | Gzip file size | Non-gzip file size |
|---|---|---|---|---|
| display | True | None | 0.28 KB | 1.5 KB |
The display utility classes have not been modified from the U.S. Web Design System (USWDS). Refer to the USWDS Display utility page for a complete listing of classes.
Overflow
Sets the desired behavior when content does not fit in the element's padding box (overflows) in the horizontal and/or vertical direction.
Mixins and Functions
| Utility | Mixin | Example |
|---|---|---|
.overflow-value | u-overflow(value) | @include u-overflow('scroll') |
.overflow-x-value | u-overflow-x(value) | @include u-overflow-x('hidden') |
.overflow-y-value | u-overflow-y(value) | @include u-overflow-y('visible') |
Utility Classes
| Module name | Are responsive modifiers turned on? | Active state modifiers | Gzip file size | Non-gzip file size |
|---|---|---|---|---|
| overflow | False | None | 0.09 KB | 0.46 KB |
The overflow utility classes have not been modified from the U.S. Web Design System (USWDS). Refer to the USWDS Display utility page for a complete listing of classes.
Pinning
Position an item absolutely to the specified side.
Mixins and Functions
| Utility | Mixin | Example |
|---|---|---|
.pin-value | u-pin(value) | ??HOWTOPINMULTIPLE?? |
Utility Classes
| Module name | Are responsive modifiers turned on? | Active state modifiers | Gzip file size | Non-gzip file size |
|---|---|---|---|---|
| pin | False | None | 0.06 KB | 0.35 KB |
The pinning utility classes have not been modified from the U.S. Web Design System (USWDS). Refer to the USWDS Display utility page for a complete listing of classes.
Position
Sets how an element is positioned in the document.
Mixins and Functions
| Utility | Mixin | Example |
|---|---|---|
.position-value | u-position(value) | @include u-position('relative') |
Utility Classes
| Module name | Are responsive modifiers turned on? | Active state modifiers | Gzip file size | Non-gzip file size |
|---|---|---|---|---|
| position | False | None | 0.04 KB | 0.21 KB |
The positioning utility classes have not been modified from the U.S. Web Design System (USWDS). Refer to the USWDS Display utility page for a complete listing of classes.
Relative position (bottom)
Sets how an element is positioned in the document relative to the bottom of the document.
Mixins and Functions
| Utility | Mixin | Example |
|---|---|---|
.bottom-units | u-bottom(units) | @include u-bottom('auto') |
The relative positioning utilities only support a subset of the spacing tokens: neg-3, neg-205, neg-2, neg-105, neg-1, neg-05, neg-2px, neg-1px, 0, 1px, 2px, 1, 105, 2, 205, 3, full, and auto.
Utility Classes
| Module name | Are responsive modifiers turned on? | Active state modifiers | Gzip file size | Non-gzip file size |
|---|---|---|---|---|
| bottom | False | None | 0.18 KB | 0.96 KB |
The relative positioning utility classes have not been modified from the U.S. Web Design System (USWDS). Refer to the USWDS Display utility page for a complete listing of classes.
Relative position (left)
Sets how an element is positioned in the document relative to the left edge of the document.
Mixins and Functions
| Utility | Mixin | Example |
|---|---|---|
.left-units | u-left(units) | @include u-left(-2px) |
The relative positioning utilities only support a subset of the spacing tokens: neg-3, neg-205, neg-2, neg-105, neg-1, neg-05, neg-2px, neg-1px, 0, 1px, 2px, 1, 105, 2, 205, 3, full, and auto.
Utility Classes
| Module name | Are responsive modifiers turned on? | Active state modifiers | Gzip file size | Non-gzip file size |
|---|---|---|---|---|
| left | False | None | 0.08 KB | 0.44 KB |
The relative positioning utility classes have not been modified from the U.S. Web Design System (USWDS). Refer to the USWDS Display utility page for a complete listing of classes.
Relative position (right)
Sets how an element is positioned in the document relative to the right edge of the document.
Mixins and Functions
| Utility | Mixin | Example |
|---|---|---|
.right-units | u-right(units) | @include u-right('full') |
The relative positioning utilities only support a subset of the spacing tokens: neg-3, neg-205, neg-2, neg-105, neg-1, neg-05, neg-2px, neg-1px, 0, 1px, 2px, 1, 105, 2, 205, 3, full, and auto.
Utility Classes
| Module name | Are responsive modifiers turned on? | Active state modifiers | Gzip file size | Non-gzip file size |
|---|---|---|---|---|
| right | False | None | 0.09 KB | 0.47 KB |
The relative positioning utility classes have not been modified from the U.S. Web Design System (USWDS). Refer to the USWDS Display utility page for a complete listing of classes.
Relative position (top)
Sets how an element is positioned in the document relative to the top of the document.
Mixins and Functions
| Utility | Mixin | Example |
|---|---|---|
.top-units | u-top(units) | @include u-top('05') |
The relative positioning utilities only support a subset of the spacing tokens: neg-3, neg-205, neg-2, neg-105, neg-1, neg-05, neg-2px, neg-1px, 0, 1px, 2px, 1, 105, 2, 205, 3, full, and auto.
Utility Classes
| Module name | Are responsive modifiers turned on? | Active state modifiers | Gzip file size | Non-gzip file size |
|---|---|---|---|---|
| top | False | None | 0.07 KB | 0.4 KB |
The relative positioning utility classes have not been modified from the U.S. Web Design System (USWDS). Refer to the USWDS Display utility page for a complete listing of classes.
Z-index
Sets the z-order of a positioned element and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one.
Mixins and Functions
| Utility | Mixin | Example |
|---|---|---|
.z-value | u-z(value) | @include u-z(300)@include u-z('bottom') |
Utility Classes
| Module name | Are responsive modifiers turned on? | Active state modifiers | Gzip file size | Non-gzip file size |
|---|---|---|---|---|
| z-index | False | None | 0.04 KB | 0.22 KB |
The z-index utility classes have not been modified from the U.S. Web Design System (USWDS). Refer to the USWDS Display utility page for a complete listing of classes.