We use cookies to collect anonymous data to help us improve your site browsing experience.

Click 'Accept all cookies' to agree to all cookies that collect anonymous data. To only allow the cookies that make the site work, click 'Use essential cookies only.' Visit 'Set cookie preferences' to control specific cookies.

Set cookie preferences

Your cookie preferences have been saved. You can change your cookie settings at any time.

Help us improve the Design System by taking our short survey.

Styles

Search results layouts

Published
4 February 2025
Layouts for displaying search results.

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.

The search results layout changes depending on the width of the browser window. On large displays all sections are set to eight columns width, whereas on smaller displays all sections take up the full width of the page.
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. 

The search results with filters layout changes depending on the width of the browser window. On large displays, the layout has a sidebar next to the list content, whereas on smaller displays the sidebar content appears above the list content.
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. 

Back to top