Usage
Use .hero
to create a flexible hero section.
A simple hero section typically has a background image and presents a search bar:
-
-
<section class="hero bg-cover bg-center bg-home py-9"> <div class="container"> <div class="search rounded max-w-md my-4 mx-auto"> <h2 class="sr-only"> {{t 'search' }} </h2> {{search submit=false instant=settings.instant_search class='form-field border rounded bg-white mb-0 transition'}} <svg class="search-icon transition" xmlns="http://www.w3.org/2000/svg" focusable="false" viewBox="0 0 12 12" aria-hidden="true"> <circle cx="4.5" cy="4.5" r="4" fill="none" stroke="currentColor"/> <path stroke="currentColor" stroke-linecap="round" d="M11 11L7.5 7.5"/> </svg> </div> </div> </section>
Being little more than a styled container, you can add easily add a title and description as well as other content like popular search terms and links to promoted articles.
For examples, please refer to the hero sections page of the Pattern Library.