Featured media

This pattern is for displaying featured content that includes media such as an image, YouTube video or SoundCloud audio file. There are also specifc patterns for using images, videos and audio as inline content.

Rules for featured media

Can only be used on a full width page layout.
Images must be sized 750 × 500 pixels when positioned to the right or left.
Videos and audio must only be positioned in the centre.
Transcripts should be included for each video or audio embed. Find out more information on transcripts and captioning.
The featured media item may benefit from a caption explaining it in further detail.
The white background can be replaced by a solid coloured background.
If using an optional coloured background, all text and links must be white and links must be underlined.
The heading may be linked.
A button can be used to feature a prominent call-to-action.

Helper classes

CSS classes for positioning the image alongside the text on larger displays

Image on left: featured-media--left
Image on right: featured-media--right

CSS classes for approved background colours

Blue: featured-media--sta-blue
Grey: sta-grey-light

Options available

Featured media with image
Featured media with blue background
Centred image with caption
Video with transcript
Blue background and video
Audio with transcript
Featured media with video to the side - deprecated

Featured media with image

This example includes a button to promote a prominent call-to-action and a caption for the image.

Example

This is the heading of the section

Nulla viverra justo vitae erat lobortis, eu consectetur risus faucibus. Nulla non enim nec eros congue eleifend. Quisque vel aliquet sapien. Duis ultricies dictum justo, et convallis nulla lacinia eget. Etiam magna mauris, pellentesque ut ornare vel, commodo et lacus. Integer rutrum non nulla sed consequat.

Etiam tincidunt vel quam id rhoncus. Suspendisse et justo at mauris tempor ornare. Ut pulvinar condimentum felis accumsan egestas. Nunc bibendum tincidunt magna, a mattis mi tincidunt nec. Ut nunc est, scelerisque in imperdiet at, maximus ut nulla. Mauris sollicitudin dui quis ante dapibus, vel tempus tellus tempor.

Call to action

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque hendrerit neque et tincidunt.

Code

<!-- Begin pattern: featured media //-->
<div class="featured-media__wrapper">
    <div class="featured-media featured-media--right">
       <div class="featured-media__text">
            <h2 class="featured-media__heading">This is the heading of the section</h2>
            <p>Nulla viverra justo vitae erat lobortis, eu consectetur risus faucibus. Nulla non enim nec eros congue eleifend. Quisque vel aliquet sapien. Duis ultricies dictum justo, et convallis nulla lacinia eget. Etiam magna mauris, pellentesque ut ornare vel, commodo et lacus. Integer rutrum non nulla sed consequat.</p><p>Etiam tincidunt vel quam id rhoncus. Suspendisse et justo at mauris tempor ornare. Ut pulvinar condimentum felis accumsan egestas. Nunc bibendum tincidunt magna, a mattis mi tincidunt nec. Ut nunc est, scelerisque in imperdiet at, maximus ut nulla. Mauris sollicitudin dui quis ante dapibus, vel tempus tellus tempor.</p>
            <p><a class="btn btn-action" href="#">Call to action</a></p>
        </div>
        <div class="featured-media__media">
            <figure class="featured-media__media-wrapper">
                <img src="../../assets/docs/images/placeholders/750x500.png" />
                <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque hendrerit neque et tincidunt.</figcaption>
            </figure>
        </div>
    </div>
</div>
<!-- End pattern: featured media //-->

Featured media with blue background

This example has a blue background with the featured image placed on the left.

Example

This is the heading of the section

Call to action

Code

<!-- Begin pattern: featured media //-->
<div class="featured-media__wrapper featured-media--background featured-media--sta-blue">
    <div class="featured-media featured-media--left">
       <div class="featured-media__text">
            <h2 class="featured-media__heading">This is the heading of the section</h2>
            <p>Nulla viverra justo vitae erat lobortis, eu consectetur risus faucibus. Nulla non enim nec eros congue eleifend. Quisque vel aliquet sapien. Duis ultricies dictum justo, et convallis nulla lacinia eget. Etiam magna mauris, pellentesque ut ornare vel, commodo et lacus. Integer rutrum non nulla sed consequat.</p><p>Etiam tincidunt vel quam id rhoncus. Suspendisse et justo at mauris tempor ornare. Ut pulvinar condimentum felis accumsan egestas. Nunc bibendum tincidunt magna, a mattis mi tincidunt nec. Ut nunc est, scelerisque in imperdiet at, maximus ut nulla. Mauris sollicitudin dui quis ante dapibus, vel tempus tellus tempor.</p>
            <p><a class="btn btn-action" href="#">Call to action</a></p>
        </div>
        <div class="featured-media__media">
            <figure class="featured-media__media-wrapper">
                <img src="../../assets/docs/images/placeholders/750x500.png" />
                <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque hendrerit neque et tincidunt.</figcaption>
            </figure>
        </div>
    </div>
</div>
<!-- End pattern: featured media //-->

Centred image with caption

If a preferred side is not specified then the media is placed in the centre.

Example

What's bad about being good?

Research at St Andrews explores effective altruism, a rapidly growing social movement which encourages us to do the most good we can with the money and time available.

Code

<!-- Begin pattern: featured media //-->
<div class="featured-media__wrapper">
    <div class="featured-media container">
       <div class="featured-media__text">
            <h2 class="featured-media__heading">What&#x27;s bad about being good?</h2>
            <p>Research at St Andrews explores effective altruism, a rapidly growing social movement which encourages us to do the most good we can with the money and time available.</p>
        </div>
        <div class="featured-media__media">
            <figure class="featured-media__media-wrapper">
                <img src="../../assets/docs/images/placeholders/750x500.png" />
                <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque hendrerit neque et tincidunt.</figcaption>
            </figure>
        </div>
    </div>
</div>
<!-- End pattern: featured media //-->

Video with transcript

Videos must always appear centred with a transcript included for accessibility. A title should also be added to the iframe to assist users of screen reader software.

Example

This is an interesting video

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque hendrerit neque et tincidunt.

Video transcript

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac rutrum tellus, quis porttitor urna. Donec ultricies libero erat, id efficitur risus blandit nec. Donec et ipsum in dui blandit rutrum. Praesent rhoncus lobortis ligula, viverra tincidunt ante lobortis at. Sed vehicula luctus quam sit amet lacinia. Sed eu nulla vel ex tempus accumsan in sit amet metus. Vestibulum a venenatis mi. Ut ac semper arcu.

Morbi pellentesque, mauris nec porta laoreet, neque magna tempor eros, eget suscipit tellus purus nec ligula. In accumsan turpis eu porttitor tempus. Praesent rutrum quam id felis consequat, et mattis elit laoreet. Nunc maximus, dui vitae tincidunt elementum, elit tortor mattis quam, ut sodales arcu lectus eu nisi. Phasellus tincidunt at risus nec fringilla. Nunc ultricies nisl sodales, vestibulum nunc in, vulputate nisl. Vestibulum lacinia auctor hendrerit. Sed in lectus dapibus, volutpat justo vel, pellentesque ipsum. Vivamus vitae metus euismod, vestibulum odio eu, elementum quam.

Code

<!-- Begin pattern: featured media //-->
<div class="featured-media__wrapper">
    <div class="featured-media container">
       <div class="featured-media__text">
            <h2 class="featured-media__heading">This is an interesting video</h2>
        </div>
        <div class="featured-media__media">
            <figure class="featured-media__media-wrapper">
                <div class='embed-responsive embed-responsive-16by9 youtube-embed'><iframe title='Heading goes in here (video)' src='https://www.youtube.com/embed/JxHfSwpddCU' allowfullscreen=''></iframe></div>
                <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque hendrerit neque et tincidunt.</figcaption>
                <!-- Begin pattern: accordion //-->
                <div class="accordion-item">
                    <div class="accordion-item__toggle">
                        <div class="accordion-item__toggle-title">
                            <button class="accordion-item__toggle-button" aria-expanded="false">Video transcript</button>
                        </div>
                    </div>
                    <div class="accordion-item__content" aria-hidden="true"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac rutrum tellus, quis porttitor urna. Donec ultricies libero erat, id efficitur risus blandit nec. Donec et ipsum in dui blandit rutrum. Praesent rhoncus lobortis ligula, viverra tincidunt ante lobortis at. Sed vehicula luctus quam sit amet lacinia. Sed eu nulla vel ex tempus accumsan in sit amet metus. Vestibulum a venenatis mi. Ut ac semper arcu.</p><p>Morbi pellentesque, mauris nec porta laoreet, neque magna tempor eros, eget suscipit tellus purus nec ligula. In accumsan turpis eu porttitor tempus. Praesent rutrum quam id felis consequat, et mattis elit laoreet. Nunc maximus, dui vitae tincidunt elementum, elit tortor mattis quam, ut sodales arcu lectus eu nisi. Phasellus tincidunt at risus nec fringilla. Nunc ultricies nisl sodales, vestibulum nunc in, vulputate nisl. Vestibulum lacinia auctor hendrerit. Sed in lectus dapibus, volutpat justo vel, pellentesque ipsum. Vivamus vitae metus euismod, vestibulum odio eu, elementum quam.</p>
                    </div>
                </div>
                <!-- End pattern: accordion //-->
            </figure>
        </div>
    </div>
</div>
<!-- End pattern: featured media //-->

Blue background and video

This example includes a linked heading.

Example

What's bad about being good?

Research at St Andrews explores effective altruism, a rapidly growing social movement which encourages us to do the most good we can with the money and time available.

Video transcript

Code

<!-- Begin pattern: featured media //-->
<div class="featured-media__wrapper featured-media--background featured-media--sta-blue">
    <div class="featured-media container">
       <div class="featured-media__text">
            <h2 class="featured-media__heading"><a href="#">What&#x27;s bad about being good?</a></h2>
            <p>Research at St Andrews explores effective altruism, a rapidly growing social movement which encourages us to do the most good we can with the money and time available.</p>
        </div>
        <div class="featured-media__media">
            <figure class="featured-media__media-wrapper">
                <div class='embed-responsive embed-responsive-16by9 youtube-embed'><iframe title='Heading goes in here (video)' class='embed-responsive-item' src='https://www.youtube-nocookie.com/embed/JxHfSwpddCU'></iframe></div>
                <!-- Begin pattern: accordion //-->
                <div class="accordion-item">
                    <div class="accordion-item__toggle">
                        <div class="accordion-item__toggle-title">
                            <button class="accordion-item__toggle-button" aria-expanded="false">Video transcript</button>
                        </div>
                    </div>
                    <div class="accordion-item__content" aria-hidden="true"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac rutrum tellus, quis porttitor urna. Donec ultricies libero erat, id efficitur risus blandit nec. Donec et ipsum in dui blandit rutrum. Praesent rhoncus lobortis ligula, viverra tincidunt ante lobortis at. Sed vehicula luctus quam sit amet lacinia. Sed eu nulla vel ex tempus accumsan in sit amet metus. Vestibulum a venenatis mi. Ut ac semper arcu.</p><p>Morbi pellentesque, mauris nec porta laoreet, neque magna tempor eros, eget suscipit tellus purus nec ligula. In accumsan turpis eu porttitor tempus. Praesent rutrum quam id felis consequat, et mattis elit laoreet. Nunc maximus, dui vitae tincidunt elementum, elit tortor mattis quam, ut sodales arcu lectus eu nisi. Phasellus tincidunt at risus nec fringilla. Nunc ultricies nisl sodales, vestibulum nunc in, vulputate nisl. Vestibulum lacinia auctor hendrerit. Sed in lectus dapibus, volutpat justo vel, pellentesque ipsum. Vivamus vitae metus euismod, vestibulum odio eu, elementum quam.</p>
                    </div>
                </div>
                <!-- End pattern: accordion //-->
            </figure>
        </div>
    </div>
</div>
<!-- End pattern: featured media //-->

Audio with transcript

Audio must always appear centred with a transcript included for accessibility. A title should also be added to the iframe to assist users of screen reader software. This example is shown on a light grey background.

Example

Poet Don Paterson talks about his book Reading Shakespeare's Sonnets and reads from the sonnets.

Audio transcript

Code

<!-- Begin pattern: featured media //-->
<div class="featured-media__wrapper sta-grey-light">
    <div class="featured-media container">
       <div class="featured-media__text">
            <h2 class="featured-media__heading"></h2>
        </div>
        <div class="featured-media__media">
            <figure class="featured-media__media-wrapper">
                <div class='embed-responsive-item'><iframe width='100%' height='166' scrolling='no' frameborder='no' allow='autoplay' title='Don Paterson Sonnets (Audio)'' src='https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/129623338&color=%230071b3&auto_play=false&hide_related=true&show_comments=false&show_user=true&show_reposts=false&show_teaser=false'></iframe></div>
                <figcaption>Poet Don Paterson talks about his book Reading Shakespeare's Sonnets and reads from the sonnets.</figcaption>
                <!-- Begin pattern: accordion //-->
                <div class="accordion-item">
                    <div class="accordion-item__toggle">
                        <div class="accordion-item__toggle-title">
                            <button class="accordion-item__toggle-button" aria-expanded="false">Audio transcript</button>
                        </div>
                    </div>
                    <div class="accordion-item__content" aria-hidden="true"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac rutrum tellus, quis porttitor urna. Donec ultricies libero erat, id efficitur risus blandit nec. Donec et ipsum in dui blandit rutrum. Praesent rhoncus lobortis ligula, viverra tincidunt ante lobortis at. Sed vehicula luctus quam sit amet lacinia. Sed eu nulla vel ex tempus accumsan in sit amet metus. Vestibulum a venenatis mi. Ut ac semper arcu.</p><p>Morbi pellentesque, mauris nec porta laoreet, neque magna tempor eros, eget suscipit tellus purus nec ligula. In accumsan turpis eu porttitor tempus. Praesent rutrum quam id felis consequat, et mattis elit laoreet. Nunc maximus, dui vitae tincidunt elementum, elit tortor mattis quam, ut sodales arcu lectus eu nisi. Phasellus tincidunt at risus nec fringilla. Nunc ultricies nisl sodales, vestibulum nunc in, vulputate nisl. Vestibulum lacinia auctor hendrerit. Sed in lectus dapibus, volutpat justo vel, pellentesque ipsum. Vivamus vitae metus euismod, vestibulum odio eu, elementum quam.</p>
                    </div>
                </div>
                <!-- End pattern: accordion //-->
            </figure>
        </div>
    </div>
</div>
<!-- End pattern: featured media //-->

Featured media with video to the side - deprecated

This option is no longer supported

This implementation is deprecated and will be removed in a future version of the digital pattern library. Videos must be placed centrally to allow space for transcript.

Example

This is the heading of the section

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque hendrerit neque et tincidunt.

Video transcript

Code

<!-- Begin pattern: featured media //-->
<div class="featured-media__wrapper">
    <div class="featured-media featured-media--left">
       <div class="featured-media__text">
            <h2 class="featured-media__heading"><a href="#">This is the heading of the section</a></h2>
            <p>Nulla viverra justo vitae erat lobortis, eu consectetur risus faucibus. Nulla non enim nec eros congue eleifend. Quisque vel aliquet sapien. Duis ultricies dictum justo, et convallis nulla lacinia eget. Etiam magna mauris, pellentesque ut ornare vel, commodo et lacus. Integer rutrum non nulla sed consequat.</p><p>Etiam tincidunt vel quam id rhoncus. Suspendisse et justo at mauris tempor ornare. Ut pulvinar condimentum felis accumsan egestas. Nunc bibendum tincidunt magna, a mattis mi tincidunt nec. Ut nunc est, scelerisque in imperdiet at, maximus ut nulla. Mauris sollicitudin dui quis ante dapibus, vel tempus tellus tempor.</p>
        </div>
        <div class="featured-media__media">
            <figure class="featured-media__media-wrapper">
                <div class='embed-responsive embed-responsive-16by9 youtube-embed'><iframe title='Heading goes in here (video)' class='embed-responsive-item' src='https://www.youtube-nocookie.com/embed/pscNTzAGVnk'></iframe></div>
                <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque hendrerit neque et tincidunt.</figcaption>
                <!-- Begin pattern: accordion //-->
                <div class="accordion-item">
                    <div class="accordion-item__toggle">
                        <div class="accordion-item__toggle-title">
                            <button class="accordion-item__toggle-button" aria-expanded="false">Video transcript</button>
                        </div>
                    </div>
                    <div class="accordion-item__content" aria-hidden="true"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac rutrum tellus, quis porttitor urna. Donec ultricies libero erat, id efficitur risus blandit nec. Donec et ipsum in dui blandit rutrum. Praesent rhoncus lobortis ligula, viverra tincidunt ante lobortis at. Sed vehicula luctus quam sit amet lacinia. Sed eu nulla vel ex tempus accumsan in sit amet metus. Vestibulum a venenatis mi. Ut ac semper arcu.</p><p>Morbi pellentesque, mauris nec porta laoreet, neque magna tempor eros, eget suscipit tellus purus nec ligula. In accumsan turpis eu porttitor tempus. Praesent rutrum quam id felis consequat, et mattis elit laoreet. Nunc maximus, dui vitae tincidunt elementum, elit tortor mattis quam, ut sodales arcu lectus eu nisi. Phasellus tincidunt at risus nec fringilla. Nunc ultricies nisl sodales, vestibulum nunc in, vulputate nisl. Vestibulum lacinia auctor hendrerit. Sed in lectus dapibus, volutpat justo vel, pellentesque ipsum. Vivamus vitae metus euismod, vestibulum odio eu, elementum quam.</p>
                    </div>
                </div>
                <!-- End pattern: accordion //-->
            </figure>
        </div>
    </div>
</div>
<!-- End pattern: featured media //-->