Sections

Content

Layout

Navigation

Hero sections

A hero section is a lightweight container for showcasing content. They are commonly used on the Home page, but can be used in any page template.

Usage

Use .hero to create a flexible hero section.

A simple hero section typically has a background image and presents a search bar:

Standard hero 
  • <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.