Digital pattern library

Search results

The search results pattern is used to present a list of links typically from a search service. Different types of results may require different content to be featured, so this pattern has a number of options to provide for this.

Rules for search results

A list of search results can use any combination of search result layout options.
Large lists of search results should be split accross multiple pages.

Simple result

The simplest implementation must include a heading for each result that links to the corresponding resource. This could be a web page, file or URL.

Example

Code



    
    
        
            This is the heading of the web page
            
            
        
        
        
    
    
        
            This is the name of a document

Standard result

The standard implementation may include an optional path to the result, an optional short descriptive summary and also a heading label for secondary information.

The short summary should be no longer than 160 characters.

Example

Heading for the results group
This is the heading of the web page
Password protected https://www.st-andrews.ac.uk/path/to/page/
This is a short description for the web page where any matching search term is highlighted.
This is the name of a document
PDF (525k) https://www.st-andrews.ac.uk/path-to-file/search-term
This is a short description for the document where any matching search term is highlighted.

Code



    Heading for the results group
    
        
            This is the heading of the web page
            Password protected
            https://www.st-andrews.ac.uk/path/to/page/
        
        
        This is a short description for the web page where any matching search term is highlighted.
    
    
        
            This is the name of a document
            PDF (525k)
            https://www.st-andrews.ac.uk/path-to-file/search-term
        
        
        This is a short description for the document where any matching search term is highlighted.

Additional result metadata

Results can also include metadata to provide quick key information about a resource. These consist of a series of type and value pairs, with icons representing the type of metadata. Metadata may either span the width of the result listing or be displayed as an inline list.

Full width metadata items must appear above any others.
Metadata should be used sparingly to avoid creating visual clutter.

Example

Heading for the results group
This is the heading of the web page
Password protected https://www.st-andrews.ac.uk/path/to/page/
This is a short description for the web page where any matching search term is highlighted.

File location
This is a full width metadata field that can be used for prominent or longer values

Published date
18 July 2019

Document type
Guidance

Scope (applies to)
All staff
This is the name of a document
PDF (525k) https://www.st-andrews.ac.uk/path-to-file/search-term
This is a short description for the document where any matching search term is highlighted.

Published date
21 April 2019

Document type
Guidance

Scope (applies to)
All staff

Location
London, UK

Code



    Heading for the results group
    
        
            This is the heading of the web page
            Password protected
            https://www.st-andrews.ac.uk/path/to/page/
        
        
        This is a short description for the web page where any matching search term is highlighted.
        
            File location
This is a full width metadata field that can be used for prominent or longer values
            Published date
18 July 2019
            Document type
Guidance
            Scope (applies to)
All staff
        
    
    
        
            This is the name of a document
            PDF (525k)
            https://www.st-andrews.ac.uk/path-to-file/search-term
        
        
        This is a short description for the document where any matching search term is highlighted.
        
            Published date
21 April 2019
            Document type
Guidance
            Scope (applies to)
All staff
            Location
London, UK

Image within result

It may also be beneficial to include a thumbnail image to give additional context to a search result.

Thumbnail images must be 360px wide and 240px high.

Example

Heading for the results group
This is a headline of a news article
https://www.st-andrews.ac.uk/path/to/page/
This is the maximum number of characters that can be used in a search result summary giving a clear indication of what the result is and supporting the heading.

Published date
18 July 2019
This is a headline of a news article
https://www.st-andrews.ac.uk/path/to/page/
This is the maximum number of characters that can be used in a search result summary giving a clear indication of what the result is and supporting the heading.

Published date
18 July 2019

Code



    Heading for the results group
    
        
            This is a headline of a news article
            
            https://www.st-andrews.ac.uk/path/to/page/
        
        
        This is the maximum number of characters that can be used in a search result summary giving a clear indication of what the result is and supporting the heading.
        
            Published date
18 July 2019
        
    
    
        
            This is a headline of a news article
            
            https://www.st-andrews.ac.uk/path/to/page/
        
        
        This is the maximum number of characters that can be used in a search result summary giving a clear indication of what the result is and supporting the heading.
        
            Published date
18 July 2019