Short search form
This component is used for the search at the top-right of every page on the main Oxfordshire County Council website. There is only ever one short search form on any page.
<div class="occlss-form" action="#" method="post" novalidate>
<div class="occlss-layout">
<div class="occlss-form__short-search-group occlss-layout__col occlss-layout__col--sm-10 occlss-layout__col--md-9 occlss-layout__col--12 occlss-layout__col--bleed">
<div class="occlss-form-cntrls occlss-form-cntrls--short-search ">
<span class="occlss-icon occlss-icon--search occlss-form-cntrls__short-search-icon" aria-hidden="true">
<svg aria-hidden="true" class="occlss-icon__container">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/images/occlss/occlss-sprite.svg#search" class="icon__source icon__source--svg"></use>
</svg>
</span>
<label class="occlss-u-visuallyhidden" for="occlss-short-search-form-input-da1d121aq">Search</label>
<input type="text" class="occlss-form-cntrls__input occlss-form-cntrls__input--short-search" id="occlss-short-search-form-input-da1d121aq" name="Search">
</div>
</div>
<div class="occlss-layout__col occlss-layout__col--sm-2 occlss-layout__col--md-3 occlss-layout__col--12 occlss-layout__col--bleed">
<button type="submit" class="occlss-button occlss-button--search occlss-button--fullwidth occlss-form__short-search-submit">
Search
</button>
</div>
</div>
</div>
Changelog
2.4.0
- Breakpoint added when the button scaled it will be enough space for space
1.0.0
- Component added