Featured news

Featured news is used to promote a particular item such as a blog post, news article or story at the top of the page.

Rules for featured news

  • The title must be no more than 125 characters.
  • The description must be no more than 220 characters.
  • The image must be 750 × 500 pixels.
  • Should have an associated category link.

Options available

Top article

Example
Code 
<!-- Begin pattern: featured news //-->
<div class="featured-news margin-top margin-bottom--half">
    <div class="container">
        <div class="row">
            <article class="col-xs-12 featured-news__article-link">
                <div class="row">
                    <figure class="col-sm-5 col-sm-push-7">
                        <a href="#article" tabindex="-1"><img class="featured-news__image" src="../../assets/docs/images/placeholders/750x500.png" alt="news story"></a>
                    </figure>
                    <div class="col-sm-7 col-sm-pull-5">
                        <h2 class="featured-news__article-heading"><a href="#article">Lorem ipsum dolor sit amet consectetur adipiscing elit</a></h2>
                        <p class="lead">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 December 2017</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>
</div>
<!-- End pattern: featured news //-->