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-multiplier 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 tooltips
s, 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
inputs
xl, 2xl, and 3xl) can be used for gaps between
unrelated elements and padding within larger components, such as cards and dialogs