Sections

Hero sections

This pattern can be used on any page, but is most commonly found on the Home page.

  • <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>