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, 1rem);


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.


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