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
Responsive Sizes
Responsive sizes allow you to set width and height values relative to the container or content, rather than using fixed pixel values.
Responsive Width
Use w--full for full width or
w--auto for automatic width.
Full Width
Auto Width
Size
Responsive Widths
<div class="w--full">Full width</div>
<div class="w--auto">Auto width</div>Responsive Height
Use h--full for full height or
h--auto for automatic height.
Full Height
Auto Height
Size
Responsive Heights
<div class="h--full">Full height</div>
<div class="h--auto">Auto height</div>