<link media="all" rel="stylesheet" href="/assets/themes/default/css/hero-search.css?cb=">
<div class="hero-search">
<div class="hero-search__inner">
<h1 class="hero-search__title"><strong>16</strong> Results for ‘<strong>Dart Enterprises</strong>’</h1>
<div class="hero-search__search-container">
<form action="" method="GET">
<label for="hero-search"><span>Search</span></label>
<input type="text" name="search" placeholder="What are you looking for?" value="" />
<button type='submit' value='Submit' class="hero-search__submit-button" data-text="Search">Search</button>
</div>
</div>
</div>
<link media="all" rel="stylesheet" href="/assets/themes/{{theme}}/css/hero-search.css?cb={{cacheBuster}}">
<div class="hero-search">
<div class="hero-search__inner">
<h1 class="hero-search__title">{{{title}}}</h1>
<div class="hero-search__search-container">
<form action="" method="GET">
<label for="hero-search"><span>Search</span></label>
<input type="text" name="search" placeholder="{{searchPlaceholderText}}" value="{{searchTerm}}" />
<button type='submit' value='Submit' class="hero-search__submit-button"
data-text="{{searchButtonText}}">{{searchButtonText}}</button>
</div>
</div>
</div>
{
"theme": "default",
"firstInstance": true,
"title": "<strong>16</strong> Results for ‘<strong>Dart Enterprises</strong>’",
"searchPlaceholderText": "What are you looking for?",
"searchButtonText": "Search"
}
@import 'source/scss/01-settings/_import';
@import 'source/scss/02-tools/_import';
.hero-search {
@extend %spacer-large;
display: flex;
justify-content: center;
&__inner {
max-width: calc(#{$grid-container} / 2);
}
&__title {
@extend %heading02;
}
&__subtitle {
@extend %heading04;
}
label {
@extend %visually-hidden;
}
}
No notes defined.