News updates

The news updates pattern displays featured links including meta data in two columns. The pattern is intended for landing pages and provides a solution for linking to articles, such as news items or blog posts.

Rules for news updates

There must be only one news updates section on a page.
There must be a maximum of one category per article link.
Featured images must be 750 × 500 pixels.

Default

The default option contains a column for a featured news update and a column for two other updates.

Image for featured item must be 750 × 500 pixels.
Images for secondary items must be 360 × 240 pixels.

Example

New guide ranks St Andrews among UK’s best

This section of text should not exceed 220 characters. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetuor.

Date: 8 June 2018
Category: News at St Andrews

Grey seals copy human speech and music

Date: 9 June 2018
Category: News at St Andrews

Staff and students help St Andrews to league table first

Date: 10 June 2018
Category: News at St Andrews

Code

<div class="news-updates">
    <div class="container">
        <div class="row">
            <div class="col-md-7">
                <article class="news-updates__article-link">
                <div class="row">
                    <figure class="col-xs-12 col-sm-4 col-md-5">
                        <a href="#article" tabindex="-1"><img src="../../assets/docs/images/placeholders/750x500.png" alt="news story" class="news-updates__image"></a>
                    </figure>
                    <div class="col-xs-12 col-sm-8 col-md-7">
                        <h4 class="news-updates__heading"><a href="#article">New guide ranks St Andrews among UK’s best</a></h4>
                        <p>This section of text should not exceed 220 characters. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetuor.</p>
                        <dl class="metadata-list">
                            <dt class="sr-only">Date</dt><dd>8 June 2018</dd>
                            <dt class="sr-only">Category</dt><dd><a href="#" class="featured-news__category">News at St Andrews</a></dd>
                        </dl>  
                    </div>
                </div>
                </article>
            </div>
            <div class="col-md-5">
            <div class="row">
                <article class="col-xs-6 col-md-12 news-updates__secondary news-updates__article-link">
                    <div class="row">
                        <figure class="col-sm-5">
                            <a href="#article" tabindex="-1"><img src="../../assets/docs/images/placeholders/360x240.png" alt="news story" class="news-updates__image"></a>
                        </figure>
                        <div class="col-sm-7">
                            <h4 class="news-updates__heading news-updates__heading--small"><a href="#article">Grey seals copy human speech and music</a></h4>
                            <dl class="metadata-list">
                                <dt class="sr-only">Date</dt><dd class="metadata-list--full">9 June 2018</dd>
                                <dt class="sr-only">Category</dt><dd class="metadata-list--full"><a href="#" class="featured-news__category">News at St Andrews</a></dd>
                            </dl>  
                        </div>
                    </div>
                </article>
                <article class="col-xs-6 col-md-12 news-updates__secondary news-updates__article-link">
                    <div class="row">
                        <figure class="col-sm-5">
                            <a href="#article" tabindex="-1"><img src="../../assets/docs/images/placeholders/360x240.png" alt="news story" class="news-updates__image"></a>
                        </figure>
                        <div class="col-sm-7">
                            <h4 class="news-updates__heading news-updates__heading--small"><a href="#article">Staff and students help St Andrews to league table first</a></h4>
                            <dl class="metadata-list">
                                <dt class="sr-only">Date</dt><dd class="metadata-list--full">10 June 2018</dd>
                                <dt class="sr-only">Category</dt><dd class="metadata-list--full"><a href="#" class="featured-news__category">News at St Andrews</a></dd>
                            </dl>  
                        </div>
                    </div>
                </article>
            </div>
            </div>
        </div>
    </div>
</div>

Alternate layout

This option contains a column for a featured news update and a column for three other updates.

Image for featured item must be 750 × 500 pixels.
Images for secondary items must be 750 × 500 pixels.

Example

Medieval home of Lords of the Isles reconstructed

Date: 8 June 2018
Category: News at St Andrews

New guide ranks St Andrews among UK’s best

Date: 14 August 2018
Category: News at St Andrews

Grey seals copy human speech and music

Date: 12 August 2018
Category: News at St Andrews

Staff and students help St Andrews to league table first

Date: 12 August 2018

Code

<div class="news-updates">
    <div class="container">
        <div class="row">
            <div class="col-md-5 news-updates__article--featured">
                <article class="news-updates__article-link">
                <div class="row">
                    <figure class="col-xs-12 col-sm-4 col-md-12">
                    <a href="#article" tabindex="-1"><img src="../../assets/docs/images/placeholders/750x500.png" alt="news story" class="news-updates__image news-updates__image--featured"></a>
                    </figure>
                    <div class="col-xs-12 col-sm-8 col-md-12">
                    <h4 class="news-updates__heading news-updates__heading--large"><a href="#article">Medieval home of Lords of the Isles reconstructed</a></h4>
                    <p>This section of text should not exceed 220 characters. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetuor.</p>
                    <dl class="metadata-list">
                        <dt class="sr-only">Date</dt><dd>8 June 2018</dd>
                        <dt class="sr-only">Category</dt><dd><a href="#" class="featured-news__category">News at St Andrews</a></dd>
                    </dl>    
                </div>
                </div>
                </article>
            </div>
            <div class="col-md-7">
            <div class="row">
                <article class="col-xs-12 col-md-12 news-updates__secondary news-updates__article-link">
                    <div class="row">
                        <figure class="col-xs-12 col-sm-4">
                            <a href="#article" tabindex="-1"><img src="../../assets/docs/images/placeholders/750x500.png" alt="news story" class="news-updates__image"></a>
                        </figure>
                        <div class="col-xs-12 col-sm-8">
                            <h4 class="news-updates__heading"><a href="#article">New guide ranks St Andrews among UK’s best</a></h4>
                            <p>This section of text should not exceed 220 characters. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetuor.</p>
                            <dl class="metadata-list">
                                <dt class="sr-only">Date</dt><dd>14 August 2018</dd>
                                <dt class="sr-only">Category</dt><dd><a href="#" class="featured-news__category">News at St Andrews</a></dd>
                            </dl>  
                        </div>
                    </div>
                </article>
                <article class="col-xs-12 col-md-12 news-updates__secondary news-updates__article-link">
                    <div class="row">
                        <figure class="col-xs-12 col-sm-4">
                            <a href="#article" tabindex="-1"><img src="../../assets/docs/images/placeholders/750x500.png" alt="news story" class="news-updates__image"></a>
                        </figure>
                        <div class="col-xs-12 col-sm-8">
                            <h4 class="news-updates__heading"><a href="#article">Grey seals copy human speech and music</a></h4>
                            <p>This section of text should not exceed 220 characters. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetuor.</p>
                            <dl class="metadata-list">
                                <dt class="sr-only">Date</dt><dd>12 August 2018</dd>
                                <dt class="sr-only">Category</dt><dd><a href="#" class="featured-news__category">News at St Andrews</a></dd>
                            </dl>  
                        </div>
                    </div>
                </article>
                <article class="col-xs-12 col-md-12 news-updates__secondary news-updates__article-link">
                    <div class="row">
                        <figure class="col-xs-12 col-sm-4">
                            <a href="#article" tabindex="-1"><img src="../../assets/docs/images/placeholders/750x500.png" alt="news story" class="news-updates__image"></a>
                        </figure>
                        <div class="col-xs-12 col-sm-8">
                            <h4 class="news-updates__heading"><a href="#article">Staff and students help St Andrews to league table first</a></h4>
                            <p>This section of text should not exceed 220 characters. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetuor.</p>
                            <dl class="metadata-list">
                                <dt class="sr-only">Date</dt><dd>12 August 2018</dd>

                            </dl>  
                        </div>
                    </div>
                </article>
            </div>
            </div>
        </div>
    </div>
</div>

Aside only

Must only be used in the aside of a page.
Images must be 360 × 240 pixels.

Example

Code

<div class="news-updates">
    <div class="container">
        <div class="row">
            <div class="col-md-4 news-updates__aside">
            <div class="row">
                <article class="col-xs-6 col-md-12 news-updates__secondary news-updates__article-link">
                    <div class="row">
                        <figure class="col-sm-5">
                            <a href="#article" tabindex="-1"><img src="../../assets/docs/images/placeholders/360x240.png" alt="news story" class="news-updates__image"></a>
                        </figure>
                        <div class="col-sm-7">
                            <h4 class="news-updates__heading news-updates__heading--small"><a href="#article">Grey seals copy human speech and music</a></h4>
                            <dl class="metadata-list">
                                <dt class="sr-only">Date</dt><dd class="metadata-list--full">14 August 2018</dd>
                                <dt class="sr-only">Category</dt><dd class="metadata-list--full"><a href="#" class="featured-news__category">News at St Andrews</a></dd>
                            </dl>  
                        </div>
                    </div>
                </article>
                <article class="col-xs-6 col-md-12 news-updates__secondary news-updates__article-link">
                    <div class="row">
                        <figure class="col-sm-5">
                            <a href="#article" tabindex="-1"><img src="../../assets/docs/images/placeholders/360x240.png" alt="news story" class="news-updates__image"></a>
                        </figure>
                        <div class="col-sm-7">
                            <h4 class="news-updates__heading news-updates__heading--small"><a href="#article">Staff and students help St Andrews to league table first</a></h4>
                            <dl class="metadata-list">
                                <dt class="sr-only">Date</dt><dd class="metadata-list--full">12 August 2018</dd>

                            </dl>  
                        </div>
                    </div>
                </article>
            </div>
            </div>
        </div>
    </div>
</div>

Aside only - with no images

Must only be used in the aside of a page.

Example

Code

<div class="news-updates">
    <div class="container">
        <div class="row">
            <div class="col-md-4 news-updates__aside">
            <div class="row">
                <article class="col-xs-6 col-md-12 news-updates__secondary news-updates__article-link">
                    <div class="row">
                        <div class="col-xs-12">
                            <h4 class="news-updates__heading news-updates__heading--small"><a href="#article">Grey seals copy human speech and music</a></h4>
                            <dl class="metadata-list">
                                <dt class="sr-only">Date</dt><dd class="metadata-list--full">14 August 2018</dd>
                                <dt class="sr-only">Category</dt><dd class="metadata-list--full"><a href="#" class="featured-news__category">News at St Andrews</a></dd>
                            </dl>  
                        </div>
                    </div>
                </article>
                <article class="col-xs-6 col-md-12 news-updates__secondary news-updates__article-link">
                    <div class="row">
                        <div class="col-xs-12">
                            <h4 class="news-updates__heading news-updates__heading--small"><a href="#article">Staff and students help St Andrews to league table first</a></h4>
                            <dl class="metadata-list">
                                <dt class="sr-only">Date</dt><dd class="metadata-list--full">12 August 2018</dd>

                            </dl>  
                        </div>
                    </div>
                </article>
            </div>
            </div>
        </div>
    </div>
</div>