An envelope is a full-bleed rectangular block. Envelopes are best used on a page made up of a number of envelopes (a marketing page) each highlighting a particular section, often for purposes of marketing and used on top-level pages of a website. (NOTE: These examples use alternating green and yellow backgrounds to better show how these envelopes look on a real page, the exact background colors, images, and patterns used can be customized for the envelopes on your page.)
Standard Envelope
Standard envelopes are the default envelope style, they have generous padding around the edges to highlight the content.
Standard Envelope
Standard envelopes often work well with the content centered as it makes the content feel more prominent.
<div class="envelope envelope--standard">
<h2>Standard Envelope</h2>
<p>Standard envelopes often work well with the content centered as it makes the content feel more prominent.</p>
</div>
Narrow Envelope
Narrow envelopes are similar to standard envelopes, but the padding is reduced to allow them to fit in more narrow spaces. A great use for narrow envelopes is for a small grid of "Call to Action" buttons for navigation.
<div class="envelope envelope--narrow">
<h2>Standard Envelope</h2>
<p>Standard envelopes often work well with the content centered as it makes the content feel more prominent.</p>
</div>
Flush Envelope
Flush envelopes are similar to standard envelopes, but they do not have any padding on the sides. Flush envelopes work best when they contain large images, other envelopes (such as "Hero Envelopes"), or with photo navigation, allowing the photos to cleanly stretch across the content.
<div class="envelope envelope--flush">
<h2>Standard Envelope</h2>
<p>Standard envelopes often work well with the content centered as it makes the content feel more prominent.</p>
</div>
Parallax Envelope
Parallax envelopes toggle the background so that it scrolls with the screen, giving it a "moving" effect. You can make an envelope parallax regardless of whether it has the "Standard", "Narrow", or "Flush" style. You can use multiple parallax envelopes in succession with crafted backgrounds to achieve unique "transition" effects between each envelope.
Parallax Envelope
Here is an example of a second parallax envelope with a "Chartreuse" background instead of "UO Yellow". Both envelopes have the same background pattern style, which makes the transition between the two envelopes more seamless.
<div class="envelope envelope--standard envelope--parallax">
<h2>Parallax Envelope</h2>
<p>Parallax envelopes toggle the background so that it scrolls with the screen, giving it a "moving" effect. You can make an envelope parallax regardless of whether it has the "Standard", "Narrow", or "Flush" style. You can use multiple parallax envelopes in succession with crafted backgrounds to achieve unique "transition" effects between each envelope.</p>
</div>
Where to use
Envelopes should be used on a marketing page or other content where it can expand to the full width of the window. Usually, each adjacent envelope should have a different background unless you need to use multiple envelopes in a row to convey the same bit of information.