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:
.bg-cornflower).bg-mint-10-dark).bg-violet-25-dark)This variation is for the staff search which uses:
.bg-cornflower
<!-- COMPONENT: Search form -->
<div class="half-padding bg-cornflower">
<div class="row column">
<form class="staff-search search-form" method="get" action="https://www.bath.ac.uk/contact/">
<label class="screen-reader" for="staff-search-query">Search for a member of staff</label>
<input id="staff-search-query" class="search-field" name="query" type="text" placeholder="Search for a member of staff" title="Type staff name 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="http://www.bath.ac.uk/contact/?search=advanced">Advanced Search</a></li>
</ul>
</div>
</div>
<!-- End component: Search form -->