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.

Min Width 72 (288px)
Max Width 32 (128px)
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.

Min Height 72 (288px)
Max Height 8 (32px)
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.

Full Width
Auto 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.

Full Height
Auto 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.

Responsive Width
Responsive Height
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.