Space properties are used intentionally throughout Web Awesome to create predictable rhythm and meaningful proximity. These properties use rem
units in order to scale proportionately with the root font size.
Each space property uses a calc()
function with --wa-space-scale
to scale all spacing at once. By default, this multiplier is 1
. The table below lists the result of the calculation.
Custom Property | Default Value | Preview |
---|---|---|
--wa-space-3xs |
0.125rem (2px) |
|
--wa-space-2xs |
0.25rem (4px) |
|
--wa-space-xs |
0.5rem (8px) |
|
--wa-space-s |
0.75rem (12px) |
|
--wa-space-m |
1rem (16px) |
|
--wa-space-l |
1.25rem (20px) |
|
--wa-space-xl |
1.5rem (24px) |
|
--wa-space-2xl |
2rem (32px) |
|
--wa-space-3xl |
3rem (48px) |
When using space properties, it may be helpful to consider three distinct groups:
3xs
, 2xs
, and xs
) can be used for gaps between cooperating elements, such as a dropdown button and its menu, and padding within small components, such as badges and tooltipss
, m
, and l
) can be used for gaps between related elements with distinct touch targets and padding within typical interface elements, such as buttons and inputsxl
, 2xl
, and 3xl
) can be used for gaps between unrelated elements and padding within larger components, such as cards and dialogs