Version 0.40.0

UI Molecules

Search bar

<div class="sui-m-search-bar">
    <span class="sui-m-search-bar__icon">
        <i class="sui-a-icon as--fa-search"></i>
    </span>
    <input class="sui-a-form-control" type="search" placeholder="Search..."/>
</div>

Search loading

<div class="sui-m-search-bar as--loading">
    <span class="sui-m-search-bar__icon">
        <i class="sui-a-icon as--fa-search"></i>
    </span>
    <input class="sui-a-form-control" type="search" placeholder="Search..."/>
</div>

Search status

<div class="sui-m-search-bar as--with-results">
    <span class="sui-m-search-bar__icon">
        <i class="sui-a-icon as--fa-search"></i>
    </span>
    <input class="sui-a-form-control" type="search" placeholder="Search..."/>
</div>

<div class="sui-m-search-bar as--without-results">
    <span class="sui-m-search-bar__icon">
        <i class="sui-a-icon as--fa-search"></i>
    </span>
    <input class="sui-a-form-control" type="search" placeholder="Search..."/>
</div>
<div class="sui-m-search-bar">
    <span class="sui-m-search-bar__icon">
        <i class="sui-a-icon as--fa-search"></i>
    </span>
    <button class="sui-m-search-bar__clear">
        &times;
    </button>
    <input class="sui-a-form-control" type="search" placeholder="Search..."/>
</div>
<div class="sui-m-search-bar as--inline">
    <span class="sui-m-search-bar__icon">
        <i class="sui-a-icon as--fa-search"></i>
    </span>
    <button class="sui-m-search-bar__clear">
        &times;
    </button>
    <input class="sui-a-form-control" type="search" placeholder="Search..."/>
</div>