Spacing

Utility classes are available to add margin and padding on any element.

All the pre-defined values listed below can be applied to all four sides of an element. With more specific classes, it can also be applied to top/bottom only or left/right. If required, specific values can also be applied to each individual side.

Overflow properties can be defined for specific breakpoints, using mobile-first approach. See the syntax below.

Syntax

The BEM class syntax is the following (breakpoint and variant are optional):

Pre-defined values

Always try to use a value from the list below, even if it differs slightly from the designs provided.

Remove

<div class="ui-margin--none">...</div>
<div class="ui-padding--none">...</div>

All 4 sides

<div class="ui-margin--sm">...</div>
<div class="ui-padding--sm">...</div>

Individual side

<div class="ui-margin--top--xxs">...</div>
<div class="ui-margin--right--xs">...</div>
<div class="ui-margin--bottom--sm">...</div>
<div class="ui-margin--left--md">...</div>

Breakpoints

In the examples above, the properties are set by default for all breakpoints, but this can be defined for specific breakpoints. For example:

<!-- "ui-padding--xxl" XXL padding applied to all breakpoints unless overridden -->
<div class="ui-padding--xxl">...</div>

<!-- "ui-padding--large--lg" LG padding applied from "large" breakpoint and up -->
<div class="ui-padding--xxl ui-padding--large--lg">...</div>

<!-- "ui-padding--xlarge--top--xxs" XXS applied from "xlarge" breakpoint and up -->
<div class="ui-padding--xxl ui-padding--large--lg ui-padding--xlarge--top--xxs">...</div>