Flexible search bar element

The search bar is a flexible component that should be used to search topical content. Each search bar element must have a search field and a submit button, and has the option to have a dropdown menu and a related links stratum.

The background colours that are available for the search bar and their related purpose:

  • cornflower: about, search for contacts (.bg-cornflower)
  • mint: navigation, search for topical content (.bg-mint-10-dark)
  • violet: events, search for an event (.bg-violet-25-dark)

Course search element

This variation is for the course search which uses:

  • .bg-mint-10-dark
  • search field
  • dropdown menu
  • submit button
<!-- COMPONENT: Search form -->
<div class="half-padding bg-mint-10-dark">
    <div class="row column">
        <form class="course-search search-form" method="get" action="https://www.bath.ac.uk/courses/search/">
            <label class="screen-reader" for="course-search-query">Search for a course</label>
            <input id="course-search-query" class="search-field" name="query" type="text" placeholder="Search for a course" title="Type course search term here">
            <input name="collection" type="hidden" value="ce-production-courses">
            <div id="search-options-active-js" class="search-options">
                <label id="filter-label" class="screen-reader" for="course-search-filter">Filter your search</label>
                <select id="course-search-filter" aria-labelledby="filter-label">
                    <option value="">All courses</option>
                    <option value="undergraduate|2022">Undergraduate – 2022 courses</option>
                    <option value="undergraduate|2023">Undergraduate – 2023 courses</option>
                    <option value="postgraduate|2022">Taught postgraduate – 2022 courses</option>
                    <option value="postgraduate research|2022">Postgraduate research – 2022 courses</option>
                <input type="hidden" value="" name="f.Type of course|C" id="type-of-course">
                <input type="hidden" value="" name="f.Year of entry|E" id="year-of-entry">
            <input class="search-button" type="submit" value="search">
<!-- End component: Search form -->
  • Handle: @course-search
  • Preview:
  • Filesystem Path: components/ingredients/common-ingredients/search-bar/course-search/course-search.hbs