Width
Width classes #
Width utility classes:
| CSS Class | Description |
|---|---|
w{p}idth-4xs |
width: 0.25rem; (4px) |
w{p}idth-3xs |
width: 0.5rem; (8px) |
w{p}idth-2xs |
width: 0.75rem; (12px) |
w{p}idth-xs |
width: 1rem; (16px) |
w{p}idth-sm |
width: 1.5rem; (24px) |
w{p}idth-md |
width: 2rem; (32px) |
w{p}idth-lg |
width: 3rem; (48px) |
w{p}idth-xl |
width: 4rem; (64px) |
w{p}idth-2xl |
width: 6rem; (96px) |
w{p}idth-3xl |
width: 8rem; (128px) |
w{p}idth-4xl |
width: 16rem; (256px) |
w{p}idth-0 |
width: 0; |
w{p}idth-10% |
width: 10%; |
w{p}idth-20% |
width: 20%; |
w{p}idth-25% |
width: 25%; |
w{p}idth-30% |
width: 30%; |
w{p}idth-33% |
width: calc(100% / 3); |
w{p}idth-40% |
width: 40%; |
w{p}idth-50% |
width: 50%; |
w{p}idth-60% |
width: 60%; |
w{p}idth-66% |
width: calc(100% / 1.5); |
w{p}idth-70% |
width: 70%; |
w{p}idth-75% |
width: 75%; |
w{p}idth-80% |
width: 80%; |
w{p}idth-90% |
width: 90%; |
w{p}idth-100% |
width: 100%; |
w{p}idth-100vw |
width: 100vw; |
w{p}idth-auto |
width: auto; |
w{p}idth-inherit |
width: inherit; |
Responsive - target a breakpoint by adding the @{breakpoint} suffix (e.g., .width-sm@md).
Customize #
To customize the width default values, pass the $width map to the config module in your style.scss file:
@use 'config' as * with (
$width: (
'4xs': '0.25rem',
'3xs': '0.5rem',
'2xs': '0.75rem',
'xs': '1rem',
'sm': '1.5rem',
'md': '2rem',
'lg': '3rem',
'xl': '4rem',
'2xl': '6rem',
'3xl': '8rem',
'4xl': '16rem',
0: '0',
10\%: '10%',
20\%: '20%',
25\%: '25%',
30\%: '30%',
33\%: '33%',
40\%: '40%',
50\%: '50%',
60\%: '60%',
70\%: '70%',
75\%: '75%',
80\%: '80%',
90\%: '90%',
100\%: '100%'
)
);
