Story Blocks Envelope

Story blocks envelopes are a side-by-side display of two stories with photos, 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 feature prominent photography.

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

Examples and Code

Select example

Open Full Example

<div class="envelope-stories">
    <div class="envelope-stories__story">
        <div class="envelope-stories__photo">
            <img src="/test-image-landscape.jpg" height="540" width="1440" class="media-element file-default" alt="">
        </div>
        <div class="envelope-stories__content">
            <div class="envelope-stories__title">Stories Envelope Title</div>
            <div class="envelope-stories__body">Stories Envelope Body.</div>
            <a class="cta-button">Call to Action</a>
        </div>
    </div>
    <div class="envelope-stories__story">
        <div class="envelope-stories__photo">
            <img src="/test-image-landscape.jpg" height="540" width="1440" class="media-element file-default" alt="">
        </div>
        <div class="envelope-stories__content">
            <div class="envelope-stories__title">Stories Envelope Title</div>
            <div class="envelope-stories__body">Stories Envelope Body.</div>
            <a class="cta-button">Call to Action</a>
        </div>
    </div>
</div>

Open Full Example

<div class="envelope-stories envelope-stories--no-flush">
    <div class="envelope-stories__story">
        <div class="envelope-stories__photo">
            <img src="/test-image-landscape.jpg" height="540" width="1440" class="media-element file-default" alt="">
        </div>
        <div class="envelope-stories__content">
            <div class="envelope-stories__title">Stories Envelope Title</div>
            <div class="envelope-stories__body">Stories Envelope Body.</div>
            <a class="cta-button">Call to Action</a>
        </div>
    </div>
    <div class="envelope-stories__story">
        <div class="envelope-stories__photo">
            <img src="/test-image-landscape.jpg" height="540" width="1440" class="media-element file-default" alt="">
        </div>
        <div class="envelope-stories__content">
            <div class="envelope-stories__title">Stories Envelope Title</div>
            <div class="envelope-stories__body">Stories Envelope Body.</div>
            <a class="cta-button">Call to Action</a>
        </div>
    </div>
</div>

Open Full Example

<div class="envelope-stories envelope-stories--no-green">
    <div class="envelope-stories__story">
        <div class="envelope-stories__photo">
            <img src="/test-image-landscape.jpg" height="540" width="1440" class="media-element file-default" alt="">
        </div>
        <div class="envelope-stories__content">
            <div class="envelope-stories__title">Stories Envelope Title</div>
            <div class="envelope-stories__body">Stories Envelope Body.</div>
            <a class="cta-button">Call to Action</a>
        </div>
    </div>
    <div class="envelope-stories__story">
        <div class="envelope-stories__photo">
            <img src="/test-image-landscape.jpg" height="540" width="1440" class="media-element file-default" alt="">
        </div>
        <div class="envelope-stories__content">
            <div class="envelope-stories__title">Stories Envelope Title</div>
            <div class="envelope-stories__body">Stories Envelope Body.</div>
            <a class="cta-button">Call to Action</a>
        </div>
    </div>
</div>

Guidance

When to Use Stories Envelopes

Right after Hero Envelopes: Stories envelopes work well to show the 2nd and 3rd most important stories after the hero envelope.

When to Consider Another Component

For a single focus: Stories envelopes are meant to show off two items, for a single focused item, use a Hero Envelope or Feature Envelope.

Usage Guidance

Use in full-width content: Story blocks are designed to be used in full-width content, they will not display correctly otherwise. When using on marketing pages, make sure they are in envelope--flush envelopes.
Avoid using bright white images: The text contrast for the white text will likely not display well over bright white imagery.
Avoid long text for titles and teasers: Story envelopes have a limited amount of text space based on their image size. Keep the titles and teasers short to ensure they display well.

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.
Ensure Proper Text Display Across Screen Sizes: The Stories Envelope has only so much space for text, make sure your text displays correctly regardless of window/screen width and browser zoom level.

Elements

Element	Description	Usage	Required	Multiple
Story	The story container	Limit to one story per container	Yes	Yes
Photo	The story photo	Use a clear, square image	Yes	No
Title	The story title	Limit to a short sentence	Yes	No

Modifiers

Classname	Effect	Reason to Use
`envelope-stories--no-flush`	The stories have padding between them	Use when the block does not match the surrounding content well with the flush style
`envelope-stories--no-green`	Left story will not have green tint	Use if your stories subject shows a face or will not work well with the green overlay