Size
The Size system provides utility classes for controlling width and height dimensions. It includes both fixed sizes and responsive utilities to handle various layout needs.
Fixed Sizes
Control element widths and heights using predefined size classes. Use w--{size} and h--{size} class names with these size values:
w/h--0
w/h--0.5
w/h--1
w/h--1.5
w/h--2
w/h--2.5
w/h--3
w/h--3.5
w/h--4
w/h--5
w/h--6
w/h--7
w/h--8
w/h--9
w/h--10
w/h--11
w/h--12
w/h--14
w/h--16
w/h--20
w/h--24
w/h--28
w/h--32
w/h--36
w/h--40
w/h--44
w/h--48
w/h--52
w/h--56
w/h--60
w/h--64
w/h--72
w/h--80
w/h--96
0px
2px
4px
6px
8px
10px
12px
14px
16px
20px
24px
28px
32px
36px
40px
44px
48px
56px
64px
80px
96px
112px
128px
144px
160px
176px
192px
208px
224px
240px
256px
288px
320px
384px
Arbitrary Sizes
Need a specific dimension? Use arbitrary size classes for precise pixel values with w--[Npx] and h--[Npx] syntax, where N can be any value from 0 to 1000.
w/h--[150px]
w/h--[225px]
w/h--[300px]
150px
225px
300px
Min/Max Dimensions
Control minimum and maximum element dimensions independently using w--min-{size}, w--max-{size}, h--min-{size}, and h--max-{size} classes.
Min/Max Width
Set minimum and maximum width constraints independently from the base width value.
Size
Min/Max Widths
<div class="w--auto w--min-72">Min Width 72 (288px)</div>
<div class="w--full w--max-32">Max Width 32 (128px)</div>Min/Max Height
Set minimum and maximum height constraints independently. Min-height ensures elements are at least a certain height, max-height prevents them from growing beyond a limit.
Size
Min/Max Heights
<div class="h--min-12">Min Height 72 (288px)</div>
<div class="h--max-8">Max Height 8 (32px)</div>Arbitrary Min/Max Dimensions
Use arbitrary min/max dimensions with w--min-[Npx], w--max-[Npx], h--min-[Npx], and h--max-[Npx] syntax.
w--min-[100px]
w--max-[200px]
h--min-[50px]
min-width: 100px
max-width: 200px
min-height: 50px
Dynamic Sizes
Dynamic sizes allow you to set width and height values relative to the container or content, rather than using fixed pixel values.
Dynamic Width
Use w--full for full width or
w--auto for automatic width.
Size
Dynamic Widths
<div class="w--full">Full width</div>
<div class="w--auto">Auto width</div>Dynamic Height
Use h--full for full height or
h--auto for automatic height.
Size
Dynamic Heights
<div class="h--full">Full height</div>
<div class="h--auto">Auto height</div>Responsive Sizes
Size utilities support responsive variants, allowing you to set different dimensions at different screen breakpoints. Use the pattern breakpoint:size-class to apply sizes conditionally.
Size-Based Responsive
Apply different width and height values at different screen sizes using responsive prefixes. The framework follows a mobile-first approach where styles apply to the target breakpoint and larger.
Size
Responsive Sizes
<!-- Width: 8 (32px) by default, 16 (64px) on md and up, 24 (96px) on lg and up -->
<div class="w--8 md:w--16 lg:w--24">Responsive Width</div>
<!-- Height: 8 (32px) by default, 16 (64px) on md and up, 24 (96px) on lg and up -->
<div class="h--8 md:h--16 lg:h--24">Responsive Height</div>Supported Responsive Classes
Responsive variants are available for most size utilities. Arbitrary dimensions (using the [Npx] syntax) do not support responsive variants.
| Category | Responsive Support | Example Usage |
|---|---|---|
| Fixed Sizes | ✓ Supported |
md:w--16, lg:h--24
|
| Full/Auto Dimensions | ✓ Supported |
md:w--full, lg:h--auto
|
| Min/Max Dimensions | ✓ Supported |
md:w--min-16, lg:h--max-full
|
| Arbitrary Dimensions | ✗ Not Supported |
w--[150px], h--[225px]
|
Note: Size utilities only support size-based responsive variants (sm:, md:, lg:). They do not support bit-depth responsive variants (1bit:, 2bit:, 4bit:) or combined responsive variants.