Sections

Hero sections

Hero sections are used to engage visitors and present important information or options.

Although commonly found on the Home page, this pattern can be used on any page. Several of our themes feature a full hero section on the Home page, with smaller versions carried through to Category, Section and/or Article pages.

A standard hero section contains little more than a search bar, as seen in Zendesk’s default Copenhagen theme.

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

The background image is applied using the .bg-home utility, which references the Home page hero image theme setting.

But you can include any other content. For example, a heading that serves to greet visitors is a used on many of our themes.

Different color variations can be easily created using our background color and background image utilities.

You can also combine them with other patterns, for example article lists to present promoted content or common search terms.