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 |
|