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 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.

Options available

• Single
• Multiple

Single

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

    

        
    
    

        
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

Example of more than 10 articles on a page.

    

        
    
    

        
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