HUB Design System includes classes to set the gap property of flex and grid containers. They
can be used alongside other HUB Design System layout utilities.
HUB Design System includes classes to set the gap property of flex and grid containers. They
can be used alongside other HUB Design System layout utilities, like
cluster and stack, to change
the space between items. Or even by themselves — all gap properties also set
display: flex with a specificity of 0 so that it can be trivially overridden.
Gap is a set of layout utility classes to help you organize content that can adapt to any device or screen size.
| Class Name | gap Value |
Preview |
|---|---|---|
hds-gap-0 |
0 |
|
hds-gap-xs |
--hds-space-1x |
|
hds-gap-sm |
--hds-space-2x |
|
hds-gap-base |
--hds-space-3x |
|
hds-gap-lg |
--hds-space-5x |
|
hds-gap-xl |
--hds-space-10x |
|