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

Options available


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
  1. This is the heading of the web page

  2. This is the name of a document

Code

  1. This is the heading of the web page

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

Example
  1. Heading for the results group

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

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

  1. Heading for the results group

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

  3. 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. This uses the metadata list pattern.

Example
  1. Heading for the results group

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

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

  1. Heading for the results group

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

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


Image within result

Mixed result types

A set of results should not contain different styles of results in a single list. It is recommended that different styles are contained within different tabs.

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

Example
  1. Heading for the results group

  2. This is a headline of a news article

    https://www.st-andrews.ac.uk/path/to/page/
    Alt text for image

    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.

  3. This is a headline of a news article

    https://www.st-andrews.ac.uk/path/to/page/
    Alt text for image

    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.

Code

  1. Heading for the results group

  2. This is a headline of a news article

    https://www.st-andrews.ac.uk/path/to/page/
    Alt text for image

    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.

  3. This is a headline of a news article

    https://www.st-andrews.ac.uk/path/to/page/
    Alt text for image

    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.


Contact details within results

Mixed result types

A set of results should not contain different styles of results in a single list. It is recommended that different styles are contained within different tabs.

The contact card pattern can be used to show contact information of a person within search results.

Example
  1. Heading for the results group

  2. Miss Colleen Hurst

    Miss Colleen Hurst

    St Andrews Sustainability Institute, Psychology and Neuroscience

    Academic Liason

  3. Mr Howard Hatfield

    School of Computer Science

    Senior JavaScript Developer

  4. Dr Brielle Williamson

    School of Psychology, Clinical Counselling

    Research Specialist

  5. Professor Timothy Mooney

    Chemical Engineering Professor

Code

  1. Heading for the results group

  2. Miss Colleen Hurst

    Miss Colleen Hurst

    St Andrews Sustainability Institute, Psychology and Neuroscience

    Academic Liason

  3. Mr Howard Hatfield

    School of Computer Science

    Senior JavaScript Developer

  4. Dr Brielle Williamson

    School of Psychology, Clinical Counselling

    Research Specialist

  5. Professor Timothy Mooney

    Chemical Engineering Professor