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. We follow the same method originally introduced by Client-First. First we need to set a padding or margin direction followed by the spacing amount. For example .padding-vertical .padding-xhuge.

Sometimes when creating compact and small components it's best to 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.