Theme
- Light
- Dark
Width
The width CSS property specifies the width of an element.
| Base class | {value} | Property | Property value |
|---|---|---|---|
| |||
0 |
var(--spc-0) | ||
1 |
var(--spc-1) | ||
2 |
var(--spc-2) | ||
3 |
var(--spc-3) | ||
4 |
var(--spc-4) | ||
5 |
var(--spc-5) | ||
6 |
var(--spc-6) | ||
7 |
var(--spc-7) | ||
8 |
var(--spc-8) | ||
9 |
var(--spc-9) | ||
10 |
var(--spc-10) | ||
11 |
var(--spc-11) | ||
12 |
var(--spc-12) | ||
13 |
var(--spc-13) | ||
50pct |
50% | ||
100pct |
100% | ||
at |
auto | ||
ihr |
inherit | ||
us |
unset | ||
100vw |
var(--spc-100vw) | ||
100vh |
var(--spc-100vh) |
All classes
| Class name | Styles |
|---|---|
_w-0 |
width: var(--spc-0); |
_w-1 |
width: var(--spc-1); |
_w-2 |
width: var(--spc-2); |
_w-3 |
width: var(--spc-3); |
_w-4 |
width: var(--spc-4); |
_w-5 |
width: var(--spc-5); |
_w-6 |
width: var(--spc-6); |
_w-7 |
width: var(--spc-7); |
_w-8 |
width: var(--spc-8); |
_w-9 |
width: var(--spc-9); |
_w-10 |
width: var(--spc-10); |
_w-11 |
width: var(--spc-11); |
_w-12 |
width: var(--spc-12); |
_w-13 |
width: var(--spc-13); |
_w-50pct |
width: 50%; |
_w-100pct |
width: 100%; |
_w-at |
width: auto; |
_w-ihr |
width: inherit; |
_w-us |
width: unset; |
_w-100vw |
width: var(--spc-100vw); |
_w-100vh |
width: var(--spc-100vh); |
_mnw-0 |
min-width: var(--spc-0); |
_mnw-1 |
min-width: var(--spc-1); |
_mnw-2 |
min-width: var(--spc-2); |
_mnw-3 |
min-width: var(--spc-3); |
_mnw-4 |
min-width: var(--spc-4); |
_mnw-5 |
min-width: var(--spc-5); |
_mnw-6 |
min-width: var(--spc-6); |
_mnw-7 |
min-width: var(--spc-7); |
_mnw-8 |
min-width: var(--spc-8); |
_mnw-9 |
min-width: var(--spc-9); |
_mnw-10 |
min-width: var(--spc-10); |
_mnw-11 |
min-width: var(--spc-11); |
_mnw-12 |
min-width: var(--spc-12); |
_mnw-13 |
min-width: var(--spc-13); |
_mnw-50pct |
min-width: 50%; |
_mnw-100pct |
min-width: 100%; |
_mnw-at |
min-width: auto; |
_mnw-ihr |
min-width: inherit; |
_mnw-us |
min-width: unset; |
_mnw-100vw |
min-width: var(--spc-100vw); |
_mnw-100vh |
min-width: var(--spc-100vh); |
_mxw-0 |
max-width: var(--spc-0); |
_mxw-1 |
max-width: var(--spc-1); |
_mxw-2 |
max-width: var(--spc-2); |
_mxw-3 |
max-width: var(--spc-3); |
_mxw-4 |
max-width: var(--spc-4); |
_mxw-5 |
max-width: var(--spc-5); |
_mxw-6 |
max-width: var(--spc-6); |
_mxw-7 |
max-width: var(--spc-7); |
_mxw-8 |
max-width: var(--spc-8); |
_mxw-9 |
max-width: var(--spc-9); |
_mxw-10 |
max-width: var(--spc-10); |
_mxw-11 |
max-width: var(--spc-11); |
_mxw-12 |
max-width: var(--spc-12); |
_mxw-13 |
max-width: var(--spc-13); |
_mxw-50pct |
max-width: 50%; |
_mxw-100pct |
max-width: 100%; |
_mxw-at |
max-width: auto; |
_mxw-ihr |
max-width: inherit; |
_mxw-us |
max-width: unset; |
_mxw-100vw |
max-width: var(--spc-100vw); |
_mxw-100vh |
max-width: var(--spc-100vh); |