Cmpnts

Menu

Layout

Wrapper

Centres content, caps its width and keeps it off the screen edge.

This card sits in a wrapper capped at 24rem and centred.

Code
HTML
<div class="wrapper wrapper--sm">
  <div class="card">
    <p class="text">This card sits in a wrapper capped at 24rem and centred.</p>
  </div>
</div>

Why it exists

A page needs its content kept off the screen edge and lined up from top to bottom. That’s one job, so it’s one element, and pages don’t each invent a width.

The cap applies to the content, not to the box with its gutters. That is why a wrapped page lines up with the Header and Footer bars at any width, and why a Wrapper inside a Wrapper doesn’t pad twice.

It holds a page’s content and nothing smaller. A Card that needs a narrower width takes a utility, because a Wrapper’s gutter would pad the Card.

When to use

  • For the content of a page, so that it lines up with the Header and footer bars.
  • For a Form or message centred on the screen, with --sm and --middle.
  • Not to cap a component: a Card, a Form or a Dialog’s content takes a max-inline-size-* utility.
  • Not for columns or panes: those are a grid or a split.

Rules

  • Not for components: to cap a Card, a Form or a Dialog’s content, use a max-inline-size-* utility (with mx-auto to centre it). A Wrapper’s gutter would pad the Card.
  • No doubled inset: a Wrapper inside a Wrapper has no gutter of its own, and a .main whose child is a Wrapper drops its own inline padding.
  • Don’t pad it. The gutter is already there: padding-inline utilities on a Wrapper double it.

A Page, or a Form Centred on the Screen

Both of these hold the page’s one <main>.

HTML
<main id="main" class="main">
  <div class="wrapper stack">
    <h1 class="heading">Shade-loving perennials</h1>
    <p class="text">…</p>
  </div>
</main>

<!-- A sign-in form centred on the screen -->
<main id="main" class="main">
  <div class="wrapper wrapper--sm wrapper--middle">
    <form class="card" aria-labelledby="sign-in">…</form>
  </div>
</main>

A Narrower Cap, to One Side

16rem, at the start

16rem, at the end

16rem, centred vertically

Code
HTML
<div class="wrapper wrapper--xs wrapper--start">
  <div class="card"><p class="text">16rem, at the start</p></div>
</div>

<div class="wrapper wrapper--xs wrapper--end">
  <div class="card"><p class="text">16rem, at the end</p></div>
</div>

<div class="wrapper wrapper--xs wrapper--middle min-block-size-2xs">
  <div class="card"><p class="text">16rem, centred vertically</p></div>
</div>

Do and Don’t

DoDon’t
Rely on the Wrapper’s own gutter.Add padding-inline utilities to it.
Cap a Card with max-inline-size-* and mx-auto.Put wrapper on a Card.
Set --wrapper-max-width to change the cap for a region.Give each page a width of its own.
Put a Wrapper directly in .main.Add inline padding to make up for a missing inset.

In Storybook

See also

  • App Shell: The page shell that places the Header, main and footer in rows, with side panes beside the main.
  • Header: The band at the top of a page or app, holding the Brand, the main navigation and global actions.
  • Footer: The band at the bottom of a page or app, with site links, legal text and contact details.
  • Stack, Inline and Cluster: One-dimensional flows that space their children in a column, a row or a wrapping row.
  • Utilities: Classes that set one property to one value on the element they are on.

Search the docs