Story Blocks Envelopes
A feature envelope is a two item side-by-side display of photos with titles, summaries, and buttons. Story blocks envelopes are used for secondary spotlight stories (usually a lead story that has been replaced by a new lead) that features prominent photography. If you are using a story block 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. Story block envelopes fit best immediately after a hero envelope, with the hero envelope providing the lead story and the story blocks providing the second and third most prominent stories.
Default Styling
By default the story blocks template has a green overlay on the left story photo and has both stories flush with one another.
<div class="envelope-stories">
<div class="envelope-stories__story">
<div class="envelope-stories__photo">
<img src="/image.jpg" alt="Test Image" />
</div>
<div class="envelope-stories__content">
<div class="envelope-stories__title">Story Blocks Envelope</div>
<div class="envelope-stories__body">
<p>Story blocks envelopes show the left item with a green shade by default.</p>
</div>
<p><a class="cta-button" href="http://www.uoregon.edu">Call to Action</a></p>
</div>
</div>
<div class="envelope-stories__story">
<div class="envelope-stories__photo">
<img src="/image.jpg" alt="Test Image" />
</div>
<div class="envelope-stories__content">
<div class="envelope-stories__title">Feature Envelope (Default Styling)</div>
<div class="envelope-stories__body">
<p>Story blocks envelopes always show .</p>
</div>
<p><a class="cta-button" href="http://www.uoregon.edu">Call to Action</a></p>
</div>
</div>
</div>
Envelope Stories (No Green)
The "envelope-stories--no-green" option disables the green overlay on the left story photo.
<div class="envelope-stories envelope-stories--no-green">
<div class="envelope-stories__story">
<div class="envelope-stories__photo">
<img src="/image.jpg" alt="Test Image" />
</div>
<div class="envelope-stories__content">
<div class="envelope-stories__title">Story Blocks Envelope</div>
<div class="envelope-stories__body">
<p>Story blocks envelopes show the left item with a green shade by default.</p>
</div>
<p><a class="cta-button" href="http://www.uoregon.edu">Call to Action</a></p>
</div>
</div>
<div class="envelope-stories__story">
<div class="envelope-stories__photo">
<img src="/image.jpg" alt="Test Image" />
</div>
<div class="envelope-stories__content">
<div class="envelope-stories__title">Feature Envelope (Default Styling)</div>
<div class="envelope-stories__body">
<p>Story blocks envelopes always show .</p>
</div>
<p><a class="cta-button" href="http://www.uoregon.edu">Call to Action</a></p>
</div>
</div>
</div>
Envelope Stories (No Flush)
The "envelope-stories--no-flush" option adds a space between the two stories.
<div class="envelope-stories envelope-stories--no-flush">
<div class="envelope-stories__story">
<div class="envelope-stories__photo">
<img src="/image.jpg" alt="Test Image" />
</div>
<div class="envelope-stories__content">
<div class="envelope-stories__title">Story Blocks Envelope</div>
<div class="envelope-stories__body">
<p>Story blocks envelopes show the left item with a green shade by default.</p>
</div>
<p><a class="cta-button" href="http://www.uoregon.edu">Call to Action</a></p>
</div>
</div>
<div class="envelope-stories__story">
<div class="envelope-stories__photo">
<img src="/image.jpg" alt="Test Image" />
</div>
<div class="envelope-stories__content">
<div class="envelope-stories__title">Feature Envelope (Default Styling)</div>
<div class="envelope-stories__body">
<p>Story blocks envelopes always show .</p>
</div>
<p><a class="cta-button" href="http://www.uoregon.edu">Call to Action</a></p>
</div>
</div>
</div>
Tips for using Story Blocks Envelopes
- Pair story blocks envelopes with hero envelopes when possible. The story blocks envelope is designed to be used in conjunction with the hero envelope. They work best with a lead story in a hero envelope and the secondary and tertiary stories following in the story blocks.
- Avoid bright white images. While the shade should help the text stand out, the white text can be hard to read due to low contrast when the image is mostly bright white.
- Avoid overly long body copy. The size of the block is limited by the overall height of the background image. Excessively long body text could expand past the container of the block and look awkward or hard to read on mobile devices. Always make sure to shrink your browser window to ensure the text stays within the block even on narrow window/device sizes.