Hero Envelope
Hero envelopes are large content spotlights in envelope format with large text overlaying a wide photo. Hero envelopes are often used for top of the page spotlights for the most prominent news stories or marketing messages. Most pages will only use a single Hero, often in the topmost spot. Any text location (left/right) can be combined with any variant (base, shade, box). If you are adding the hero envelope to the marketing page, make sure that the “Envelope Type” is set to “flush” on the marketing page to allow the Hero Envelope to be full-bleed with the edge of the window.
This component has a UO Edit Suite template for easy use on Drupal Sites: How to use this template
This component requires full-screen display to display correctly, open the full example for a more accurate display.
Examples and Code
Section titled “Examples and Code”
Open Full Example
<div class="envelope-hero envelope-hero--text-left">
<div class="envelope-hero__container">
<div class="envelope-hero__photo">
<img src="/test-image-hero.jpg" height="540" width="1440" class="media-element file-default" alt="">
</div>
<div class="envelope-hero__content">
<div class="envelope-hero__content__title">Hero Envelope Text Left</div>
<div class="envelope-hero__content__body">Hero Envelope Body.</div>
<a class="cta-button">Call to Action</a>
</div>
</div>
</div>
<div class="envelope-hero envelope-hero--text-right">
<div class="envelope-hero__container">
<div class="envelope-hero__photo">
<img src="/test-image-hero.jpg" height="540" width="1440" class="media-element file-default" alt="">
</div>
<div class="envelope-hero__content">
<div class="envelope-hero__content__title">Hero Envelope Text Right</div>
<div class="envelope-hero__content__body">Hero Envelope Body.</div>
<a class="cta-button">Call to Action</a>
</div>
</div>
</div>
<div class="envelope-hero envelope-hero--text-top">
<div class="envelope-hero__container">
<div class="envelope-hero__photo">
<img src="/test-image-hero.jpg" height="540" width="1440" class="media-element file-default" alt="">
</div>
<div class="envelope-hero__content">
<div class="envelope-hero__content__title">Hero Envelope Text Top</div>
<div class="envelope-hero__content__body">Hero Envelope Body.</div>
<a class="cta-button">Call to Action</a>
</div>
</div>
</div>
<div class="envelope-hero envelope-hero--text-bottom">
<div class="envelope-hero__container">
<div class="envelope-hero__photo">
<img src="/test-image-hero.jpg" height="540" width="1440" class="media-element file-default" alt="">
</div>
<div class="envelope-hero__content">
<div class="envelope-hero__content__title">Hero Envelope Text Bottom</div>
<div class="envelope-hero__content__body">Hero Envelope Body.</div>
<a class="cta-button">Call to Action</a>
</div>
</div>
</div>
<div class="envelope-hero envelope-hero--no-text">
<div class="envelope-hero__container">
<div class="envelope-hero__photo">
<img src="/test-image-hero.jpg" height="540" width="1440" class="media-element file-default" alt="">
</div>
<div class="envelope-hero__content">
<div class="envelope-hero__content__title">Hero Envelope Text Bottom</div>
<div class="envelope-hero__content__body">Hero Envelope Body.</div>
<a class="cta-button">Call to Action</a>
</div>
</div>
</div>
Open Full Example
<div class="envelope-hero envelope-hero--text-left envelope-hero--shade">
<div class="envelope-hero__container">
<div class="envelope-hero__photo">
<img src="/test-image-hero.jpg" height="540" width="1440" class="media-element file-default" alt="">
</div>
<div class="envelope-hero__content">
<div class="envelope-hero__content__title">Hero Envelope Text Left</div>
<div class="envelope-hero__content__body">Hero Envelope Body.</div>
<a class="cta-button">Call to Action</a>
</div>
</div>
</div>
<div class="envelope-hero envelope-hero--text-right envelope-hero--shade">
<div class="envelope-hero__container">
<div class="envelope-hero__photo">
<img src="/test-image-hero.jpg" height="540" width="1440" class="media-element file-default" alt="">
</div>
<div class="envelope-hero__content">
<div class="envelope-hero__content__title">Hero Envelope Text Right</div>
<div class="envelope-hero__content__body">Hero Envelope Body.</div>
<a class="cta-button">Call to Action</a>
</div>
</div>
</div>
<div class="envelope-hero envelope-hero--text-top envelope-hero--shade">
<div class="envelope-hero__container">
<div class="envelope-hero__photo">
<img src="/test-image-hero.jpg" height="540" width="1440" class="media-element file-default" alt="">
</div>
<div class="envelope-hero__content">
<div class="envelope-hero__content__title">Hero Envelope Text Top</div>
<div class="envelope-hero__content__body">Hero Envelope Body.</div>
<a class="cta-button">Call to Action</a>
</div>
</div>
</div>
<div class="envelope-hero envelope-hero--text-bottom envelope-hero--shade">
<div class="envelope-hero__container">
<div class="envelope-hero__photo">
<img src="/test-image-hero.jpg" height="540" width="1440" class="media-element file-default" alt="">
</div>
<div class="envelope-hero__content">
<div class="envelope-hero__content__title">Hero Envelope Text Bottom</div>
<div class="envelope-hero__content__body">Hero Envelope Body.</div>
<a class="cta-button">Call to Action</a>
</div>
</div>
</div>
Open Full Example
<div class="envelope-hero envelope-hero--text-left envelope-hero--no-shade">
<div class="envelope-hero__container">
<div class="envelope-hero__photo">
<img src="/test-image-hero.jpg" height="540" width="1440" class="media-element file-default" alt="">
</div>
<div class="envelope-hero__content">
<div class="envelope-hero__content__title">Hero Envelope Text Left</div>
<div class="envelope-hero__content__body">Hero Envelope Body.</div>
<a class="cta-button">Call to Action</a>
</div>
</div>
</div>
<div class="envelope-hero envelope-hero--text-right envelope-hero--no-shade">
<div class="envelope-hero__container">
<div class="envelope-hero__photo">
<img src="/test-image-hero.jpg" height="540" width="1440" class="media-element file-default" alt="">
</div>
<div class="envelope-hero__content">
<div class="envelope-hero__content__title">Hero Envelope Text Right</div>
<div class="envelope-hero__content__body">Hero Envelope Body.</div>
<a class="cta-button">Call to Action</a>
</div>
</div>
</div>
<div class="envelope-hero envelope-hero--text-top envelope-hero--no-shade">
<div class="envelope-hero__container">
<div class="envelope-hero__photo">
<img src="/test-image-hero.jpg" height="540" width="1440" class="media-element file-default" alt="">
</div>
<div class="envelope-hero__content">
<div class="envelope-hero__content__title">Hero Envelope Text Top</div>
<div class="envelope-hero__content__body">Hero Envelope Body.</div>
<a class="cta-button">Call to Action</a>
</div>
</div>
</div>
<div class="envelope-hero envelope-hero--text-bottom envelope-hero--no-shade">
<div class="envelope-hero__container">
<div class="envelope-hero__photo">
<img src="/test-image-hero.jpg" height="540" width="1440" class="media-element file-default" alt="">
</div>
<div class="envelope-hero__content">
<div class="envelope-hero__content__title">Hero Envelope Text Bottom</div>
<div class="envelope-hero__content__body">Hero Envelope Body.</div>
<a class="cta-button">Call to Action</a>
</div>
</div>
</div>
Open Full Example
<div class="envelope-hero envelope-hero--text-left envelope-hero--overlay--full">
<div class="envelope-hero__container">
<div class="envelope-hero__photo">
<img src="/test-image-hero.jpg" height="540" width="1440" class="media-element file-default" alt="">
</div>
<div class="envelope-hero__content">
<div class="envelope-hero__content__title">Hero Envelope Text Left</div>
<div class="envelope-hero__content__body">Hero Envelope Body.</div>
<a class="cta-button">Call to Action</a>
</div>
</div>
</div>
<div class="envelope-hero envelope-hero--text-right envelope-hero--overlay--full">
<div class="envelope-hero__container">
<div class="envelope-hero__photo">
<img src="/test-image-hero.jpg" height="540" width="1440" class="media-element file-default" alt="">
</div>
<div class="envelope-hero__content">
<div class="envelope-hero__content__title">Hero Envelope Text Right</div>
<div class="envelope-hero__content__body">Hero Envelope Body.</div>
<a class="cta-button">Call to Action</a>
</div>
</div>
</div>
<div class="envelope-hero envelope-hero--text-top envelope-hero--overlay--full">
<div class="envelope-hero__container">
<div class="envelope-hero__photo">
<img src="/test-image-hero.jpg" height="540" width="1440" class="media-element file-default" alt="">
</div>
<div class="envelope-hero__content">
<div class="envelope-hero__content__title">Hero Envelope Text Top</div>
<div class="envelope-hero__content__body">Hero Envelope Body.</div>
<a class="cta-button">Call to Action</a>
</div>
</div>
</div>
<div class="envelope-hero envelope-hero--text-bottom envelope-hero--overlay--full">
<div class="envelope-hero__container">
<div class="envelope-hero__photo">
<img src="/test-image-hero.jpg" height="540" width="1440" class="media-element file-default" alt="">
</div>
<div class="envelope-hero__content">
<div class="envelope-hero__content__title">Hero Envelope Text Bottom</div>
<div class="envelope-hero__content__body">Hero Envelope Body.</div>
<a class="cta-button">Call to Action</a>
</div>
</div>
</div>
Open Full Example
<div class="envelope-hero envelope-hero--text-left envelope-hero--box">
<div class="envelope-hero__container">
<div class="envelope-hero__photo">
<img src="/test-image-hero.jpg" height="540" width="1440" class="media-element file-default" alt="">
</div>
<div class="envelope-hero__content">
<div class="envelope-hero__content__title">Hero Envelope Text Left</div>
<div class="envelope-hero__content__body">Hero Envelope Body.</div>
<a class="cta-button">Call to Action</a>
</div>
</div>
</div>
<div class="envelope-hero envelope-hero--text-right envelope-hero--box">
<div class="envelope-hero__container">
<div class="envelope-hero__photo">
<img src="/test-image-hero.jpg" height="540" width="1440" class="media-element file-default" alt="">
</div>
<div class="envelope-hero__content">
<div class="envelope-hero__content__title">Hero Envelope Text Right</div>
<div class="envelope-hero__content__body">Hero Envelope Body.</div>
<a class="cta-button">Call to Action</a>
</div>
</div>
</div>
<div class="envelope-hero envelope-hero--text-top envelope-hero--box">
<div class="envelope-hero__container">
<div class="envelope-hero__photo">
<img src="/test-image-hero.jpg" height="540" width="1440" class="media-element file-default" alt="">
</div>
<div class="envelope-hero__content">
<div class="envelope-hero__content__title">Hero Envelope Text Top</div>
<div class="envelope-hero__content__body">Hero Envelope Body.</div>
<a class="cta-button">Call to Action</a>
</div>
</div>
</div>
<div class="envelope-hero envelope-hero--text-bottom envelope-hero--box">
<div class="envelope-hero__container">
<div class="envelope-hero__photo">
<img src="/test-image-hero.jpg" height="540" width="1440" class="media-element file-default" alt="">
</div>
<div class="envelope-hero__content">
<div class="envelope-hero__content__title">Hero Envelope Text Bottom</div>
<div class="envelope-hero__content__body">Hero Envelope Body.</div>
<a class="cta-button">Call to Action</a>
</div>
</div>
</div>
Open Full Example
<div class="envelope-hero envelope-hero--text-left envelope-hero--box-large">
<div class="envelope-hero__container">
<div class="envelope-hero__photo">
<img src="/test-image-hero.jpg" height="540" width="1440" class="media-element file-default" alt="">
</div>
<div class="envelope-hero__content">
<div class="envelope-hero__content__title">Hero Envelope Text Left</div>
<div class="envelope-hero__content__body">Hero Envelope Body.</div>
<a class="cta-button">Call to Action</a>
</div>
</div>
</div>
<div class="envelope-hero envelope-hero--text-right envelope-hero--box-large">
<div class="envelope-hero__container">
<div class="envelope-hero__photo">
<img src="/test-image-hero.jpg" height="540" width="1440" class="media-element file-default" alt="">
</div>
<div class="envelope-hero__content">
<div class="envelope-hero__content__title">Hero Envelope Text Right</div>
<div class="envelope-hero__content__body">Hero Envelope Body.</div>
<a class="cta-button">Call to Action</a>
</div>
</div>
</div>
<div class="envelope-hero envelope-hero--text-top envelope-hero--box-large">
<div class="envelope-hero__container">
<div class="envelope-hero__photo">
<img src="/test-image-hero.jpg" height="540" width="1440" class="media-element file-default" alt="">
</div>
<div class="envelope-hero__content">
<div class="envelope-hero__content__title">Hero Envelope Text Top</div>
<div class="envelope-hero__content__body">Hero Envelope Body.</div>
<a class="cta-button">Call to Action</a>
</div>
</div>
</div>
<div class="envelope-hero envelope-hero--text-bottom envelope-hero--box-large">
<div class="envelope-hero__container">
<div class="envelope-hero__photo">
<img src="/test-image-hero.jpg" height="540" width="1440" class="media-element file-default" alt="">
</div>
<div class="envelope-hero__content">
<div class="envelope-hero__content__title">Hero Envelope Text Bottom</div>
<div class="envelope-hero__content__body">Hero Envelope Body.</div>
<a class="cta-button">Call to Action</a>
</div>
</div>
</div>Guidance
Section titled “Guidance”When to Use Hero Envelopes
Section titled “When to Use Hero Envelopes”- For lead envelope: Hero envelopes work best as the first envelope on a marketing page, sometimes they work well at the very bottom of a page, but generally you want to use the hero as the topmost element.
When to Consider Another Component
Section titled “When to Consider Another Component”- For non-main marketing goals of the page: For the non-lead goal/message, you should use a Feature Envelope or Story Blocks envelopes instead.
Usage Guidance
Section titled “Usage Guidance”- Limit to one hero per page: Multiple hero envelopes on a page can make the focus of the page unclear, it should be reserved for the main goal/message of the page.
Accessibility Guidance
Section titled “Accessibility Guidance”- Ensure Text Contrast: Ensure that the photo is dark enough that the text over the photo has sufficient contrast.
- Ensure Proper Heading Levels: Hero Envelopes Use H2 level headings in the template defaults. Ensure this is the correct heading level to use when adding them to the page, and adjust as needed. If the page title is in the hero on an interior page it should be the H1.
Elements
Section titled “Elements”| Element | Description | Usage | Required | Multiple |
|---|---|---|---|---|
| Photo | The Hero photo | Use a clear, landscape image | Yes | No |
| Content | The contained text to be left/right/top/bottom aligned | Keep simple with a title, teaser, and optional call-to-action | Yes | No |
| Title | The hero title | Keep limited to a small sentence | No | No |
| Body | The hero teaser | Limit to a few sentences | No | No |
Styles
Section titled “Styles”| Classname | Effect | Reason to Use |
|---|---|---|
Default Style (no class) | Text in the center of the photo | Use if there is no clear subject or it spans the whole photo |
envelope-hero--text-left | Text on the left side of the hero | Use if the photo’s subject is on the right |
envelope-hero--text-right | Text on the right side of the hero | Use if the photo’s subject is on the left |
envelope-hero--text-top | Text on the top of the hero | Use if the hero is tall and the subject is at the bottom |
envelope-hero--text-bottom | Text on the bottom of the hero | Use if the hero is tall and the subject is at the top |
envelope-hero--no-text | No Text over photo | Use for full-width immersive photos where you want the ‘echo’ pillarboxing effect |
Alternative Styles
Section titled “Alternative Styles”| Classname | Effect | Reason to Use |
|---|---|---|
Default Style (no class) | Gradient shade over the text content | Use for standard heros |
envelope-hero--shade | Background as a shade instead of a gradient | Use if paired with feature envelopes or other left/right aligned content envelopes |
envelope-hero--no-shade | No shade or gradient behind text | Use if the photo is very dark or already has a tint applied and provides proper color contrast for the text on its own |
envelope-hero--overlay--full | Full image is shaded | Use if consistency in the darkness/lightness image is desired |
envelope-hero--box | Text is in a small container with a shade just around the text | Use if the hero content is very small and compact |
envelope-hero--box-large | Text is in a medium-sized container with a shade just around the text |