SIA Web Design Library

Site Search

No notes defined.

<div id="site-search" class="c-site-search">
    <button class="js-toggle c-button c-button--icon c-icon site-search-form__js-toggle" aria-expanded="false" aria-controls="site-search-form"><svg height='100px' width='100px' fill="#000000" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="25 25 50 50" x="0px" y="0px">
            <path d="M60.34,51.51a18.05,18.05,0,1,0-8.83,8.83L63.34,72.17a6.24,6.24,0,1,0,8.83-8.83ZM30,44A14,14,0,1,1,44,58,14,14,0,0,1,30,44ZM67.76,70a2.22,2.22,0,0,1-1.59-.66L55,58.2A19,19,0,0,0,58.2,55L69.34,66.17A2.24,2.24,0,0,1,67.76,70Z"></path>
        </svg><span class='sr-only'> Search</button>
    <div id='site-search-form'>
        <div class='c-search-form'>
            <form class='c-search-form' method="" action="">
                <div class='form-row'>
                    <div class='form-group'>
                        <label class='form-input form-input--search'>
                            <span class='form-field__label'>Keywords</span>
                            <input type='text' class='form-input form-input__email' name="" value="documents" placeholder='To search, type and press enter' />
                        </label>
                    </div>
                    <div class='form-group form-actions'>
                        <button class='c-button c-button--with-icon c-button--search' type='submit'><span>Search</span></button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
 
<div id="site-search" class="{{ get_component_class( 'site-search', display ) }}">
    <button class="js-toggle c-button c-button--icon c-icon site-search-form__js-toggle" aria-expanded="false" aria-controls="site-search-form">{{ svg( 'noun_Magnifying Glass_1515330.svg' )|raw }}<span class='sr-only'> {{ 'Search'|t }}</button>
    <div id='site-search-form'>
        {% include '@unit/forms/search-form.twig' with form %}
    </div>
</div>
 
{
  "form": {
    "keyword": "documents"
  }
}