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.
Width Utilities
Control element widths using predefined size classes:
Fixed Widths
Use w--{size} where size can be
xxsmall (32px), xsmall (48px), small (64px), medium (80px), large (96px), xlarge (128px), or xxlarge (256px).
Size
Fixed Widths
<div class="w--xxsmall">32px width</div>
<div class="w--xsmall">48px width</div>
<div class="w--small">64px width</div>
<div class="w--medium">80px width</div>
<div class="w--large">96px width</div>
<div class="w--xlarge">128px width</div>
<div class="w--xxlarge">256px width</div>Special Width Values
Use w--full for full width or
w--auto for automatic width.
Size
Special Widths
<div class="w--full">Full width</div>
<div class="w--auto">Auto width</div>Height Utilities
Control element heights using the same scale as widths:
Fixed Heights
Use h--{size} with the same size options as widths.
Size
Fixed Heights
<div class="h--xxsmall">32px height</div>
<div class="h--xsmall">48px height</div>
<div class="h--small">64px height</div>
<div class="h--medium">80px height</div>
<div class="h--large">96px height</div>
<div class="h--xlarge">128px height</div>
<div class="h--xxlarge">256px height</div>Special Height Values
Use h--full for full height or
h--auto for automatic height.
Size
Special Heights
<div class="h--full">Full height</div>
<div class="h--auto">Auto height</div>