The search component looks different from a standard input field and is harder to recognize as such. It contains a button with a search icon to indicate its purpose.
This component is only used in the navigation.
The large version of the search component is used on the search results page.
This is the only component that breaks with the proposed use of the brand color (indicate links, buttons and clickable sections) and should probably be refactored in the near future to be more inline with other input fields.
<div class="search">
<label class="heading heading--tiny" for="input-search">search</label>
<input type="text" name="q" id="input-search" placeholder="for example: ISIN, Company name" class="search__input">
<button class="search__submit"><svg viewBox="0 0 24 24" class="icon icon--s ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/icons/sprite.svg#search"></use>
</svg></button>
</div>
<div class="search">
<label class="heading heading--tiny" for="input-search">search</label>
<input type="text" name="q" id="input-search" placeholder="for example: ISIN, Company name" class="search__input">
<button class="search__submit">{{{icon "search" size=iconSize}}}</button>
</div>
/* No context defined for this component. */