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

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

750 by 500px place holder image
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" alt="750 by 500px place holder image" />
                <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque hendrerit neque et tincidunt.</figcaption>
            </figure>
        </div>
    </div>
</div>
<!-- End pattern: featured media //-->

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

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

750 by 500px place holder imagee
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque hendrerit neque et tincidunt.
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. <a href='#'>Nulla non enim</a> 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" alt="750 by 500px place holder imagee" />
                <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.

750 by 500px place holder image
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 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" alt="750 by 500px place holder image" />
                <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque hendrerit neque et tincidunt.</figcaption>
            </figure>
        </div>
    </div>
</div>
<!-- End pattern: featured media //-->

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

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 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.
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 //-->

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

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.

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