Wrapper Utility

Our wrapper utility is constructed as follows:

.wrapper {
width: 100%;
margin: 0 auto;
max-width: var(--wrapper-max-width, 80rem);
padding: 0 var(--wrapper-padding, var(--size-400));
}

Purpose

The wrapper utility is a common utility used for container a site to a max width. Quite often certain designs contain multiple widths, so multiple wrappers may be needed.

Example

<div class="wrapper wrapper--short"></div>
.wrapper--short {
--wrapper-max-width: 48rem;
--wrapper-padding: 2rem;
}