Images and Videos

Example: Stand-alone Images

Alt Text
Image Credit

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

Code

HTML

<figure class="image-figure">
    <img src="/Content/img/examples/page_image.jpg" alt="Alt Text">
    <figcaption>
        <cite>Image Credit</cite>
        <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>
                

Example: Flexbox Images

Alt Text
Image Credit

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
Alt Text
Image Credit

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
Alt Text

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

Code

HTML

<div class="flex-placeholder">
    <figure class="image-figure">
        <img src="/Content/img/examples/page_image.jpg" alt="Alt Text">
        <figcaption>
            <cite>Image Credit</cite>
            <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">
        <figcaption>
            <cite>Image Credit</cite>
            <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">
        <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>
</div>
                

Documentation

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.

Example: Videos

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
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]

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.

Code

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>
                

Documentation

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.