Article list

The article list pattern shows key information about a particular article or item, linking to further details. This can be used for a wide range of content such as news articles, blog posts, publications or events.

Rules for article list

• An article list item can be used standalone or combined with others to form a list.
• Must be at least half the width of the available screen space.
• While the thumbnail is not strictly required, if used in a list where the majority of items are missing suitable images then consider using a different pattern such as search results.
• The description must be no more than 220 characters.
• The recommended thumbnail image size is 360px wide by 240px high.
• Thumbnails in a list of items should use the same consistent image size.
• The metadata list pattern is used to provide additional supporting information.
• If there are more than ten items in a list, then pagination should be used.
• On small screen widths the description text is removed, this behaviour can be overridden by adding the class article-list__description--show-always alongside the article-list__description class.

Options available

• Article (event example)
• Article with description always visible (publication example)
• Article with minimal metadata (news example)
• List of articles (blog example)

Article (event example)

This example includes metadata that would typically feature on an event, as the metadata could be seen as greater importance than the description it has been placed above it and overridden the lighter grey text colour by using the inherit--colour class. The description is hidden on smaller widths while the image makes use of lazyloading.

    

        
    
    

        
Event title
        
        

            
Date
18 July 2019
            
Time
8.00am to 10.00am
            
Location
Byre Theatre
        
        
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.
    

Article with description always visible (publication example)

This example has the description set to show at all screen widths and includes metadata that would typically describe a publication. The image is also a different size as a portrait aspect ratio is better suited to book covers.

    

        
    
    

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

            
Author
John Smith
            
Published by
Profile Books
            
Publication date
3 October 2019
        
        
    

Article with minimal metadata (news example)

This example only has basic metadata so the labels are only visible to screen readers. The content is typical for that of a news article.

    

        
    
    

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

            
Date
18 July 2019
        
        
    

List of articles (blog example)

When article list items are placed in a list a dividing line is automatically shown between each. This example shows the maximum of ten items with pagination underneath.

    

        
    
    

        
This is the title of the blog
        
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.
        

            
Date
18 July 2019
            
Category
Blog category
        
        
    


    

        
    
    

        
This is the title of the blog
        
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.
        

            
Date
18 July 2019
            
Category
Blog category
        
        
    


    

        
    
    

        
This is the title of the blog
        
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.
        

            
Date
18 July 2019
            
Category
Blog category
        
        
    


    

        
    
    

        
This is the title of the blog
        
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.
        

            
Date
18 July 2019
            
Category
Blog category
        
        
    


    

        
    
    

        
This is the title of the blog
        
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.
        

            
Date
18 July 2019
            
Category
Blog category
        
        
    


    

        
    
    

        
This is the title of the blog
        
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.
        

            
Date
18 July 2019
            
Category
Blog category
        
        
    


    

        
    
    

        
This is the title of the blog
        
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.
        

            
Date
18 July 2019
            
Category
Blog category
        
        
    


    

        
    
    

        
This is the title of the blog
        
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.
        

            
Date
18 July 2019
            
Category
Blog category
        
        
    


    

        
    
    

        
This is the title of the blog
        
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.
        

            
Date
18 July 2019
            
Category
Blog category
        
        
    


    

        
    
    

        
This is the title of the blog
        
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.
        

            
Date
18 July 2019
            
Category
Blog category