Components

• Button
• Cookie banner
• Filter
• Graph
• Highlight
• Notification
• Pagination
• Panel
• Rating
• Search form
• Search results
• Table
• Tabs
• Tag
• Time line

Search results

Display a list of search results to the user.

Open this example in a new tab

HTML

<div class="das-search-results">
  <ol class="das-search-results__list">
    <li class="das-search-results__list-item">
      <h2 class="govuk-heading-m das-search-results__heading">
        <a href="#" class="das-search-results__link">Animal care and welfare assistant</a>
      </h2>
      <p class="govuk-body das-search-results__body">Looking after the routine day to day care of domestic and/or wild
        animals.</p>
      <dl class="das-definition-list das-definition-list--meta das-search-results__meta">
        <dt class="das-definition-list__title">Sector</dt>
        <dd class="das-definition-list__definition">Engineering</dd>
      </dl>
    </li>
    <li class="das-search-results__list-item">
      <h2 class="govuk-heading-m das-search-results__heading">
        <a href="#" class="das-search-results__link">Able seafarer (deck) (level 2)</a>
      </h2>
      <p class="govuk-body das-search-results__body">Working as part of the navigation department on ships and other
        vessels, keeping watch and maintaining safety and security, and carrying out a range of practical tasks.</p>
      <dl class="das-definition-list das-definition-list--meta das-search-results__meta">
        <dt class="das-definition-list__title">Sector</dt>
        <dd class="das-definition-list__definition">Transport and logistics</dd>
      </dl>
    </li>
    <li class="das-search-results__list-item">
      <h2 class="govuk-heading-m das-search-results__heading">
        <a href="#" class="das-search-results__link">Maecenas mollis consequat</a>
      </h2>
      <p class="govuk-body das-search-results__body">Aenean ut egestas leo. Vestibulum mollis auctor leo et aliquam.
        Duis eget turpis turpis. Integer scelerisque lectus turpis, eu finibus augue lacinia ac.</p>
      <dl class="das-definition-list das-definition-list--meta das-search-results__meta">
        <dt class="das-definition-list__title">Locations covered</dt>
        <dd class="das-definition-list__definition">National coverage</dd>
        <dt class="das-definition-list__title">Address</dt>
        <dd class="das-definition-list__definition">Huntingdon, PE29 3NU</dd>
      </dl>
    </li>
    <li class="das-search-results__list-item">
      <h2 class="govuk-heading-m das-search-results__heading">
        <a href="#" class="das-search-results__link">Animal trainer</a>
      </h2>
      <p class="govuk-body das-search-results__body">Planning, managing, delivering and reviewing the training of
        animals.</p>
    </li>
    <li class="das-search-results__list-item">
      <h2 class="govuk-heading-m das-search-results__heading">
        <a href="#" class="das-search-results__link">Aliquam nec est lacinia</a>
      </h2>
    </li>
  </ol>
</div>