Images and Videos

Stand-alone Images

Wide Image

Alt Text — Image Caption Title
Caption body. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea.
CTA: Read more

HTML

<figure class="image-figure">
    <img src="/Content/img/examples/page_image.jpg" alt="Alt Text">
    <cite>Image Credit</cite>
    <figcaption>
        <label>Image Caption Title</label>
        <p>Caption body. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea.</p>
        <a href="#">CTA: Read more</a>
    </figcaption>
</figure>

Documentation

Documentation coming soon!

Half-Column Image

HTML

<figure class="image-figure half-image-figure">
    <img src="/Content/img/examples/page_image.jpg" alt="Alt Text">
    <cite>Image Credit</cite>
    <figcaption>
        <label>Image Caption Title</label>
        <p>Caption body. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea.</p>
        <a href="#">CTA: Read more</a>
    </figcaption>
</figure>

Documentation

Documentation coming soon!

Flexbox Images

HTML

<div class="flex-placeholder">
    <figure class="image-figure">
        <img src="/Content/img/examples/page_image.jpg" alt="Alt Text">
        <cite>Image Credit</cite>
        <figcaption>
            <label>Image Caption Title</label>
            <p>Caption body. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea.</p>
            <a href="#">CTA: Read more</a>
        </figcaption>
    </figure>
    <figure class="image-figure">
        <img src="/Content/img/examples/page_image.jpg" alt="Alt Text">
        <cite>Image Credit</cite>
        <figcaption>
            <label>Image Caption Title</label>
            <p>Caption body. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea.</p>
            <a href="#">CTA: Read more</a>
        </figcaption>
    </figure>
    <figure class="image-figure">
        <img src="/Content/img/examples/page_image.jpg" alt="Alt Text">
        <cite>Image Credit</cite>
        <figcaption>
            <p>Caption body. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea.</p>
            <a href="#">CTA: Read more</a>
        </figcaption>
    </figure>
</div>

Problem Being Solved

We need to display one or more images.

When to Use

The image pattern should be used when the content includes an informational image.

When Not to Use

Images should not be used to display text. If the image is data-heavy or difficult to read, a text equivalent should be found. Because flexbox images display at half a column width (desktop breakpoint), they should not be used if the image is illegible at small sizes.

Formatting

To use flexbox images, add a container with class "flex-placeholder" around image "figure" elements.

Videos

Fall back image — Video Caption Title
Caption body. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea.
Read more

Read the Transcript

Transcript Title

[00:15]

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea.

[5:00]

HTML

<figure class="image-figure">
    <div class="video-container">
        <video data-account="1183701590001"
                data-player="default"
                data-embed="default"
                data-video-id="5565127928001"
                data-application-id
                class="video-js"
                controls
                style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; width: 100%; height: 100%;">
            <img src="/Content/img/examples/page_image.jpg" alt="Fall back image">
        </video>
        <script src="//players.brightcove.net/1183701590001/default_default/index.min.js"></script>
    </div>
    <figcaption>
        <label>Video Caption Title</label>
        <p>Caption body. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea.</p>
        <a href="#">Read more</a>
    </figcaption>
</figure>
<div id="accordion" class="panel-group">
    <noscript>
        <style>
            .collapse {
                display: block;
            }
        </style>
    </noscript>
    <div class="panel">
        <div class="panel-heading">
            <div class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" class="collapsed">Read the Transcript</a>
            </div>
        </div>
        <div id="collapseOne" class="panel-collapse collapse">
            <div class="panel-body">
                <div class="transcript">
                    <div class="transcript-title h5">Transcript Title</div>
                </div>
                <p><strong>[00:15]</strong></p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea.</p>
                <p><strong>[5:00]</strong></p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea.</p>
            </div>
        </div>
    </div>
</div>

Problem Being Solved

We need to display one or more videos.

When to Use

Videos should be used when the content includes an informational or marketing video.

When Not to Use

If videos are part of a series, consider asking for a Brightcove gallery to be created instead.

Formatting

Videos use the same figure element as images, just embed the video code instead of an image.
Use standard accordion code, with a transcript div inside the panel-body.

Bespoke Code Library

User Experience Team

Images and Videos

Stand-alone Images

Wide Image

HTML

Documentation

Half-Column Image

HTML

Documentation

Flexbox Images

HTML

Problem Being Solved

When to Use

When Not to Use

Formatting

Videos

HTML

Problem Being Solved

When to Use

When Not to Use

Formatting