Sizing
Max Width
Utilities for sets the maximum width of an element.
Variant
Active Checked Child-Selection Dark Mode Disabled Expand First-Last-Selection First-Letter Focus Focus-Visible Focus-Within Fullscreen Group-Focus Group-Hover Hover Landscape Light Mode Portrait Reduce-Motion Responsive Selection-Hover Visited
API
| class | css |
|---|---|
| max-width-none | max-width: none |
| max-width-full | max-width: 100% |
| max-width-xxxs | max-width: 12rem |
| max-width-xxs | max-width: 16rem |
| max-width-xs | max-width: 20rem |
| max-width-sm | max-width: 24rem |
| max-width-md | max-width: 28rem |
| max-width-lg | max-width: 32rem |
| max-width-xl-1 | max-width: 36rem |
| max-width-xl-2 | max-width: 42rem |
| max-width-xl-3 | max-width: 48rem |
| max-width-xl-4 | max-width: 56rem |
| max-width-xl-5 | max-width: 64rem |
| max-width-xl-6 | max-width: 72rem |
| class | css |
|---|---|
| max-width-screen-sm | max-width: 640px |
| max-width-screen-md | max-width: 768px |
| max-width-screen-lg | max-width: 1024px |
| max-width-screen-1k | max-width: 1280px |
| max-width-screen-2k | max-width: 1920px |
| max-width-screen-4k | max-width: 3840px |
| max-width-screen-8k | max-width: 7680px |
Usage
<div class="max-width-lg">
...
</div>
HTML
.dummy {
@extend
.max-width-lg;
}
SCSS