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