Envelope

Envelopes are used to present full-width content for marketing oriented pages.

Examples and Code

Select example

<div class="envelope envelope--standard">
  <h2>A Standard Envelope</h2>
  <p>Here is some content inside this envelope.</p>
</div>
<div class=“envelope envelope—flush”>
<h2>A Flush Envelope</h2>
<p>Here is some content inside this envelope.</p>
</div>
<div class=“envelope envelope—narrow”>
<h2>A Narrow Envelope</h2>
<p>Here is some content inside this envelope.</p>
</div>
<div class=“envelope envelope—standard envelope—parallax palette-bg-uo-green bg-pattern-waves ”>
<h2>A Standard Parallax Envelope</h2>
<p>Here is some content inside this envelope.</p>
</div>

Usage

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.

Guidance

When to Use Envelopes

On marketing pages: Use envelopes for sections of marketing pages to break the page up

Usage Guidance

Make key envelopes stand out with color: Using background colors and patterns can help make key envelopes stand out and attract more attention.

Accessibility Guidance

Limit Parallax Backgrounds: Parallax motion can create distractions for many people, depending on its use these effects can cause seizures, migraines, nausea, and dizziness. Refer to the UO Accessibility Guidelines for Motion for more information.

Styles

Classname	Effect	Reason to Use
`envelope--standard`	Standard large padding on top, bottom, and sides	Use for standard content that does not need to be full-bleed
`envelope--flush`	No padding on top, bottom, or sides	Use for full-bleed photos, nested hero envelopes, and envelopes with custom spacing
`envelope--narrow`	Red background instead of transparent	Use to indicate “destructive” actions, such as deleting data

Modifier Classes

Classname	Effect	Reason to Use
`envelope--parallax`	Fixed background with parallax effect	Used to make the image reveal or move against the text