More news

This pattern is no longer supported

This pattern is deprecated and will be removed in a future version of the digital pattern library. Please refer to the article list pattern for the correct method.

The more news pattern is for showing a list of news articles or blog posts that provide links to the full article. These are previous posts or articles that are not featured items.

Rules for more news

There must be a thumbnail image. Use a placeholder if an image is not available.
The description must be no more than 220 characters.
Thumbnail image must be 360px by 240px.
If there are more than ten items on a page, then the page must use pager pagination.
On small screen widths the description text is removed, this can be overridden by adding the class publication alongside the more-news__description class.

Single

This option is no longer supported

This implementation is now deprecated and will be removed in a future release.

Example of how an article should be set out, with the description overridden to show at all screen widths.

Example

News story title

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.

7 February 2017News at St Andrews

Code

<!-- Begin pattern: more-news //-->
<div class="more-news__link">
    <div class="more-news__image">
        <a href="#article"><img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="../../assets/docs/images/placeholders/360x240.png" alt="News story title" class="lazyload"></a>
    </div>
    <div class="more-news__snippet">
        <h3 class="more-news__heading"><a href="#article">News story title</a></h3>
        <p class="more-news__description publication">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>
        <small>7 February 2017<span class="more-news__category more-news__category--inline more-news__sub-link"><a href="#category">News at St Andrews</a></span></small>
    </div>
</div>
<!-- End pattern: more-news //-->

Multiple

This option is no longer supported

This implementation is now deprecated and will be removed in a future release.

Example of more than 10 articles on a page.

Example

<!-- Begin pattern: more-news //-->
<div class="more-news__link">
    <div class="more-news__image">
        <a href="#article"><img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="../../assets/docs/images/placeholders/360x240.png" alt="New URL shortening service" class="lazyload"></a>
    </div>
    <div class="more-news__snippet">
        <h3 class="more-news__heading"><a href="#article">New URL shortening service</a></h3>
        <p class="more-news__description">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>
        <small>6 February 2017<span class="more-news__category more-news__category--inline more-news__sub-link"><a href="#category">Articles and resources</a></span></small>
    </div>
</div>
<div class="more-news__link">
    <div class="more-news__image">
        <a href="#article"><img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="../../assets/docs/images/placeholders/360x240.png" alt="How to conduct usability testing" class="lazyload"></a>
    </div>
    <div class="more-news__snippet">
        <h3 class="more-news__heading"><a href="#article">How to conduct usability testing</a></h3>
        <p class="more-news__description">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>
        <small>24 October 2016<span class="more-news__category more-news__category--inline more-news__sub-link"><a href="#category">Guides</a></span></small>
    </div>
</div>
<div class="more-news__link">
    <div class="more-news__image">
        <a href="#article"><img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="../../assets/docs/images/placeholders/360x240.png" alt="How to use Track Changes in Word" class="lazyload"></a>
    </div>
    <div class="more-news__snippet">
        <h3 class="more-news__heading"><a href="#article">How to use Track Changes in Word</a></h3>
        <p class="more-news__description">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>
        <small>10 February 2017<span class="more-news__category more-news__category--inline more-news__sub-link"><a href="#category">Guides</a></span></small>
    </div>
</div>
<div class="more-news__link">
    <div class="more-news__image">
        <a href="#article"><img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="../../assets/docs/images/placeholders/360x240.png" alt="New URL shortening service" class="lazyload"></a>
    </div>
    <div class="more-news__snippet">
        <h3 class="more-news__heading"><a href="#article">New URL shortening service</a></h3>
        <p class="more-news__description">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>
        <small>6 February 2017<span class="more-news__category more-news__category--inline more-news__sub-link"><a href="#category">Articles and resources</a></span></small>
    </div>
</div>
<div class="more-news__link">
    <div class="more-news__image">
        <a href="#article"><img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="../../assets/docs/images/placeholders/360x240.png" alt="How to conduct usability testing" class="lazyload"></a>
    </div>
    <div class="more-news__snippet">
        <h3 class="more-news__heading"><a href="#article">How to conduct usability testing</a></h3>
        <p class="more-news__description">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>
        <small>24 October 2016<span class="more-news__category more-news__category--inline more-news__sub-link"><a href="#category">Guides</a></span></small>
    </div>
</div>
<div class="more-news__link">
    <div class="more-news__image">
        <a href="#article"><img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="../../assets/docs/images/placeholders/360x240.png" alt="How to use Track Changes in Word" class="lazyload"></a>
    </div>
    <div class="more-news__snippet">
        <h3 class="more-news__heading"><a href="#article">How to use Track Changes in Word</a></h3>
        <p class="more-news__description">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>
        <small>10 February 2017<span class="more-news__category more-news__category--inline more-news__sub-link"><a href="#category">Guides</a></span></small>
    </div>
</div>
<div class="more-news__link">
    <div class="more-news__image">
        <a href="#article"><img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="../../assets/docs/images/placeholders/360x240.png" alt="New URL shortening service" class="lazyload"></a>
    </div>
    <div class="more-news__snippet">
        <h3 class="more-news__heading"><a href="#article">New URL shortening service</a></h3>
        <p class="more-news__description">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>
        <small>6 February 2017<span class="more-news__category more-news__category--inline more-news__sub-link"><a href="#category">Articles and resources</a></span></small>
    </div>
</div>
<div class="more-news__link">
    <div class="more-news__image">
        <a href="#article"><img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="../../assets/docs/images/placeholders/360x240.png" alt="How to conduct usability testing" class="lazyload"></a>
    </div>
    <div class="more-news__snippet">
        <h3 class="more-news__heading"><a href="#article">How to conduct usability testing</a></h3>
        <p class="more-news__description">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>
        <small>24 October 2016<span class="more-news__category more-news__category--inline more-news__sub-link"><a href="#category">Guides</a></span></small>
    </div>
</div>
<div class="more-news__link">
    <div class="more-news__image">
        <a href="#article"><img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="../../assets/docs/images/placeholders/360x240.png" alt="How to use Track Changes in Word" class="lazyload"></a>
    </div>
    <div class="more-news__snippet">
        <h3 class="more-news__heading"><a href="#article">How to use Track Changes in Word</a></h3>
        <p class="more-news__description">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>
        <small>10 February 2017<span class="more-news__category more-news__category--inline more-news__sub-link"><a href="#category">Guides</a></span></small>
    </div>
</div>
<div class="more-news__link">
    <div class="more-news__image">
        <a href="#article"><img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="../../assets/docs/images/placeholders/360x240.png" alt="How to use Track Changes in Word" class="lazyload"></a>
    </div>
    <div class="more-news__snippet">
        <h3 class="more-news__heading"><a href="#article">How to use Track Changes in Word</a></h3>
        <p class="more-news__description">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>
        <small>10 February 2017<span class="more-news__category more-news__category--inline more-news__sub-link"><a href="#category">Guides</a></span></small>
    </div>
</div>
<nav aria-label="Multiple">
    <ul class="pager">
        <li><a href="#" role="button">Previous</a></li>
        <li><a href="#" role="button">Next</a></li>
    </ul>
</nav>
<!-- End pattern: more-news //-->