Hero search

The hero search is placed at the top of a homepage or section home and provides a targetted search for the specific site or section.

The hero search allows users to easily and quickly go to the area they are interested in.

<div class="hero-search">
  <div class="nsw-container">
    <div class="hero-search__content nsw-body-content">
      <h1 class="hero-search__title">NSW Government</h1>
      <p>Find information, access services and have your say.</p>
      <form role="search" class="hero-search__form">
        <div class="nsw-form-search">
          <label for="hero-search-input" class="sr-only">Search site for:</label>
          <input autocomplete="off" class="nsw-form-search__input" id="hero-search-input" name="hero-search" type="text">
          <button class="nsw-form-search__submit" type="submit">
            <svg class="nsw-icon" focusable="false" aria-hidden="true">
              <use xlink:href="#search"></use>
            </svg>
            <span class="sr-only">Search</span>
          </button>
        </div>
      </form>
      <div class="hero-search__suggested">
        <ul>
            <li><a href="#">COVID-19 (coronavirus</a></li>
            <li><a href="#">Water restrictions</a></li>
            <li><a href="#">Support for bushfire affected communities</a></li>
            <li><a href="#">Renew rego</a></li>
            <li><a href="#">Green slips</a></li>
            <li><a href="#">Driving, boating and transport</a></li>
            <li><a href="#">School and public holidays</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

 

Copy

Today, people rely more and more on search engines and search to find exactly what they want, without having to learn how an organisation has arranged it's information architecture.

The hero search is placed in a prominent position at the top of the page and provides the user with easy access to a targetted search.

An easily recognised search icon is used to help users comprehend the search.

 

Use the hero search for product or website homepages, on the top of directories, libraries or lists.

Use for sites or products with large volumes of content.

Use where the primary navigation of your users is via search. 

Use the suggested search links to provide access to popular searches. This may update dynamically based on popular search queries if the business logic is in place, or manually managed through a content management system.

Use when research has shown that users prefer to search rather than browse by navigation.

Do not use infield placeholder text.

Don't use on very small sites.

 

For the search results:

  • Present the most relevant results first.
  • For searches with many results use the pagination pattern and indicate how many results were found.
  • Display a clear message when no results are found and offer other search suggestions whenever possible.
  • Keep the original text in the input field. This facilitates the user's action if they wants to make a new search with some modifications in the input.
  • Have smart algorithms that can search for similar terms or can search even with misspelled words.
  • Where appropriate, highlight the search terms in the results.
  • Categorise the search results if they come from different areas (eg. docs, services, apps, tutorials, blogs).
  • Give the user control over their viewing options and ability to sort results (eg. relevancy, popularity, ratings, date).
  • Include enough of a description in the results for users to make a judgement as to whether that particular result is relevant.

 

The highlight bar is customisable with your brand colour, where a brand exemption has been approved. 

You will need to change the nsw-primary-highlight colour in the _settings.scss file.


$nsw-primary-highlight: #d7153a !default;