University of St Andrews

More news

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 thumbnail image must always be positioned on the right.
• Thumbnail image must be 360px × 240px.
• There must not be more than 40 words in the excerpt and it must end with an ellipsis … (…).
• If there are more than ten items on a page, then the page must use pager pagination.

Options available

• Single
• Multiple

Single

<!-- Begin pattern: more-news //-->
<div class="container archive-page">
    <div class="row">
        <div class="col-xs-12">
            <div class="col-md-9 col-sm-6">
                <h3><a href="#">News story title</a></h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque adipisci id perspiciatis veniam magnam! Numquam incidunt placeat eos cum. Beatae perspiciatis officiis sint harum. …</p>
                <p>Tuesday 7 February 2017 | <a href="#">Category</a></p>
            </div>
            <div class="col-md-3 col-sm-6 news-image hidden-xs">
                <a href="#"><img width="360" height="240" src="../../assets/docs/images/placeholders/360x240.jpg" alt="Placeholder alt tag"></a>
            </div>
            <hr>
        </div>
    </div>
</div>
<!-- End pattern: more-news //-->

Multiple

<!-- Begin pattern: more-news //-->
<div class="container archive-page">
    <div class="row">
        <div class="col-xs-12">
            <div class="col-md-9 col-sm-6">
                <h3><a href="#">New URL shortening service</a></h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque adipisci id perspiciatis veniam magnam! Numquam incidunt placeat eos cum. Beatae perspiciatis officiis sint harum. …</p>
                <p>Monday 6 February 2017 | <a href="#">Articles and resources</a></p>
            </div>
            <div class="col-md-3 col-sm-6 news-image hidden-xs">
                <a href="#"><img width="360" height="240" src="../../assets/docs/images/placeholders/360x240.jpg" alt="Placeholder alt tag"></a>
            </div>
            <hr>
            <div class="col-md-9 col-sm-6">
                <h3><a href="#">How to conduct usability testing</a></h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque adipisci id perspiciatis veniam magnam! Numquam incidunt placeat eos cum. Beatae perspiciatis officiis sint harum. …</p>
                <p>Monday 24 October 2016 | <a href="#">Guides</a></p>
            </div>
            <div class="col-md-3 col-sm-6 news-image hidden-xs">
                <a href="#"><img width="360" height="240" src="../../assets/docs/images/placeholders/360x240-4.jpg" alt="Placeholder alt tag"></a>
            </div>
            <hr>
            <div class="col-md-9 col-sm-6">
                <h3><a href="#">How to use Track Changes in Word</a></h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque adipisci id perspiciatis veniam magnam! Numquam incidunt placeat eos cum. Beatae perspiciatis officiis sint harum. …</p>
                <p>Friday 10 February 2017 | <a href="#">Guides</a></p>
            </div>
            <div class="col-md-3 col-sm-6 news-image hidden-xs">
                <a href="#"><img width="360" height="240" src="../../assets/docs/images/placeholders/360x240-5.jpg" alt="Placeholder alt tag"></a>
            </div>
            <hr>
            <div class="col-md-9 col-sm-6">
                <h3><a href="#">New URL shortening service</a></h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque adipisci id perspiciatis veniam magnam! Numquam incidunt placeat eos cum. Beatae perspiciatis officiis sint harum. …</p>
                <p>Monday 6 February 2017 | <a href="#">Articles and resources</a></p>
            </div>
            <div class="col-md-3 col-sm-6 news-image hidden-xs">
                <a href="#"><img width="360" height="240" src="../../assets/docs/images/placeholders/360x240.jpg" alt="Placeholder alt tag"></a>
            </div>
            <hr>
            <div class="col-md-9 col-sm-6">
                <h3><a href="#">How to conduct usability testing</a></h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque adipisci id perspiciatis veniam magnam! Numquam incidunt placeat eos cum. Beatae perspiciatis officiis sint harum. …</p>
                <p>Monday 24 October 2016 | <a href="#">Guides</a></p>
            </div>
            <div class="col-md-3 col-sm-6 news-image hidden-xs">
                <a href="#"><img width="360" height="240" src="../../assets/docs/images/placeholders/360x240-4.jpg" alt="Placeholder alt tag"></a>
            </div>
            <hr>
            <div class="col-md-9 col-sm-6">
                <h3><a href="#">How to use Track Changes in Word</a></h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque adipisci id perspiciatis veniam magnam! Numquam incidunt placeat eos cum. Beatae perspiciatis officiis sint harum. …</p>
                <p>Friday 10 February 2017 | <a href="#">Guides</a></p>
            </div>
            <div class="col-md-3 col-sm-6 news-image hidden-xs">
                <a href="#"><img width="360" height="240" src="../../assets/docs/images/placeholders/360x240-5.jpg" alt="Placeholder alt tag"></a>
            </div>
            <hr>
            <div class="col-md-9 col-sm-6">
                <h3><a href="#">New URL shortening service</a></h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque adipisci id perspiciatis veniam magnam! Numquam incidunt placeat eos cum. Beatae perspiciatis officiis sint harum. …</p>
                <p>Monday 6 February 2017 | <a href="#">Articles and resources</a></p>
            </div>
            <div class="col-md-3 col-sm-6 news-image hidden-xs">
                <a href="#"><img width="360" height="240" src="../../assets/docs/images/placeholders/360x240.jpg" alt="Placeholder alt tag"></a>
            </div>
            <hr>
            <div class="col-md-9 col-sm-6">
                <h3><a href="#">How to conduct usability testing</a></h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque adipisci id perspiciatis veniam magnam! Numquam incidunt placeat eos cum. Beatae perspiciatis officiis sint harum. …</p>
                <p>Monday 24 October 2016 | <a href="#">Guides</a></p>
            </div>
            <div class="col-md-3 col-sm-6 news-image hidden-xs">
                <a href="#"><img width="360" height="240" src="../../assets/docs/images/placeholders/360x240-4.jpg" alt="Placeholder alt tag"></a>
            </div>
            <hr>
            <div class="col-md-9 col-sm-6">
                <h3><a href="#">How to use Track Changes in Word</a></h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque adipisci id perspiciatis veniam magnam! Numquam incidunt placeat eos cum. Beatae perspiciatis officiis sint harum. …</p>
                <p>Friday 10 February 2017 | <a href="#">Guides</a></p>
            </div>
            <div class="col-md-3 col-sm-6 news-image hidden-xs">
                <a href="#"><img width="360" height="240" src="../../assets/docs/images/placeholders/360x240-5.jpg" alt="Placeholder alt tag"></a>
            </div>
            <hr>
            <div class="col-md-9 col-sm-6">
                <h3><a href="#">How to use Track Changes in Word</a></h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque adipisci id perspiciatis veniam magnam! Numquam incidunt placeat eos cum. Beatae perspiciatis officiis sint harum. …</p>
                <p>Friday 10 February 2017 | <a href="#">Guides</a></p>
            </div>
            <div class="col-md-3 col-sm-6 news-image hidden-xs">
                <a href="#"><img width="360" height="240" src="../../assets/docs/images/placeholders/360x240-5.jpg" alt="Placeholder alt tag"></a>
            </div>
            <hr>
            <nav>
                <ul class="pager">
                    <li><a href="#">Previous</a></li>
                    <li><a href="#">Next</a></li>
                </ul>
            </nav>
        </div>
    </div>
</div>
<!-- End pattern: more-news //-->