Wrappers

Wrappers have specific widths to hold content blocks. Wrappers help organize content on a page to ensure a comfortable reading length.

Default

This is the default wrapper.

<div class="wrapper">
  <p>This is the default wrapper.</p>
</div>

Description

There are four wrapper sizes: small, medium, large, and extra large. Wrappers contain the content by constraining the content to a set width. The dotted lines are used as visual cues in the toolkit and will not appear in the product.

Small

Small wrapper

<div class="wrapper wrapper--small">
  <p>Small wrapper</p>
</div>

Medium

Medium wrapper

<div class="wrapper wrapper--medium">
  <p>Medium wrapper</p>
</div>

Large

Large wrapper

<div class="wrapper wrapper--large">
  <p>Large wrapper</p>
</div>

Extra large

X-Large wrapper

<div class="wrapper wrapper--x-large">
  <p>X-Large wrapper</p>
</div>

Usage

Do

  • Put smaller wrappers within larger wrappers
  • Be aware of the fixed-width constraints of the given wrapper

Don't

  • Put larger wrappers within smaller wrappers