Design Seeds Boiler - Component Library

Search 

<div class="search__wrap" id="searchBar">
    <input for="" type="search" class="form__input form__input--no-brd" for="" placeholder="Search">
    <button class="search__btn" type="submit">
        <span class="u-visually-hidden">Search</span>
        <div class="search__btn-icon">

            <svg viewBox="0 0 512 512" class="a-icon__svg a-icon__svg--x1">
                <use xlink:href="#icon__search"></use>
            </svg>

        </div>
    </button>
</div>
<div class="search__toggle">
    <button id="searchToggle" aria-label="toggle search field">
        <div class="search__toggle-item search__toggle-open" data-search-toggle="open">

            <svg viewBox="0 0 512 512" class="a-icon__svg a-icon__svg--x2">
                <use xlink:href="#icon__search"></use>
            </svg>

        </div>
        <div class="search__toggle-item search__toggle-close" data-search-toggle="close">

            <svg viewBox="0 0 384 512" class="a-icon__svg a-icon__svg--x2">
                <use xlink:href="#icon__xmark"></use>
            </svg>

        </div>
    </button>
</div>
 
<div class="search__wrap" id="searchBar">
    {% render "@form-input" with {'classes': 'form__input--no-brd', 'placeholder' : 'Search', 'type' : 'search'  } %} 
    <button class="search__btn" type="submit">
    <span class="u-visually-hidden">Search</span>
    <div class="search__btn-icon">
        {% render "@icon--icon__search" with {'class': 'a-icon__svg--x1'} %}  
    </div>
    </button>
</div>
<div class="search__toggle">
    <button id="searchToggle" aria-label="toggle search field">
        <div class="search__toggle-item search__toggle-open" data-search-toggle="open">
            {% render "@icon--icon__search" with {'class': 'a-icon__svg--x2'} %}  
        </div>
        <div class="search__toggle-item search__toggle-close"  data-search-toggle="close">
            {% render "@icon--icon__xmark" with {'class': 'a-icon__svg--x2'} %}  
        </div>
    </button>
</div>
 
/* No context defined. */

No notes defined.