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