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

Select exampleDefaultShade VariantsNo-Shade VariantsOverlay-Full VariantsBox VariantsBox (Large) VariantsAutoplaying Video Hero

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>

Open Full Example

<div class="envelope-hero envelope-hero--video envelope-hero--text-bottom">
    <div class="envelope-hero__container">
        <div class="envelope-hero__photo iframe-container" style="--aspect-ratio-percent:34.52%;padding-bottom:34.52%;">
            <iframe frameborder="0" scrolling="no" src="https://player.vimeo.com/video/433684454?h=7fb29cd22c&background=1">&nbsp;</iframe>
        </div>
        <div class="envelope-hero__content">
            <h2 class="uo-text-size-fluid--5xl">
                <strong>Setting the Pace.</strong>
            </h2>
        </div>
    </div>
</div>

Guidance

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

• 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

• 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.

Autoplaying Videos

If you are using an autoplaying video for your hero banner, you should make the following adjustments.

• Add the envelope-hero--video class to the main envelope-hero component
• Add the iframe-container class to the envlope-hero-photo element
• Swap the image/media tag out for an iframe to your video source
• When using a custom aspect ratio, add the following to your envelope-hero__photo class: style=“—aspect-ratio-percent:34.52%;padding-bottom:34.52%;”

To adjust the aspect ratio for the video when using a custom aspect ratio, you first need to determine the “percentage” padding/size to adjust for that aspect ratio. This value can be gotten by dividing the video height from the video width and multiplying by 100. For example, if we had a video with the dimensions 2009x753, we would calculate 647 / 1874 and get ~.3452, multiply that and we get 34.52% for the “aspect-ratio-percent” and “padding-bottom” values in the photo envelope-hero__photo.

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

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

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

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
envelope-hero--video	Support autoplaying videos	Use when using autoplaying videos instead of an image for the hero background