Spacing

Examples

An element with standard spacing (40px)

An element with tight spacing (Half: 20px)

An element with loose spacing (Double: 80px)

Guidelines

Spacing relates to both padding and margin of elements.

There are 3 levels of spacing that we've defined. These are standard (40px), tight (standard / 2, 20px) and loose (standard x 2, 80px).

Different levels of spacing can be applied to every side of an element.

Note: The standard spacing size can be updated in the web toolkit by updating the $hc-spacing-unit setting (base module).

Code

...
...
...
...
...
...
...
...