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.

Options available

Simple result
Standard result
Additional result metadata
Search results with horizontal dividing lines

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

<!-- Begin pattern: search results //-->
<ol class="search-results">
    <li class="search-result">
        <a href="" title="This is the heading of the web page" class="search-result__link">
            <h4 class="search-result__heading">This is the heading of the web page</h4>
        </a>
    </li>
    <li class="search-result">
        <a href="" title="This is the name of a document" class="search-result__link">
            <h4 class="search-result__heading">This is the name of a document</h4>
        </a>
    </li>
</ol>
<!-- End pattern: search results //-->

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

<!-- Begin pattern: search results //-->
<ol class="search-results">
    <li class="search-results__group-heading">
        <h3 class="sr-only">Heading for the results group</h3>
    </li>
    <li class="search-result">
        <a href="https://www.st-andrews.ac.uk/path/to/page/" title="This is the heading of the web page" class="search-result__link">
            <h4 class="search-result__heading">This is the heading of the web page</h4>
            <span class="search-result__label">Password protected</span>
            <cite class="search-result__url">https://www.st-andrews.ac.uk/path/to/page/</cite>
        </a>
        <p class="search-result__summary">This is a short description for the web page where any matching <strong>search term</strong> is highlighted.</p>
    </li>
    <li class="search-result">
        <a href="https://www.st-andrews.ac.uk/path-to-file/<strong>search-term</strong>" title="This is the name of a document" class="search-result__link">
            <h4 class="search-result__heading">This is the name of a document</h4>
            <span class="search-result__label">PDF (525k)</span>
            <cite class="search-result__url">https://www.st-andrews.ac.uk/path-to-file/<strong>search-term</strong></cite>
        </a>
        <p class="search-result__summary">This is a short description for the document where any matching <strong>search term</strong> is highlighted.</p>
    </li>
</ol>
<!-- End pattern: search results //-->

Additional result metadata

Results can also include metadata to provide quick key information about a resource. This uses the metadata list pattern.

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

Email

help@st-andrews.ac.uk

Code

<!-- Begin pattern: search results //-->
<ol class="search-results">
    <li class="search-results__group-heading">
        <h3 class="sr-only">Heading for the results group</h3>
    </li>
    <li class="search-result">
        <a href="https://www.st-andrews.ac.uk/path/to/page/" title="This is the heading of the web page" class="search-result__link">
            <h4 class="search-result__heading">This is the heading of the web page</h4>
            <span class="search-result__label">Password protected</span>
            <cite class="search-result__url">https://www.st-andrews.ac.uk/path/to/page/</cite>
        </a>
        <p class="search-result__summary">This is a short description for the web page where any matching <strong>search term</strong> is highlighted.</p>
        <dl class="metadata-list">
            <dt class="metadata-list--full"><i class="far fa-folder-open" aria-hidden="true" title="File location"></i><span class="sr-only">File location</span></dt>
            <dd class="metadata-list--full">This is a full width metadata field that can be used for prominent or longer values</dd>
            <dt><i class="far fa-calendar-alt" aria-hidden="true" title="Published date"></i><span class="sr-only">Published date</span></dt>
            <dd>18 July 2019</dd>
            <dt><i class="far fa-file-alt" aria-hidden="true" title="Document type"></i><span class="sr-only">Document type</span></dt>
            <dd>Guidance</dd>
            <dt><i class="far fa-user" aria-hidden="true" title="Scope (applies to)"></i><span class="sr-only">Scope (applies to)</span></dt>
            <dd>All staff</dd>
        </dl>
    </li>
    <li class="search-result">
        <a href="https://www.st-andrews.ac.uk/path-to-file/<strong>search-term</strong>" title="This is the name of a document" class="search-result__link">
            <h4 class="search-result__heading">This is the name of a document</h4>
            <span class="search-result__label">PDF (525k)</span>
            <cite class="search-result__url">https://www.st-andrews.ac.uk/path-to-file/<strong>search-term</strong></cite>
        </a>
        <p class="search-result__summary">This is a short description for the document where any matching <strong>search term</strong> is highlighted.</p>
        <dl class="metadata-list">
            <dt><i class="far fa-calendar-alt" aria-hidden="true" title="Published date"></i><span class="sr-only">Published date</span></dt>
            <dd>21 April 2019</dd>
            <dt><i class="far fa-file-alt" aria-hidden="true" title="Document type"></i><span class="sr-only">Document type</span></dt>
            <dd>Guidance</dd>
            <dt><i class="far fa-user" aria-hidden="true" title="Scope (applies to)"></i><span class="sr-only">Scope (applies to)</span></dt>
            <dd>All staff</dd>
            <dt><i class="far fa-envelope" aria-hidden="true" title="Email"></i><span class="sr-only">Email</span></dt>
            <dd><a href="#">help@st-andrews.ac.uk</a></dd>
        </dl>
    </li>
</ol>
<!-- End pattern: search results //-->

Search results with horizontal dividing lines

For complex results it may be beneficial to introduce dividing lines to add greater visual separation between results. The lines will span the width of the wrapping element.

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

Email

help@st-andrews.ac.uk
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

Email

help@st-andrews.ac.uk
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

Email

help@st-andrews.ac.uk

Code

<!-- Begin pattern: search results //-->
<ol class="search-results search-results--divided">
    <li class="search-results__group-heading">
        <h3 class="sr-only">Heading for the results group</h3>
    </li>
    <li class="search-result">
        <a href="https://www.st-andrews.ac.uk/path/to/page/" title="This is the heading of the web page" class="search-result__link">
            <h4 class="search-result__heading">This is the heading of the web page</h4>
            <span class="search-result__label">Password protected</span>
            <cite class="search-result__url">https://www.st-andrews.ac.uk/path/to/page/</cite>
        </a>
        <p class="search-result__summary">This is a short description for the web page where any matching <strong>search term</strong> is highlighted.</p>
        <dl class="metadata-list">
            <dt class="metadata-list--full"><i class="far fa-folder-open" aria-hidden="true" title="File location"></i><span class="sr-only">File location</span></dt>
            <dd class="metadata-list--full">This is a full width metadata field that can be used for prominent or longer values</dd>
            <dt><i class="far fa-calendar-alt" aria-hidden="true" title="Published date"></i><span class="sr-only">Published date</span></dt>
            <dd>18 July 2019</dd>
            <dt><i class="far fa-file-alt" aria-hidden="true" title="Document type"></i><span class="sr-only">Document type</span></dt>
            <dd>Guidance</dd>
            <dt><i class="far fa-user" aria-hidden="true" title="Scope (applies to)"></i><span class="sr-only">Scope (applies to)</span></dt>
            <dd>All staff</dd>
        </dl>
    </li>
    <li class="search-result">
        <a href="https://www.st-andrews.ac.uk/path-to-file/<strong>search-term</strong>" title="This is the name of a document" class="search-result__link">
            <h4 class="search-result__heading">This is the name of a document</h4>
            <span class="search-result__label">PDF (525k)</span>
            <cite class="search-result__url">https://www.st-andrews.ac.uk/path-to-file/<strong>search-term</strong></cite>
        </a>
        <p class="search-result__summary">This is a short description for the document where any matching <strong>search term</strong> is highlighted.</p>
        <dl class="metadata-list">
            <dt><i class="far fa-calendar-alt" aria-hidden="true" title="Published date"></i><span class="sr-only">Published date</span></dt>
            <dd>21 April 2019</dd>
            <dt><i class="far fa-file-alt" aria-hidden="true" title="Document type"></i><span class="sr-only">Document type</span></dt>
            <dd>Guidance</dd>
            <dt><i class="far fa-user" aria-hidden="true" title="Scope (applies to)"></i><span class="sr-only">Scope (applies to)</span></dt>
            <dd>All staff</dd>
            <dt><i class="far fa-envelope" aria-hidden="true" title="Email"></i><span class="sr-only">Email</span></dt>
            <dd><a href="#">help@st-andrews.ac.uk</a></dd>
        </dl>
    </li>
    <li class="search-result">
        <a href="https://www.st-andrews.ac.uk/path-to-file/<strong>search-term</strong>" title="This is the name of a document" class="search-result__link">
            <h4 class="search-result__heading">This is the name of a document</h4>
            <span class="search-result__label">PDF (525k)</span>
            <cite class="search-result__url">https://www.st-andrews.ac.uk/path-to-file/<strong>search-term</strong></cite>
        </a>
        <p class="search-result__summary">This is a short description for the document where any matching <strong>search term</strong> is highlighted.</p>
        <dl class="metadata-list">
            <dt><i class="far fa-calendar-alt" aria-hidden="true" title="Published date"></i><span class="sr-only">Published date</span></dt>
            <dd>21 April 2019</dd>
            <dt><i class="far fa-file-alt" aria-hidden="true" title="Document type"></i><span class="sr-only">Document type</span></dt>
            <dd>Guidance</dd>
            <dt><i class="far fa-user" aria-hidden="true" title="Scope (applies to)"></i><span class="sr-only">Scope (applies to)</span></dt>
            <dd>All staff</dd>
            <dt><i class="far fa-envelope" aria-hidden="true" title="Email"></i><span class="sr-only">Email</span></dt>
            <dd><a href="#">help@st-andrews.ac.uk</a></dd>
        </dl>
    </li>
    <li class="search-result">
        <a href="https://www.st-andrews.ac.uk/path-to-file/<strong>search-term</strong>" title="This is the name of a document" class="search-result__link">
            <h4 class="search-result__heading">This is the name of a document</h4>
            <span class="search-result__label">PDF (525k)</span>
            <cite class="search-result__url">https://www.st-andrews.ac.uk/path-to-file/<strong>search-term</strong></cite>
        </a>
        <p class="search-result__summary">This is a short description for the document where any matching <strong>search term</strong> is highlighted.</p>
        <dl class="metadata-list">
            <dt><i class="far fa-calendar-alt" aria-hidden="true" title="Published date"></i><span class="sr-only">Published date</span></dt>
            <dd>21 April 2019</dd>
            <dt><i class="far fa-file-alt" aria-hidden="true" title="Document type"></i><span class="sr-only">Document type</span></dt>
            <dd>Guidance</dd>
            <dt><i class="far fa-user" aria-hidden="true" title="Scope (applies to)"></i><span class="sr-only">Scope (applies to)</span></dt>
            <dd>All staff</dd>
            <dt><i class="far fa-envelope" aria-hidden="true" title="Email"></i><span class="sr-only">Email</span></dt>
            <dd><a href="#">help@st-andrews.ac.uk</a></dd>
        </dl>
    </li>
</ol>
<!-- End pattern: search results //-->