The vertical space found between page content sections is usually much larger than the spacing found inside a component. This is why we take two different approaches to spacing.

We use classes to add different amounts of vertical space to the top and bottom of sections. First we need to declare the padding direction followed by the spacing amount.

Use these utility classes to increase and decrease layout spacing. For flexibility you can also apply breakpoint specific overrides.

When creating compact, small components apply spacing directly to that custom component class. This enables a high-level of control at different breakpoints and avoids class stacking.

Containers allow us to control the horizontal width of content. They also allow us to ensure there is always a consistent amount of horizontal padding on each side of the page.

‍

Use these container classes to apply a max-width value to your page content. You can stack this class on top of component classes or stand-alone.

Here’s an overview of the different units we use for layout and in what scenario they’re applied.