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.


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' }}
          {{search submit=false instant=settings.instant_search class='form-field border rounded bg-white mb-0 transition'}}
          <svg class="search-icon transition" xmlns="" 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"/>

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.