Gap #
The aFP Design System provides utility classes that control the gap property for both flex and grid containers. These can be combined with other layout tools, such as cluster or stack, to adjust spacing between elements, but they also work on their own. Each of these classes applies display: flex with zero specificity, making it easy to override when needed.
Classes #
In addition to afp-gap-0, which removes all spacing, every other class maps directly to one of the --afp-space-* tokens defined in your theme.
| Class | Value | Preview |
|---|---|---|
afp-gap-0 |
0 |
|
afp-gap-3xs |
--afp-space-3xs |
|
afp-gap-2xs |
--afp-space-2xs |
|
afp-gap-xs |
--afp-space-xs |
|
afp-gap-s |
--afp-space-s |
|
afp-gap-m |
--afp-space-m |
|
afp-gap-l |
--afp-space-l |
|
afp-gap-xl |
--afp-space-xl |
|
afp-gap-2xl |
--afp-space-2xl |
|
afp-gap-3xl |
--afp-space-3xl |
|
afp-gap-4xl |
--afp-space-4xl |