Hilbert Component Library

Search Banner 

<div id="search-bar" class="search_banner js-search-banner">
    <div class="fs-row fs-lg-justify-center">
        <div class="fs-cell fs-lg-10">
            <div class="search_banner_inner">
                <form action="#" class="search_banner_form">
                    <div class="search_banner_form_grid">
                        <div class="search_banner_form_grid_item is_input">
                            <label for="search" class="visually_hide search_banner_label">Search</label>
                            <input type="text" class="search_banner_input" name="search" id="search" placeholder="Find what you're looking for">
                        </div>
                        <div class="search_banner_form_grid_item is_submit">
                            <button type="submit" class="search_banner_submit" aria-label="Submit">
                                <svg class="icon icon_search">
                                    <use href="/images/icons.svg#search" />
                                </svg>
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <a href="#search-bar" class="search_banner_toggle js-search-banner-toggle js-swap" data-swap-target=".search_banner" data-swap-linked="search-banner">
        <span class="search_banner_toggle_inner_default search_banner_toggle_inner">
            <span class="search_banner_toggle_label_default search_banner_toggle_label">Close</span>
            <span class="search_banner_toggle_icon_default search_banner_toggle_icon" aria-hidden="true">
                <svg class="icon icon_close">
                    <use href="/images/icons.svg#close" />
                </svg>
            </span>
        </span>
    </a>
</div>
 
<div id="search-bar" class="search_banner js-search-banner">
	<div class="fs-row fs-lg-justify-center">
		<div class="fs-cell fs-lg-10">
			<div class="search_banner_inner">
				<form action="#" class="search_banner_form">
					<div class="search_banner_form_grid">
						<div class="search_banner_form_grid_item is_input">
							<label for="search" class="visually_hide search_banner_label">Search</label>
							<input type="text" class="search_banner_input" name="search" id="search" placeholder="Find what you're looking for">
						</div>
						<div class="search_banner_form_grid_item is_submit">
							<button type="submit" class="search_banner_submit" aria-label="Submit">
								{{ icon("search") }}
							</button>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>

	{% include '@partial-link-toggle' with {
		class: 'search_banner',
		js: true,
		title: 'Close',
		url: '#search-bar',
		icon: 'close',
		swap_target: '.search_banner',
		swap_link: 'search-banner'
	} %}
</div>

No notes defined.