Hero Envelopes

A hero envelope is a large content spotlight 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 new 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. (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.)

Knight Campus bridge over Franklin Boulevard

Hero Envelope Text Center (Default)

Hero Envelope Text

Call to Action

<div class="envelope-hero">
  <div class="envelope-hero__container">
    <div class="envelope-hero__photo">
      <img src="/image.jpg" alt="Test Image" />
    </div>
    <div class="envelope-hero__content">
      <div class="envelope-hero__content__title">Hero Envelope Text Center (Default)</div>
        <div class="envelope-hero__content__body">
          <p>Hero Envelope Text.</p>
          <p><a class="cta-button" href="http://www.uoregon.edu">Call to Action</a></p>
        </div>
      </div>
    </div>
  </div>