Individual search result
About this pattern
A search results list is made up of multiple individual search results. Each search result represents one webpage or content item that’s relevant to the search term(s).
How to use this pattern
A search result must have enough information so users can compare results and decide what they need.
Every search result must include:
- a heading linking to the relevant webpage or content item
- summary text
You can also choose to include:
- a subheading
- links to parent pages, such as a guide or publication
- an image
- page metadata
- a promoted search result label
Include optional elements based on:
- the type of content – for example, a thumbnail image for a profile picture
- what information you have about the content – for example, publication date
- what information will help users compare search results and find the most relevant site content
You can use a combination of different search result layouts in a search results list.
Sample HTML
<div 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>
</div>Linked heading
Every search result must have a heading. This is also a link to the relevant webpage.
The heading must clearly describe what the content is. You should keep the heading short, ideally less than 60 characters.
Subheading
Use an optional subheading to add extra information that does not fit in the main heading.
For example, for a job profile page, add the job title as the main heading and the person’s name as the subheading.
Summary text
You should include summary text underneath the headings.
This is a brief description of the search result that gives the heading context. You can include a highlighted search term within it.
Summary text should be less than 250 characters.
Do not include links in the summary text.
Page metadata
A search result can include page metadata which gives additional information about the content. For example, the publication date or category.
Use the shortened version of page metadata to show 1 or 2 pieces of important information.
Use page metadata that is useful to the user. For example, a publication date can help users identify the most up-to-date publications or news items.
Links to parent pages
When a content item is a sub-page of a larger set of content, you can include a link to the parent page.
The link is inset and will appear after the text ‘part of’.
If the content item is part of multiple sets of content, then each set of content should be linked.
Using parent page links gives the user a greater understanding of what the content is about and helps them to find related content.
Sample HTML
<div class="ds_search-result">
<h3 class="ds_search-result__title">
<a class="ds_search-result__link" href="#">Scottish Greenhouse Gas Statistics 2022</a>
</h3>
<p class="ds_search-result__summary">Official statistics showing emissions of greenhouse gases in Scotland over the period 1990 to 2022.</p>
<dl class="ds_search-result__metadata ds_metadata ds_metadata--inline">
<div class="ds_metadata__item">
<dt class="ds_metadata__key">Publication type</dt>
<dd class="ds_metadata__value">
Statistics
</dd>
</div>
<div class="ds_metadata__item">
<dt class="ds_metadata__key">Date</dt>
<dd class="ds_metadata__value">
18 June 2024
</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="#">Environment statistics</a></dd>
<dd class="ds_search-result__context-value"><a href="#">Energy statistics</a></dd>
</dl>
</div>Image
You can include an image in a search result. Put the image underneath the heading and to the left of the search result text.
The image must relate to the search result. Do not use purely decorative images.
Use images carefully. Only use them if it will help someone identify the search result they need. For example, use a person’s photo if the webpage is about them.
Follow the guidance on using images.
Sample HTML
<div 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">
<a class="ds_search-result__media-link" href="#" tabindex="-1">
<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="/binaries/content/gallery/designsystem/examples/jp-marks/96x96-jpg" loading="lazy" />
</a>
</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>
</div>Promoted search result
You can put specific results at the top of the search results and label them to show that they are distinct from the others.
For example, label a result as ‘recommended’ or ‘most relevant’ if it’s important content to highlight.
Limit the number of promoted search results you show. Fewer promoted results have more impact.
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.
We plan to do more user research to see how users understand and interact with promoted results.
Sample HTML
<div 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="#">Consultation on crofting reform</a>
</h3>
<p class="ds_search-result__summary">Public to help shape plans for the reform of <mark>crofting</mark>.</p>
<dl class="ds_metadata ds_search-result__metadata ds_metadata--inline">
<div class="ds_metadata__item">
<dt class="ds_metadata__key">Format</dt>
<dd class="ds_metadata__value">
News
</dd>
</div>
</dl>
</div>
</div>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