Search results
Experimental
This is currently experimental because we need more research to validate it.
A list displaying all the search results found after a user has made a search.
Note: This example has been truncated to seven search results to conserve space.
Sample HTML
<main class="ds_layout ds_layout--search-results ds_search-results">
<div class="ds_layout__header">
<div class="ds_site-search">
<form role="search" class="ds_site-search__form">
<label class="ds_label visually-hidden" for="site-search">Search</label>
<div class="ds_input__wrapper ds_input__wrapper--has-icon">
<input name="q" required="" id="site-search" class="ds_input ds_site-search__input" type="search" value="crofting" placeholder="Search" autocomplete="off" />
<button type="submit" class="ds_button js-site-search-button">
<span class="visually-hidden">Search</span>
<svg class="ds_icon" aria-hidden="true" role="img"><use href="/assets/images/icons/icons.stack.svg#search"></use></svg>
</button>
</div>
</form>
</div>
</div>
<div class="ds_layout__content">
<h2 class="ds_search-results__title" aria-live="polite">Showing 21 to 30 of 87 results for <span class="ds_search-results__title-query">crofting</span></h2>
<ol class="ds_search-results__list" data-total="87" start="21">
<li class="ds_search-result">
<h3 class="ds_search-result__title">
<a class="ds_search-result__link" href="#">Crofting community right to buy</a>
</h3>
<p class="ds_search-result__summary">Information and guidance regarding the <mark>crofting</mark> community right to buy.</p>
<dl class="ds_metadata ds_search-result__metadata ds_metadata--inline">
<div class="ds_metadata__item">
<dt class="ds_metadata__key visually-hidden">Format</dt>
<dd class="ds_metadata__value">Policy</dd>
</div>
</dl>
</li>
<li class="ds_search-result">
<h3 class="ds_search-result__title">
<a class="ds_search-result__link" href="#">Crofting consultation 2017</a>
</h3>
<p class="ds_search-result__summary">We are seeking the views of crofters, and those with an interest, on the pathway of any potential new legislation to reform <mark>crofting</mark> law.</p>
<dl class="ds_metadata ds_search-result__metadata ds_metadata--inline">
<div class="ds_metadata__item">
<dt class="ds_metadata__key visually-hidden">Format</dt>
<dd class="ds_metadata__value">Publication - Consultation paper</dd>
</div>
<div class="ds_metadata__item">
<dt class="ds_metadata__key visually-hidden">Date</dt>
<dd class="ds_metadata__value">28 August 2017</dd>
</div>
</dl>
</li>
<li class="ds_search-result">
<h3 class="ds_search-result__title">
<a class="ds_search-result__link" href="#">Crofting Elections 2017: consultation responses analysis</a>
</h3>
<p class="ds_search-result__summary">Analysis of the responses to the <mark>Crofting</mark> Elections 2017 consultation.</p>
<dl class="ds_metadata ds_search-result__metadata ds_metadata--inline">
<div class="ds_metadata__item">
<dt class="ds_metadata__key visually-hidden">Format</dt>
<dd class="ds_metadata__value">Publication - Consultation analysis</dd>
</div>
<div class="ds_metadata__item">
<dt class="ds_metadata__key visually-hidden">Date</dt>
<dd class="ds_metadata__value">1 September 2017</dd>
</div>
</dl>
</li>
<li class="ds_search-result">
<h3 class="ds_search-result__title">
<a class="ds_search-result__link" href="#">Crofting Commision</a>
</h3>
<p class="ds_search-result__summary">Elections regulations put before parliament.</p>
<dl class="ds_metadata ds_search-result__metadata ds_metadata--inline">
<div class="ds_metadata__item">
<dt class="ds_metadata__key visually-hidden">Format</dt>
<dd class="ds_metadata__value">News</dd>
</div>
<div class="ds_metadata__item">
<dt class="ds_metadata__key visually-hidden">Date</dt>
<dd class="ds_metadata__value">25 October 2016</dd>
</div>
</dl>
<dl class="ds_search-result__context">
<dt class="ds_search-result__context-key">Part of:</dt>
<dd class="ds_search-result__context-value"><a href="#">Equality and rights</a></dd>
</dl>
</li>
<li class="ds_search-result">
<h3 class="ds_search-result__title">
<a class="ds_search-result__link" href="#">Proposals on secondary legislation the Land Reform (Scotland) Act 2003 part three: crofting community right to buy as amended by the Community Empowerment (Scotland) Act 2015: consultation</a>
</h3>
<p class="ds_search-result__summary">Consultation relating to secondary legislation for the Land Reform (Scotland) Act 2003 part three, <mark>crofting</mark> community right to buy as amended by the Community ...</p>
<dl class="ds_metadata ds_search-result__metadata ds_metadata--inline">
<div class="ds_metadata__item">
<dt class="ds_metadata__key visually-hidden">Format</dt>
<dd class="ds_metadata__value">Publication - Research and Analysis</dd>
</div>
<div class="ds_metadata__item">
<dt class="ds_metadata__key visually-hidden">Date</dt>
<dd class="ds_metadata__value">1 September 2016</dd>
</div>
</dl>
<dl class="ds_search-result__context">
<dt class="ds_search-result__context-key">Part of:</dt>
<dd class="ds_search-result__context-value"><a href="#">Farming and rural</a></dd>
</dl>
</li>
<li class="ds_search-result">
<h3 class="ds_search-result__title">
<a class="ds_search-result__link" href="#">Permanent Secretary</a>
</h3>
<div class="ds_search-result__has-media">
<div class="ds_search-result__media-wrapper">
<div class="ds_search-result__media ds_aspect-box ds_aspect-box--square">
<img alt="" aria-hidden="true" class="ds_aspect-box__inner" srcset="/binaries/content/gallery/designsystem/examples/jp-marks/96x96-jpg 96w,
/binaries/content/gallery/designsystem/examples/jp-marks/96x96-x2-jpg 192w,
/binaries/content/gallery/designsystem/examples/jp-marks/128x128-jpg 128w,
/binaries/content/gallery/designsystem/examples/jp-marks/128x128-x2-jpg 256w,
/binaries/content/gallery/designsystem/examples/jp-marks/160x160-jpg 160w,
/binaries/content/gallery/designsystem/examples/jp-marks/160x160-x2-jpg 320w" sizes="(min-width: 1200px) 160px,
(min-width: 992px) 128px,
96px" src="/assets/images/people/jp-marks-96x96.jpg" loading="lazy" />
</div>
</div>
<div>
<h4 class="ds_search-result__sub-title">John-Paul Marks</h4>
<p class="ds_search-result__summary">John-Paul Marks was appointed as Permanent Secretary to the Scottish Government on 1 January 2022.</p>
</div>
</div>
</li>
<li class="ds_search-result">
<h3 class="ds_search-result__title">
<a class="ds_search-result__link" href="#">Section 1 - Introduction</a>
</h3>
<p class="ds_search-result__summary">We are seeking the views of crofters, and those with an interest, on the pathway of any potential new legislation to reform <mark>crofting</mark> law.</p>
<dl class="ds_metadata ds_search-result__metadata ds_metadata--inline">
<div class="ds_metadata__item">
<dt class="ds_metadata__key visually-hidden">Format</dt>
<dd class="ds_metadata__value">Publication - Consultation paper</dd>
</div>
<div class="ds_metadata__item">
<dt class="ds_metadata__key visually-hidden">Date</dt>
<dd class="ds_metadata__value">28 August 2017</dd>
</div>
</dl>
<dl class="ds_search-result__context">
<dt class="ds_search-result__context-key">Part of:</dt>
<dd class="ds_search-result__context-value"><a href="#">Crofting consultation 2017</a></dd>
</dl>
</li>
</ol>
<nav class="ds_pagination" aria-label="Search result pages">
<ul class="ds_pagination__list">
<li class="ds_pagination__item">
<a aria-label="Previous page" class="ds_pagination__link ds_pagination__link--text ds_pagination__link--icon" href="#">
<svg class="ds_icon" aria-hidden="true" role="img">
<use href="/assets/images/icons/icons.stack.svg#chevron_left"></use>
</svg>
<span class="ds_pagination__link-label">Previous</span>
</a>
</li>
<li class="ds_pagination__item">
<a aria-label="Page 1" class="ds_pagination__link" href="#">
<span class="ds_pagination__link-label">1</span>
</a>
</li>
<li class="ds_pagination__item">
<a aria-label="Page 2" class="ds_pagination__link" href="#">
<span class="ds_pagination__link-label">2</span>
</a>
</li>
<li class="ds_pagination__item"">
<a aria-label="Page 3" aria-current="page" class="ds_pagination__link ds_current" href="#">
<span class="ds_pagination__link-label">3</span>
</a>
</li>
<li class="ds_pagination__item">
<a aria-label="Page 4" class="ds_pagination__link" href="#">
<span class="ds_pagination__link-label">4</span>
</a>
</li>
<li class="ds_pagination__item" aria-hidden="true">
<span class="ds_pagination__link ds_pagination__link--ellipsis">…</span>
</li>
<li class="ds_pagination__item">
<a aria-label="Last page, page 9" class="ds_pagination__link" href="#">
<span class="ds_pagination__link-label">9</span>
</a>
</li>
<li class="ds_pagination__item">
<a aria-label="Next page" class="ds_pagination__link ds_pagination__link--text ds_pagination__link--icon" href="#">
<span class="ds_pagination__link-label">Next</span>
<svg class="ds_icon" aria-hidden="true" role="img">
<use href="/assets/images/icons/icons.stack.svg#chevron_right"></use>
</svg>
</a>
</li>
</ul>
</nav>
<aside class="ds_search-results__related" aria-labelledby="search-results__related-title">
<h2 id="search-results__related-title" class="ds_search-results__related-title">Related searches</h2>
<ul class="ds_no-bullets">
<li><a href="#">crofting law scotland</a></li>
<li><a href="#">crofting register</a></li>
<li><a href="#">crofting grants</a></li>
</ul>
</aside>
</div>
</main>About this pattern
This pattern presents a set of search results which may appear over multiple pages.
Within the pattern:
- search results may contain a combination of different search result layout types
- users can choose the page they want by picking a page number at the bottom of a search results page, starting at page 1
- each individual page contains 10 search results
- the page number the user is on is always highlighted
- any links to related search terms may appear at the end
When there are no results found
If a user has searched for something and there are no results to display, give the user some hints for how to improve their search.
Sample HTML
<main class="ds_layout ds_layout--search-results ds_search-results">
<div class="ds_layout__header">
<div class="ds_site-search">
<form role="search" class="ds_site-search__form">
<label class="ds_label visually-hidden" for="site-search">Search</label>
<div class="ds_input__wrapper ds_input__wrapper--has-icon">
<input name="q" required="" id="site-search" class="ds_input ds_site-search__input" type="search" value="xyzuhsdfhbjh" placeholder="Search" autocomplete="off" />
<button type="submit" class="ds_button js-site-search-button">
<span class="visually-hidden">Search</span>
<svg class="ds_icon" aria-hidden="true" role="img"><use href="/assets/images/icons/icons.stack.svg#search"></use></svg>
</button>
</div>
</form>
</div>
</div>
<div class="ds_layout__content">
<section id="search-results" class="ds_search-results" aria-labelledby="search-results__heading">
<h2 class="visually-hidden" id="search-results__heading">Search results</h2>
<div class="ds_no-search-results">
<p><strong>There are no matching results.</strong></p>
<p>Improve your search results by:</p>
<ul>
<li>double-checking your spelling</li>
<li>using fewer keywords</li>
<li>searching for something less specific</li>
</ul>
</div>
</section>
</div>
</main>When the search term may be misspelled
If a user has searched for something that is identified as a potential misspelling, add the corrected spelling of the term to the search submission which may produce a wider set of search results.
Give the user the option to perform the search again with only the suggested corrected spelling or only their original search term.
Sample HTML
<main class="ds_layout ds_layout--search-results ds_search-results">
<div class="ds_layout__header">
<div class="ds_site-search">
<form role="search" class="ds_site-search__form">
<label class="ds_label visually-hidden" for="site-search">Search</label>
<div class="ds_input__wrapper ds_input__wrapper--has-icon">
<input name="q" required="" id="site-search" class="ds_input ds_site-search__input" type="search" value="crfting" placeholder="Search" autocomplete="off" />
<button type="submit" class="ds_button js-site-search-button">
<span class="visually-hidden">Search</span>
<svg class="ds_icon" aria-hidden="true" role="img"><use href="/assets/images/icons/icons.stack.svg#search"></use></svg>
</button>
</div>
</form>
</div>
<nav class="ds_search-suggestions" aria-label="Alternative search suggestions">
<h2 class="visually-hidden">Also showing results for crofting</h2>
<p><span aria-hidden="true">Also showing results for</span> <a aria-label="Show results only for crofting" href="#">crofting</a><br />
<span aria-hidden="true">Show results only for</span> <a aria-label="Show results only for crfting" href="#">crfting</a>
</p>
</nav>
</div>
<div class="ds_layout__content">
<h2 class="ds_search-results__title" aria-live="polite">3 results for <span class="ds_search-results__title-query">crfting</span> or <span class="ds_search-results__title-query">crofting</span></h2>
<ol class="ds_search-results__list" data-total="3">
<li class="ds_search-result">
<h3 class="ds_search-result__title">
<a class="ds_search-result__link" href="#">Crofting community right to buy</a>
</h3>
<p class="ds_search-result__summary">Information and guidance regarding the <mark>crofting</mark> community right to buy.</p>
<dl class="ds_metadata ds_search-result__metadata ds_metadata--inline">
<div class="ds_metadata__item">
<dt class="ds_metadata__key visually-hidden">Format</dt>
<dd class="ds_metadata__value">Policy</dd>
</div>
</dl>
</li>
<li class="ds_search-result">
<h3 class="ds_search-result__title">
<a class="ds_search-result__link" href="#">Crofting consultation 2017</a>
</h3>
<p class="ds_search-result__summary">We are seeking the views of crofters, and those with an interest, on the pathway of any potential new legislation to reform <mark>crofting</mark> law.</p>
<dl class="ds_metadata ds_search-result__metadata ds_metadata--inline">
<div class="ds_metadata__item">
<dt class="ds_metadata__key visually-hidden">Format</dt>
<dd class="ds_metadata__value">Publication - Consultation paper</dd>
</div>
<div class="ds_metadata__item">
<dt class="ds_metadata__key visually-hidden">Date</dt>
<dd class="ds_metadata__value">28 August 2017</dd>
</div>
</dl>
</li>
<li class="ds_search-result">
<h3 class="ds_search-result__title">
<a class="ds_search-result__link" href="#">Crofting Elections 2017: consultation responses analysis</a>
</h3>
<p class="ds_search-result__summary">Analysis of the responses to the <mark>Crofting</mark> Elections 2017 consultation.</p>
<dl class="ds_metadata ds_search-result__metadata ds_metadata--inline">
<div class="ds_metadata__item">
<dt class="ds_metadata__key visually-hidden">Format</dt>
<dd class="ds_metadata__value">Publication - Consultation analysis</dd>
</div>
<div class="ds_metadata__item">
<dt class="ds_metadata__key visually-hidden">Date</dt>
<dd class="ds_metadata__value">1 September 2017</dd>
</div>
</dl>
</li>
</ol>
</div>
</main>When additional results are promoted
Specific results can be placed at the top of the search results and labelled to show that they are distinct from the others.
Promoted results do not count towards the total number of results.
If search results span multiple pages then promoted results should only appear on page one.
More user research is needed on whether the purpose of promoted results is understood by users.
Sample HTML
<main class="ds_layout ds_layout--search-results ds_search-results">
<div class="ds_layout__header">
<div class="ds_site-search">
<form role="search" class="ds_site-search__form">
<label class="ds_label visually-hidden" for="site-search">Search</label>
<div class="ds_input__wrapper ds_input__wrapper--has-icon">
<input name="q" required="" id="site-search" class="ds_input ds_site-search__input" type="search" value="crofting" placeholder="Search" autocomplete="off" />
<button type="submit" class="ds_button js-site-search-button">
<span class="visually-hidden">Search</span>
<svg class="ds_icon" aria-hidden="true" role="img"><use href="/assets/images/icons/icons.stack.svg#search"></use></svg>
</button>
</div>
</form>
</div>
</div>
<div class="ds_layout__content">
<h2 class="ds_search-results__title" aria-live="polite">3 results for <span class="ds_search-results__title-query">crofting</span></h2>
<ol class="ds_search-results__list" data-total="5">
<li class="ds_search-result ds_search-result--promoted">
<div class="ds_search-result--promoted-content">
<header class="ds_search-result--promoted-title">Recommended</header>
<h3 class="ds_search-result__title">
<a class="ds_search-result__link" href="#">Crofting community right to buy</a>
</h3>
<p class="ds_search-result__summary">Information and guidance regarding the <mark>crofting</mark> community right to buy.</p>
<dl class="ds_metadata ds_search-result__metadata ds_metadata--inline">
<div class="ds_metadata__item">
<dt class="ds_metadata__key visually-hidden">Format</dt>
<dd class="ds_metadata__value">Policy</dd>
</div>
</dl>
</div>
</li>
<li class="ds_search-result ds_search-result--promoted">
<div class="ds_search-result--promoted-content">
<header class="ds_search-result--promoted-title">Recommended</header>
<h3 class="ds_search-result__title">
<a class="ds_search-result__link" href="#">Crofting consultation 2017</a>
</h3>
<p class="ds_search-result__summary">We are seeking the views of crofters, and those with an interest, on the pathway of any potential new legislation to reform <mark>crofting</mark> law.</p>
<dl class="ds_metadata ds_search-result__metadata ds_metadata--inline">
<div class="ds_metadata__item">
<dt class="ds_metadata__key visually-hidden">Format</dt>
<dd class="ds_metadata__value">Publication - Consultation paper</dd>
</div>
<div class="ds_metadata__item">
<dt class="ds_metadata__key visually-hidden">Date</dt>
<dd class="ds_metadata__value">28 August 2017</dd>
</div>
</dl>
</div>
</li>
<li class="ds_search-result">
<h3 class="ds_search-result__title">
<a class="ds_search-result__link" href="#">Crofting Elections 2017: consultation responses analysis</a>
</h3>
<p class="ds_search-result__summary">Analysis of the responses to the <mark>Crofting</mark> Elections 2017 consultation.</p>
<dl class="ds_metadata ds_search-result__metadata ds_metadata--inline">
<div class="ds_metadata__item">
<dt class="ds_metadata__key visually-hidden">Format</dt>
<dd class="ds_metadata__value">Publication - Consultation analysis</dd>
</div>
<div class="ds_metadata__item">
<dt class="ds_metadata__key visually-hidden">Date</dt>
<dd class="ds_metadata__value">1 September 2017</dd>
</div>
</dl>
</li>
<li class="ds_search-result">
<h3 class="ds_search-result__title">
<a class="ds_search-result__link" href="#">Crofting Commision</a>
</h3>
<p class="ds_search-result__summary">Elections regulations put before parliament.</p>
<dl class="ds_metadata ds_search-result__metadata ds_metadata--inline">
<div class="ds_metadata__item">
<dt class="ds_metadata__key visually-hidden">Format</dt>
<dd class="ds_metadata__value">News</dd>
</div>
<div class="ds_metadata__item">
<dt class="ds_metadata__key visually-hidden">Date</dt>
<dd class="ds_metadata__value">25 October 2016</dd>
</div>
</dl>
<dl class="ds_search-result__context">
<dt class="ds_search-result__context-key">Part of:</dt>
<dd class="ds_search-result__context-value"><a href="#">Equality and rights</a></dd>
</dl>
</li>
<li class="ds_search-result">
<h3 class="ds_search-result__title">
<a class="ds_search-result__link" href="#">Proposals on secondary legislation the Land Reform (Scotland) Act 2003 part three: crofting community right to buy as amended by the Community Empowerment (Scotland) Act 2015: consultation</a>
</h3>
<p class="ds_search-result__summary">Consultation relating to secondary legislation for the Land Reform (Scotland) Act 2003 part three, <mark>crofting</mark> community right to buy as amended by the Community ...</p>
<dl class="ds_metadata ds_search-result__metadata ds_metadata--inline">
<div class="ds_metadata__item">
<dt class="ds_metadata__key visually-hidden">Format</dt>
<dd class="ds_metadata__value">Publication - Research and Analysis</dd>
</div>
<div class="ds_metadata__item">
<dt class="ds_metadata__key visually-hidden">Date</dt>
<dd class="ds_metadata__value">1 September 2016</dd>
</div>
</dl>
<dl class="ds_search-result__context">
<dt class="ds_search-result__context-key">Part of:</dt>
<dd class="ds_search-result__context-value"><a href="#">Farming and rural</a></dd>
</dl>
</li>
</ol>
</div>
</main>Displaying results over multiple pages
When using the pagination component, to split results over multiple pages, some additional configuration should be implemented.
On the first page of results
- The number of results and the search term should be shown, for example
87 results for search term - The attribute
data-total, applied to theds_search-results__listlist element, contains the total number of results and is used to calculate the relative position of each result within the tracking attribute script
On subsequent result pages
- The position within the set of results should should shown alongside the total number and search term, for example
Showing 21 to 30 of 87 results for search term - The additional attribute
start, applied to theds_search-results__listlist element, contains the starting position for the current displayed results within the set of results and is by the tracking attribute script
Related components
Why we use this pattern
The design of the pattern helps the user to browse their search results, or to change their search term if the search results do not meet their needs.
Website analytics
Many analytics tools offer out of the box tracking for site search. The setup below covers more complex tracking to understand which search result was interacted with from a search results page, and how additional interactive elements are being used.
Search results should be tracked in order to understand if internal search engines are providing useful results to users. Tracking works through the query being available from the page URL, the click text, click URL and a data attribute showing the result’s position.
If a spelling suggestion is provided, clicks to the suggested search terms are tracked through the page URL (which contains the original search query), the click text, the click URL and a data attribute.
Pagination is tracked using the data attribute with the number of the results page clicked.
Promoted results are tracked using the page URL, the click text, click URL and a data attribute showing the result’s position in the list of promoted results.
Suggested related search terms are tracked through the page URL (which contains the original search query), the click text, the click URL and a data attribute.
The data attributes are added automatically by the Design System’s ‘tracking’ script.
Where the site search is being used on a single-page app or it is not possible to put the search query in to the URL, the query could be included in the dataLayer for the page.
Accessibility
Suggestions for mispellings use WAI-ARIA attributes to give more context for screen reader users. They include:
- link text for each suggestion being overwritten with a more descriptive aria-label
- text hidden where it would cause duplication with the links
- suggestions being wrapped in a nav element with a descriptive aria-label Supporting evidence: mygov.scot accessibility review, March 2019.
Pagination of search result pages may be implemented in a way that only refreshes part of the page content, rather than the entire page. In these situations it may be difficult for users of assistive technology to know when they have changed page. To help in this situation:
- an aria-live attribute is applied to the heading that describes the total number of results, so If this heading content then dynamically changes then the new position in the list of results will be announced
- focus should be applied to the beginning of the content that has been dynamically changed
Feedback, help and support
If you need help or support you can e-mail us at designsystem@gov.scot
There is a problem
Thanks for your feedback