Framework Component Library

Search 

<div class="site_search" id="site_search_3" role="search" itemscope itemtype="https://schema.org/WebSite" aria-labelledby="site_search_3_title">
    <meta itemprop="url" content="http://example.dev.fastspot.com/site">
    <h2 class="site_search_title" id="site_search_3_title">
        Site Search
    </h2>
    <form class="site_search_form" action="/components/preview/template-search" itemprop="potentialAction" itemscope itemtype="http://schema.org/SearchAction">
        <meta itemprop="target" content="http://example.dev.fastspot.com/site/components/preview/template-search?q={q}">
        <label class="site_search_label" for="site_search_3_input">
            Search
        </label>
        <div class="site_search_field">
            <input class="site_search_input" id="site_search_3_input" itemprop="query-input" type="search" name="q" required>
            <div class="site_search_submit">

                <button class="
		button_bordered
				
	" id="site_search_3_button" aria-labelledby="site_search_3_title site_search_3_button" type="submit">
                    <span class="button_bordered_inner">
                        <span class="button_bordered_icon" aria-hidden="true">
                            <svg class="icon icon_search">
                                <use href="/images/icons.svg#search" />
                            </svg>
                        </span>
                    </span>
                </button>
            </div>
        </div>
    </form>
</div>
 
{#
	{% include '@partial-search' with {
		modifier: 'modifier',
		aria_label: 'Site Search',
		label: 'Search',
		placeholder: '',
		button_text: 'Submit'
	} %}
#}

{% set id = uniqid('site_search') %}

<div
	class="site_search{% if modifier %} site_search_{{ modifier }}{% endif %}"
	id="{{ id }}"
	role="search"
	itemscope
	itemtype="https://schema.org/WebSite"
	aria-labelledby="{{ id }}_title"
>
	<meta itemprop="url" content="http://{{ config.domain }}">
	<h2 class="site_search_title" id="{{ id }}_title">
		Site Search
	</h2>
	<form
		class="site_search_form"
		action="/components/preview/template-search"
		itemprop="potentialAction"
		itemscope
		itemtype="http://schema.org/SearchAction"
	>
		<meta
			itemprop="target"
			content="http://{{ config.domain }}/components/preview/template-search?q={q}"
		>
		<label class="site_search_label" for="{{ id }}_input">
			{{ label ?: 'Search' }}
		</label>
		<div class="site_search_field">
			<input
				class="site_search_input"
				id="{{ id }}_input"
				itemprop="query-input"
				type="search"
				name="q"
				{% if placeholder %}placeholder="{{ placeholder }}"{% endif %}
				required
			>
			<div class="site_search_submit">
				{% include '@partial-button' with {
					classes: {
						base: 'button_bordered'
					},
					id: id ~ '_button',
					attributes: {
						'aria-labelledby': id ~ '_title ' ~ id ~ '_button',
						'type': 'submit'
					},
					title: button_text,
					icon: 'search'
				} %}
			</div>
		</div>
	</form>
</div>

No notes defined.