Gap
These utility classes set the space between items inside a flex or grid container. Pair them with a layout utility like cluster, stack, grid, or split to override that layout's default spacing, or apply wa-gap-* to any display: flex or display: grid element of your own to get the same tokens without writing custom CSS.
Every class besides wa-gap-0 corresponds to one of the --wa-space-* tokens in your theme, so the spacing you pick stays in sync with the rest of your design system.
Gap Classes
| Class Name | gap Value |
Preview |
|---|---|---|
wa-gap-0 |
0 |
|
wa-gap-3xs |
--wa-space-3xs |
|
wa-gap-2xs |
--wa-space-2xs |
|
wa-gap-xs |
--wa-space-xs |
|
wa-gap-s |
--wa-space-s |
|
wa-gap-m |
--wa-space-m |
|
wa-gap-l |
--wa-space-l |
|
wa-gap-xl |
--wa-space-xl |
|
wa-gap-2xl |
--wa-space-2xl |
|
wa-gap-3xl |
--wa-space-3xl |
|
wa-gap-4xl |
--wa-space-4xl |
|
wa-gap-5xl |
--wa-space-5xl |