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



    
        
    
    
        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

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



    
        
    
    
        New URL shortening service
        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.
        6 February 2017Articles and resources
    


    
        
    
    
        How to conduct usability testing
        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.
        24 October 2016Guides
    


    
        
    
    
        How to use Track Changes in Word
        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.
        10 February 2017Guides
    


    
        
    
    
        New URL shortening service
        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.
        6 February 2017Articles and resources
    


    
        
    
    
        How to conduct usability testing
        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.
        24 October 2016Guides
    


    
        
    
    
        How to use Track Changes in Word
        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.
        10 February 2017Guides
    


    
        
    
    
        New URL shortening service
        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.
        6 February 2017Articles and resources
    


    
        
    
    
        How to conduct usability testing
        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.
        24 October 2016Guides
    


    
        
    
    
        How to use Track Changes in Word
        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.
        10 February 2017Guides
    


    
        
    
    
        How to use Track Changes in Word
        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.
        10 February 2017Guides
    


    
        Previous
        Next