<div class="mainSearch js-header-target is-open" id="MainSearch">
<div class="l-container">
<form class="mainSearch_form" action="$Link" method="get">
<input type="text" name="searchByKeywords" id="mainSearchField" class="mainSearch_input js-focus-target" placeholder="Search..." autocomplete="off">
<label for="mainSearchField" class="u-sr-only">
Search
</label>
<button class="mainSearch_btn" type="submit">
<span class="i i-search-white"></span>
<span class="u-sr-only">
Submit search
</span>
</button>
</form>
</div>
</div>
<div class="mainSearch js-header-target {{ class }}" id="MainSearch">
<div class="l-container">
<form class="mainSearch_form" action="$Link" method="get">
<input type="text" name="searchByKeywords" id="mainSearchField" class="mainSearch_input js-focus-target" placeholder="Search..." autocomplete="off">
<label for="mainSearchField" class="u-sr-only">
Search
</label>
<button class="mainSearch_btn" type="submit">
<span class="i i-search-white"></span>
<span class="u-sr-only">
Submit search
</span>
</button>
</form>
</div>
</div>
{
"label": "Lorem ipsum",
"labelLong": "Lorem ipsum dolor sit amet",
"htmlText": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus at laoreet. Sed congue sollicitudin lacus vitae porttitor. Integer convallis maximus odio.</p>",
"htmlTextMedium": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt.</p>",
"htmlTextShort": "<p>Integer varius tincidunt purus at laoreet. Sed congue sollicitudin.</p>",
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus. Integer convallis maximus odio.",
"url": "#",
"videoUrl": "https://www.youtube.com/embed/roS6oFjCDhc",
"class": "is-open"
}
The search form is included in the header and hidden. It is toggled by adding a a is-open
class via a button (button is not displayed here).
The white space at the top of the element is needed to dosplay the search correctly inside the header.
For demonstration purposes the .is-open
class is added in this example.
To see a working implementation visit https://www.unibz.it and click the search icon in the header or have a look at the “Full Header” example in this library.