Feature Envelopes - Examples and Code

Feature Envelopes

A feature envelope is a full-bleed rectangular block with a flush photo on one side. Feature envelopes are used for spotlight pieces often highlighting a person or a topic that features prominent photography. If you are using a feature envelope on a marketing page (inside of an envelope), make sure that envelope is using the envelope--flush style so that the feature envelope's image can be full-bleed. (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
Feature Envelope (Default Styling)

Feature envelopes have text on the right by default. They contain a "Call to Action" button, but it can be removed if you do not need it as part of your content.

Call to Action

<div class="envelope-feature envelope-feature--text-right">
  <div class="envelope-feature__container">
    <div class="envelope-feature__photo">
      <img src="/image.jpg" alt="Test Image" />
    </div>
    <div class="envelope-feature__content">
      <div class="envelope-feature__content__title">Feature Envelope (Default Styling)</div>
        <div class="envelope-feature__content__body">
          <p>Feature envelopes have text on the right by default. They contain a "Call to Action" button, but it can be removed if you do not need it as part of your content.</p>
          <p><a class="cta-button" href="http://www.uoregon.edu">Call to Action</a></p>
        </div>
      </div>
    </div>
  </div>
Knight Campus bridge over Franklin Boulevard
Feature Envelope (Text Left)

Feature envelopes can have text on the left by changing the feature-envelope--text-right class to feature-envelope--text-left. They contain a "Call to Action" button, but it can be removed if you do not need it as part of your content.

Call to Action

<div class="envelope-feature envelope-feature--text-left">
  <div class="envelope-feature__container">
    <div class="envelope-feature__photo">
      <img src="/image.jpg" alt="Test Image" />
    </div>
    <div class="envelope-feature__content">
      <div class="envelope-feature__content__title">Feature Envelope (Text Left)</div>
        <div class="envelope-feature__content__body">
          <p>Feature envelopes can have text on the left by changing the feature-envelope--text-right class to feature-envelope--text-left. They contain a "Call to Action" button, but it can be removed if you do not need it as part of your content.</p>
          <p><a class="cta-button" href="http://www.uoregon.edu">Call to Action</a></p>
        </div>
      </div>
    </div>
  </div>