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)

Library search element

This variation is for the library search which uses:

  • .bg-mint-10-dark
  • search field
  • submit button
  • related links stratum
<!-- COMPONENT: Search form -->
<div class="half-padding bg-mint-10-dark">
    <div class="row column">
        <form class="course-search search-form" method="get" action="/courses/search/">
            <label class="screen-reader" for="course-search-query">Search for a book, journal article or databases</label>
            <input id="course-search-query" class="search-field" name="query" type="text" placeholder="Search for a book, journal article or databases" title="Type search term here">
            <input class="search-button" type="submit" value="search">
        </form>
    </div>
</div>
<div class="search-links bg-steel-85-light">
    <div class="row column">
        <ul class="no-bullet-list inline-list">
            <li><a href="https://bath-ac-primo.hosted.exlibrisgroup.com/primo-explore/search?vid=44BAT_VU1&tab=local&scope=CSCOP_44BAT_DEEP&sortby=rank&pcAvailability=false&mode=advanced">Advanced Search</a></li>
        </ul>
    </div>
</div>
<!-- End component: Search form -->
  • Handle: @library-search
  • Preview:
  • Filesystem Path: components/common-components/search-bar/library-search/library-search.hbs