Search results layouts
About the search results layouts
Use the unfiltered or filtered search results layout when displaying a search results list.
Unfiltered search results layout
The unfiltered search results layout has the following areas:
- header
- body content
- list
- feedback
The unfiltered search results layout changes depending on the width of the browser window.
Results appear in the first 8 columns on large displays. There is no content in columns 9 to 12. This limits the length of the search results for better readability.
Sample HTML
<main class="ds_layout ds_layout--search-results">
<div class="ds_layout__header">
<!--
A ds_page-header component or other header content
-->
</div>
<div class="ds_layout__content">
<!--
Introductory content, including a search form
-->
</div>
<div class="ds_layout__list">
<!--
The list of search results
-->
</div>
<div class="ds_layout__feedback">
<!--
Feedback form
-->
</div>
</main>Filtered search results
The filtered search results layout has the following areas:
- header
- body content
- sidebar
- list
- feedback
The layout changes depending on the width of the browser window.
On large displays, the list and feedback areas move to the right of the sidebar.
Sample HTML
<main class="ds_layout ds_layout--search-results--filters">
<div class="ds_layout__header">
<!--
A ds_page-header component or other header content
-->
</div>
<div class="ds_layout__content">
<!--
Introductory content, including a search form
-->
</div>
<div class="ds_layout__sidebar">
<!--
Search filters
-->
</div>
<div class="ds_layout__list">
<!--
The list of search results
-->
</div>
<div class="ds_layout__feedback">
<!--
Feedback form
-->
</div>
</main>How to use the search results layouts
Copy the HTML into the middle of the page template.
Follow guidance for the search results list pattern and search filters.
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