Feature Envelope

Feature envelopes are full-bleed rectangular blocks with a flush photo on one side. Feature envelopes are used for spotlight pieces often highlighting a person, story, or topic that features prominent photography. If you are using a feature envelope on a marketing page (inside of an envelope component), make sure that envelope is using the envelope—flush style so that the feature envelope’s image can be full-bleed.

This component has a UO Edit Suite template for easy use on Drupal Sites: How to use this template

Examples and Code

Select exampleLeft and Right TextTop and Bottom Text

Open Full Example

<div class="envelope-feature envelope-feature--text-left">
  <div class="envelope-feature__container">
      <div class="envelope-feature__photo"><img src="/test-image-landscape.jpg" alt="Test Image" /></div>
      <div class="envelope-feature__content">
          <h2 class="envelope-feature__content__title">Feature Envelope (Text Left)</h2>
          <div class="envelope-feature__content__body">Feature Envelope Text</div>
          <div class="cta-button">Call to Action</div>
      </div>
  </div>
</div>
<div class="envelope-feature envelope-feature--text-right">
  <div class="envelope-feature__container">
      <div class="envelope-feature__photo"><img src="/test-image-landscape.jpg" alt="Test Image" /></div>
      <div class="envelope-feature__content">
          <h2 class="envelope-feature__content__title">Feature Envelope (Text Right)</h2>
          <div class="envelope-feature__content__body">Feature Envelope Text</div>
          <div class="cta-button">Call to Action</div>
      </div>
  </div>
</div>

Open Full Example

<div class="envelope-feature envelope-feature--text-top context--foreground-light">
  <div class="envelope-feature__container">
      <div class="envelope-feature__photo"><img src="/test-image-landscape.jpg" alt="Test Image" /></div>
      <div class="envelope-feature__content">
          <div class="envelope-feature__content__title">Feature Envelope (Text Top)</div>
          <div class="envelope-feature__content__body">Feature Envelope Text</div>
          <div class="cta-button">Call to Action</div>
      </div>
  </div>
</div>
<div class="envelope-feature envelope-feature--text-bottom context--foreground-light">
  <div class="envelope-feature__container">
      <div class="envelope-feature__photo"><img src="/test-image-landscape.jpg" alt="Test Image" /></div>
      <div class="envelope-feature__content">
          <div class="envelope-feature__content__title">Feature Envelope (Text Bottom)</div>
          <div class="envelope-feature__content__body">Feature Envelope Text</div>
          <div class="cta-button">Call to Action</div>
      </div>
  </div>
</div>

Guidance

Usage Guidance

• Alternate feature envelopes for styling: Using a left feature envelope followed by a right can give a nice back-and-forth styling to a page.
• Don’t use feature envelope classes outside of feature envelopes: Using these classes for styling outside of a feature envelope can result in unintended behavior and side effects.

Accessibility Guidance

• Ensure Text Contrast: When using the envelope-feature--text-top or envelope-feature--text-bottom styles, ensure that the photo is dark enough that the text over the photo has sufficient contrast.
• Ensure Proper Heading Levels: Feature 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.

Elements

Element	Description	Usage	Required	Multiple
Photo	The featured photo	Use a clear, portrait subject such as a person for left/right styles and a landscape/wide image for top/bottom styles	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 feature title	Keep limited to a small sentence	No	No
Body	The feature teaser	Limit to a few sentences	No	No

Styles

Classname	Effect	Reason to Use
envelope-feature--text-left	Standard form, text on the left, photo on the right	Use for standard content highlights if the photo works well on the right
envelope-feature--text-right	Standard form, text on the right, photo on the left	Use for standard content highlights if the photo works well on the left
envelope-feature--text-top	Alternate form, text over photo with gradient, pinned to top	Use for tall envelopes as an alternative to hero styles when the photo calls for it
envelope-feature--text-bottom	Alternate form, text over photo with gradient, pinned to bottom	Use for tall envelopes as an alternative to hero styles when the photo calls for it

Modifier Classes

Classname	Effect	Reason to Use
envelope-feature--noshade	Disables gradient behind text on top or bottom styles	Use when the photo is very dark or has its own shade/overlay applied, if there is sufficient contrast