University of Leeds Design System v1.0.13

Global Search

Guidance

The @uol-header-global-search component provides a consistent global search allowing users to find information from across University of Leeds websites.

NB

We plan to deliver a component for local search at a later date.

Developer guidance

The @uol-header-global-search component should be included as part of the @uol-header-global-masthead

{% if search %}
  <form id="uol-global-masthead__search-form" class="uol-global-masthead__search-form" action="{{ search.action }}">
    <label class="uol-global-masthead__search-label" for="global-masthead__search-field">{{ search.input_label }}</label>
    <input class="uol-global-masthead__search-input" id="global-masthead__search-field" name="search-query" type="search" placeholder="{{ search.input_placeholder }}">
    <button class="uol-global-masthead__search-submit" type="submit">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" aria-hidden="true" focusable="false">
        <path d="M20.67,18.67H19.61l-.37-.36a8.66,8.66,0,1,0-.93.93l.36.37v1.06l6.66,6.65,2-2Zm-8,0a6,6,0,1,1,6-6A6,6,0,0,1,12.67,18.67Z"></path>
      </svg>
      <span class="hide-accessible">{{ search.submit_label }}</span>
    </button>
  </form>
{% endif %}
 
<form id="uol-global-masthead__search-form" class="uol-global-masthead__search-form" action="/example-form-action">
    <label class="uol-global-masthead__search-label" for="global-masthead__search-field">Search leeds.ac.uk</label>
    <input class="uol-global-masthead__search-input" id="global-masthead__search-field" name="search-query" type="search" placeholder="Search leeds.ac.uk">
    <button class="uol-global-masthead__search-submit" type="submit">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" aria-hidden="true" focusable="false">
            <path d="M20.67,18.67H19.61l-.37-.36a8.66,8.66,0,1,0-.93.93l.36.37v1.06l6.66,6.65,2-2Zm-8,0a6,6,0,1,1,6-6A6,6,0,0,1,12.67,18.67Z"></path>
        </svg>
        <span class="hide-accessible">Search all leeds.ac.uk</span>
    </button>
</form>
 
{
  "search": {
    "action": "/example-form-action",
    "input_label": "Search leeds.ac.uk",
    "input_placeholder": "Search leeds.ac.uk",
    "submit_label": "Search all leeds.ac.uk"
  }
}