Hero sections

Hero sections are used to engage visitors and present important information or actions like search.

Many of our themes already have a customizable hero section on the Home page, with some also featuring them on the Category, Section and Article pages. You can use these patterns on any page in your help center.

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

Hero with search bar
View code
<div class="hero relative overflow-hidden{{#is settings.hero_image_style 'standard'}} bg-home bg-cover bg-center{{/is}}">
  <div class="relative container z-30{{#if settings.fixed_header}} mt-6{{/if}} py-6 lg:py-8">
  
    {{! Search bar }}
    <div class="search{{#if settings.search_translucent}} search-translucent blur{{/if}} text-base max-w-md my-4{{#is settings.hero_content_alignment 'center'}} mx-auto{{/is}}">
      <h2 class="sr-only">{{ t 'search' }}</h2>
      {{#if settings.search_placeholder}}
        {{#if settings.use_translations}}
          {{search class='form-field mb-0' instant=settings.instant_search scoped=settings.scoped_kb_search submit=settings.show_search_button placeholder=(dc settings.search_placeholder)}}
        {{else}}
          {{search class='form-field mb-0' instant=settings.instant_search scoped=settings.scoped_kb_search submit=settings.show_search_button placeholder=settings.search_placeholder}}
        {{/if}}
      {{else}}
        {{search class='form-field mb-0' instant=settings.instant_search scoped=settings.scoped_kb_search submit=settings.show_search_button}}
      {{/if}}
      <svg class="search-icon fill-current transition" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" aria-hidden="true">
        <use xlink:href="#icon-search" />
      </svg>
    </div>
  </div>

  {{#isnt settings.hero_image_style 'standard'}}
    {{#isnt settings.hero_image_style 'parallax'}}
    
      {{! Background image (overlay) }}
      <div class="absolute z-20 top-0 left-0 h-full w-full bg-home{{#is settings.hero_image_style 'overlay'}} bg-cover bg-center{{/is}}{{#is settings.hero_image_style 'overlay-pattern'}} bg-contain bg-repeat{{/is}}"></div>
    {{/isnt}}
  {{/isnt}}

  {{! Background color }}
  <div class="absolute z-10 top-0 left-0 h-full w-full bg-hero"></div>

  {{#is settings.hero_image_style 'parallax'}}
    {{! Background image (parallax) }}
    <div class="absolute z-0 top-0 left-0 w-full h-full">
      <div class="relative w-full h-full overflow-hidden">
        <div class="absolute top-0 left-0 w-full bg-home bg-cover bg-center" x-data="Widgets.parallaxImage" style="height: 150%"></div>
      </div>
    </div>
  {{/is}}
</div>

Background image

Use the Hero hero image setting in the Images setting group to change the background image displayed in the primary hero section.

The background image is applied using the .bg-home class name, so if you have multiple hero sections in your help center and would like them to have different background images, you can replace that class name with others (that reference images as theme settings or theme assets), custom CSS or an inline background-image style declaration.

Use the Hero image style to change how the background image appears. The options include:

  • Show the image above the background color like in the example above (“Overlay”)
  • Show the image above the background color in a repeating pattern (“Overlay pattern”)
  • Show the image behind the background color (“Behind background”)
  • Apply a parallax effect to the image as the user scrolls down the page (“Parallax effect”).

Background color

Use the Hero background color 1 and Hero background color 2 settings to customize the background color of the hero section. By adjusting the opacity of those colors using the color picker you can have more or less of the background image appear.

Hero with blue background color
View code
<div class="hero relative overflow-hidden{{#is settings.hero_image_style 'standard'}} bg-home bg-cover bg-center{{/is}}">
  <div class="relative container z-30{{#if settings.fixed_header}} mt-6{{/if}} py-6 lg:py-8">
  
    {{! Hero title and text }}
    <div class="my-6 text-{{settings.hero_content_alignment}}{{#unless settings.hero_heading}}{{#unless settings.hero_text}} hidden{{/unless}}{{/unless}}">
      {{~#if settings.hero_heading}}
        <h1 class="font-size-4xl lg:font-size-5xl">
          {{~#if settings.use_translations}}
           {{dc settings.hero_heading}}
          {{else}}
            {{settings.hero_heading}}
          {{/if~}}
        </h1>
      {{/if~}}
      {{~#if settings.hero_text}}
        <p class="font-size-xl">
         {{~#if settings.use_translations}}
            {{dc settings.hero_text}}
          {{else}}
            {{settings.hero_text}}
          {{/if~}}
        </p>
      {{/if~}}
    </div>
      
    {{! Search bar }}
    <div class="search{{#if settings.search_translucent}} search-translucent blur{{/if}} font-size-lg lg:font-size-xl text-base max-w-md my-4{{#is settings.hero_content_alignment 'center'}} mx-auto{{/is}}">
      <h2 class="sr-only">{{ t 'search' }}</h2>
      {{#if settings.search_placeholder}}
        {{#if settings.use_translations}}
          {{search class='form-field mb-0' instant=settings.instant_search scoped=settings.scoped_kb_search submit=settings.show_search_button placeholder=(dc settings.search_placeholder)}}
        {{else}}
          {{search class='form-field mb-0' instant=settings.instant_search scoped=settings.scoped_kb_search submit=settings.show_search_button placeholder=settings.search_placeholder}}
        {{/if}}
      {{else}}
        {{search class='form-field mb-0' instant=settings.instant_search scoped=settings.scoped_kb_search submit=settings.show_search_button}}
      {{/if}}
      <svg class="search-icon fill-current transition" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" aria-hidden="true">
        <use xlink:href="#icon-search" />
      </svg>
    </div>
  </div>

  {{#isnt settings.hero_image_style 'standard'}}
    {{#isnt settings.hero_image_style 'parallax'}}
    
      {{! Background image (overlay) }}
      <div class="absolute z-20 top-0 left-0 h-full w-full bg-home{{#is settings.hero_image_style 'overlay'}} bg-cover bg-center{{/is}}{{#is settings.hero_image_style 'overlay-pattern'}} bg-contain bg-repeat{{/is}}"></div>
    {{/isnt}}
  {{/isnt}}

  {{! Background color }}
  <div class="absolute z-10 top-0 left-0 h-full w-full bg-hero"></div>

  {{#is settings.hero_image_style 'parallax'}}
    {{! Background image (parallax) }}
    <div class="absolute z-0 top-0 left-0 w-full h-full">
      <div class="relative w-full h-full overflow-hidden">
        <div class="absolute top-0 left-0 w-full bg-home bg-cover bg-center" x-data="Widgets.parallaxImage" style="height: 150%"></div>
      </div>
    </div>
  {{/is}}
</div>

Use the Hero background gradient setting to change how those colors are used. For example, you can have a solid background color if both colors are the same or use linear, conic and radial gradients.

Hero with heading and dark background
View code
<div class="hero relative overflow-hidden{{#is settings.hero_image_style 'standard'}} bg-home bg-cover bg-center{{/is}}">
  <div class="relative container z-30{{#if settings.fixed_header}} mt-6{{/if}} py-6 lg:py-8">
  
    {{! Hero title and text }}
    <div class="my-6 text-{{settings.hero_content_alignment}}{{#unless settings.hero_heading}}{{#unless settings.hero_text}} hidden{{/unless}}{{/unless}}">
      {{~#if settings.hero_heading}}
        <h1 class="font-size-4xl lg:font-size-5xl">
          {{~#if settings.use_translations}}
           {{dc settings.hero_heading}}
          {{else}}
            {{settings.hero_heading}}
          {{/if~}}
        </h1>
      {{/if~}}
      {{~#if settings.hero_text}}
        <p class="font-size-xl">
         {{~#if settings.use_translations}}
            {{dc settings.hero_text}}
          {{else}}
            {{settings.hero_text}}
          {{/if~}}
        </p>
      {{/if~}}
    </div>
      
    {{! Search bar }}
    <div class="search{{#if settings.search_translucent}} search-translucent blur{{/if}} font-size-lg lg:font-size-xl text-base max-w-md my-4{{#is settings.hero_content_alignment 'center'}} mx-auto{{/is}}">
      <h2 class="sr-only">{{ t 'search' }}</h2>
      {{#if settings.search_placeholder}}
        {{#if settings.use_translations}}
          {{search class='form-field mb-0' instant=settings.instant_search scoped=settings.scoped_kb_search submit=settings.show_search_button placeholder=(dc settings.search_placeholder)}}
        {{else}}
          {{search class='form-field mb-0' instant=settings.instant_search scoped=settings.scoped_kb_search submit=settings.show_search_button placeholder=settings.search_placeholder}}
        {{/if}}
      {{else}}
        {{search class='form-field mb-0' instant=settings.instant_search scoped=settings.scoped_kb_search submit=settings.show_search_button}}
      {{/if}}
      <svg class="search-icon fill-current transition" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" aria-hidden="true">
        <use xlink:href="#icon-search" />
      </svg>
    </div>
  </div>

  {{#isnt settings.hero_image_style 'standard'}}
    {{#isnt settings.hero_image_style 'parallax'}}
    
      {{! Background image (overlay) }}
      <div class="absolute z-20 top-0 left-0 h-full w-full bg-home{{#is settings.hero_image_style 'overlay'}} bg-cover bg-center{{/is}}{{#is settings.hero_image_style 'overlay-pattern'}} bg-contain bg-repeat{{/is}}"></div>
    {{/isnt}}
  {{/isnt}}

  {{! Background color }}
  <div class="absolute z-10 top-0 left-0 h-full w-full bg-hero"></div>

  {{#is settings.hero_image_style 'parallax'}}
    {{! Background image (parallax) }}
    <div class="absolute z-0 top-0 left-0 w-full h-full">
      <div class="relative w-full h-full overflow-hidden">
        <div class="absolute top-0 left-0 w-full bg-home bg-cover bg-center" x-data="Widgets.parallaxImage" style="height: 150%"></div>
      </div>
    </div>
  {{/is}}
</div>

Use the Hero heading and Hero heading color settings to add a heading to the hero section and customize its color, respectively.

Hero with heading and light background
View code
<div class="hero relative overflow-hidden{{#is settings.hero_image_style 'standard'}} bg-home bg-cover bg-center{{/is}}">
  <div class="relative container z-30{{#if settings.fixed_header}} mt-6{{/if}} py-6 lg:py-8">
  
    {{! Hero title and text }}
    <div class="my-6 text-{{settings.hero_content_alignment}}{{#unless settings.hero_heading}}{{#unless settings.hero_text}} hidden{{/unless}}{{/unless}}">
      {{~#if settings.hero_heading}}
        <h1 class="font-size-4xl lg:font-size-5xl">
          {{~#if settings.use_translations}}
           {{dc settings.hero_heading}}
          {{else}}
            {{settings.hero_heading}}
          {{/if~}}
        </h1>
      {{/if~}}
      {{~#if settings.hero_text}}
        <p class="font-size-xl">
         {{~#if settings.use_translations}}
            {{dc settings.hero_text}}
          {{else}}
            {{settings.hero_text}}
          {{/if~}}
        </p>
      {{/if~}}
    </div>
      
    {{! Search bar }}
    <div class="search{{#if settings.search_translucent}} search-translucent blur{{/if}} search-lg font-size-xl text-base max-w-sm my-4 mx-auto shadow-lg{{#is settings.hero_content_alignment 'center'}} mx-auto{{/is}}">
      <h2 class="sr-only">{{ t 'search' }}</h2>
      {{#if settings.search_placeholder}}
        {{#if settings.use_translations}}
          {{search class='form-field mb-0' instant=settings.instant_search scoped=settings.scoped_kb_search submit=settings.show_search_button placeholder=(dc settings.search_placeholder)}}
        {{else}}
          {{search class='form-field mb-0' instant=settings.instant_search scoped=settings.scoped_kb_search submit=settings.show_search_button placeholder=settings.search_placeholder}}
        {{/if}}
      {{else}}
        {{search class='form-field mb-0' instant=settings.instant_search scoped=settings.scoped_kb_search submit=settings.show_search_button}}
      {{/if}}
      <svg class="search-icon fill-current transition" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" aria-hidden="true">
        <use xlink:href="#icon-search" />
      </svg>
    </div>
  </div>

  {{#isnt settings.hero_image_style 'standard'}}
    {{#isnt settings.hero_image_style 'parallax'}}
    
      {{! Background image (overlay) }}
      <div class="absolute z-20 top-0 left-0 h-full w-full bg-home{{#is settings.hero_image_style 'overlay'}} bg-cover bg-center{{/is}}{{#is settings.hero_image_style 'overlay-pattern'}} bg-contain bg-repeat{{/is}}"></div>
    {{/isnt}}
  {{/isnt}}

  {{! Background color }}
  <div class="absolute z-10 top-0 left-0 h-full w-full bg-hero"></div>

  {{#is settings.hero_image_style 'parallax'}}
    {{! Background image (parallax) }}
    <div class="absolute z-0 top-0 left-0 w-full h-full">
      <div class="relative w-full h-full overflow-hidden">
        <div class="absolute top-0 left-0 w-full bg-home bg-cover bg-center" x-data="Widgets.parallaxImage" style="height: 150%"></div>
      </div>
    </div>
  {{/is}}
</div>

The appearance of the search field can be updated using modifiers like .search-lg and .search-right as well as utility classes like .font-size-xl and .shadow-lg which increase the font size and add a box shadow, respectively.

Elements

Use the Popular keywords setting to add a list of popular search keywords below the search bar. You can select between built-in styles using the Popular keywords style setting or edit the associated micro-template to create your own look-and-feel.

The keywords should be identified in a comma-separated list as described on the Popular search terms extension page.

Suggestions as badges
View code
<div class="hero relative overflow-hidden{{#is settings.hero_image_style 'standard'}} bg-home bg-cover bg-center{{/is}}">
  <div class="relative container z-30{{#if settings.fixed_header}} mt-6{{/if}} py-6 lg:py-8">
    <div class="my-6 text-{{settings.hero_content_alignment}}{{#unless settings.hero_heading}}{{#unless settings.hero_text}} hidden{{/unless}}{{/unless}}">
      {{~#if settings.hero_heading}}
        <h1 class="font-size-4xl lg:font-size-5xl">
          {{~#if settings.use_translations}}
            {{dc settings.hero_heading}}
          {{else}}
            {{settings.hero_heading}}
          {{/if~}}
        </h1>
      {{/if~}}
      {{~#if settings.hero_text}}
        <p class="font-size-xl">
          {{~#if settings.use_translations}}
            {{dc settings.hero_text}}
          {{else}}
            {{settings.hero_text}}
          {{/if~}}
        </p>
      {{/if~}}
    </div>

    {{! Search bar }}
    <div class="search{{#if settings.search_translucent}} search-translucent blur{{/if}} font-size-lg lg:font-size-xl text-base max-w-md my-4{{#is settings.hero_content_alignment 'center'}} mx-auto{{/is}}">
      <h2 class="sr-only">{{ t 'search' }}</h2>
      {{~#if settings.search_placeholder}}
        {{#if settings.use_translations}}
          {{search class='form-field mb-0' instant=settings.instant_search scoped=settings.scoped_kb_search submit=settings.show_search_button placeholder=(dc settings.search_placeholder)}}
        {{else}}
          {{search class='form-field mb-0' instant=settings.instant_search scoped=settings.scoped_kb_search submit=settings.show_search_button placeholder=settings.search_placeholder}}
        {{/if}}
      {{else}}
        {{search class='form-field mb-0' instant=settings.instant_search scoped=settings.scoped_kb_search submit=settings.show_search_button}}
      {{/if~}}
      <svg class="search-icon fill-current transition" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" aria-hidden="true">
        <use xlink:href="#icon-search" />
      </svg>
    </div>

    {{~#isnt settings.popular_keywords_style 'none'}}
      {{~#if settings.popular_keywords}}
        {{! Popular keywords }}
        <div id="popular-keywords">
          <script type="text/javascript">
            ready(function() {
              Util.renderTemplate(document.getElementById('popular-keywords'), 'popular-keywords', {
                keywords: '{{#if settings.use_translations}}{{dc settings.popular_keywords}}{{else}}{{settings.popular_keywords}}{{/if}}'
              });
            })
          </script>
        </div>
      {{/if~}}
    {{/isnt~}}
  </div>

  {{~#isnt settings.hero_image_style 'standard'}}
    {{~#isnt settings.hero_image_style 'parallax'}}
      {{! Background image (overlay) }}
      <div class="absolute z-20 top-0 left-0 h-full w-full bg-home{{#is settings.hero_image_style 'overlay'}} bg-cover bg-center{{/is}}{{#is settings.hero_image_style 'overlay-pattern'}} bg-contain bg-repeat{{/is}}"></div>
    {{/isnt~}}
  {{/isnt~}}

  {{! Background color }}
  <div class="absolute z-10 top-0 left-0 h-full w-full bg-hero"></div>

</div>

Other content can be added below or above the search bar. For example, using our [Navigation extension] you could present a list of promoted articles.

Promoted articles
View code
<div class="hero relative overflow-hidden{{#is settings.hero_image_style 'standard'}} bg-home bg-cover bg-center{{/is}}">
  <div class="relative container z-30{{#if settings.fixed_header}} mt-6{{/if}} py-6 lg:py-8">
    <div class="my-6 text-{{settings.hero_content_alignment}}{{#unless settings.hero_heading}}{{#unless settings.hero_text}} hidden{{/unless}}{{/unless}}">
      {{~#if settings.hero_heading}}
        <h1 class="font-size-4xl lg:font-size-5xl">
          {{~#if settings.use_translations}}
            {{dc settings.hero_heading}}
          {{else}}
            {{settings.hero_heading}}
          {{/if~}}
        </h1>
      {{/if~}}
      {{~#if settings.hero_text}}
        <p class="font-size-xl">
          {{~#if settings.use_translations}}
            {{dc settings.hero_text}}
          {{else}}
            {{settings.hero_text}}
          {{/if~}}
        </p>
      {{/if~}}
    </div>

    {{! Search bar }}
    <div class="search{{#if settings.search_translucent}} search-translucent blur{{/if}} font-size-lg lg:font-size-xl text-base max-w-md my-4{{#is settings.hero_content_alignment 'center'}} mx-auto{{/is}}">
      <h2 class="sr-only">{{ t 'search' }}</h2>
      {{~#if settings.search_placeholder}}
        {{#if settings.use_translations}}
          {{search class='form-field mb-0' instant=settings.instant_search scoped=settings.scoped_kb_search submit=settings.show_search_button placeholder=(dc settings.search_placeholder)}}
        {{else}}
          {{search class='form-field mb-0' instant=settings.instant_search scoped=settings.scoped_kb_search submit=settings.show_search_button placeholder=settings.search_placeholder}}
        {{/if}}
      {{else}}
        {{search class='form-field mb-0' instant=settings.instant_search scoped=settings.scoped_kb_search submit=settings.show_search_button}}
      {{/if~}}
      <svg class="search-icon fill-current transition" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" aria-hidden="true">
        <use xlink:href="#icon-search" />
      </svg>
    </div>

    {{~#isnt settings.popular_keywords_style 'none'}}
      {{~#if settings.popular_keywords}}
        {{! Popular keywords }}
        <div id="popular-keywords">
          <script type="text/javascript">
            ready(function() {
              Util.renderTemplate(document.getElementById('popular-keywords'), 'popular-keywords', {
                keywords: '{{#if settings.use_translations}}{{dc settings.popular_keywords}}{{else}}{{settings.popular_keywords}}{{/if}}'
              });
            })
          </script>
        </div>
      {{/if~}}
    {{/isnt~}}

    {{! Promoted articles }}
    <div
      data-element="navigation"
      data-objects='[
        "sections",
        "articles"
      ]'
      data-properties='[
        "id",
        "name",
        "title",
        "body",
        "html_url",
        "position",
        "promoted",
        "draft",
        "section_id",
        "category_id",
        "created_at",
        "updated_at"
      ]'
      data-template="hero-articles"
      data-template-data='{ "heading": "Helpful articles", "numberColumns": 3 }'>
    </div>

    <template id="tmpl-hero-articles">
      <% var getColumnClasses = function(columnNumber) {
        var classNames = 'col-12';
        if (columnNumber >= 2) classNames += ' md:col-6';
        if (columnNumber >= 3) classNames += ' lg:col-4';
        if (columnNumber >= 4) classNames += ' xl:col-3';
        return classNames;
      } %>
      <% var promotedArticles = articles.filter(function(article) { return article.promoted; }).slice(0, 3) %>
      <% if (promotedArticles.length) { %>
        <% if (heading) { %>
          <h3 class="h4 uppercase tracking-wider text-center mt-7">
            <%= heading %>
          </h3>
        <% } %>
        <div class="row row-sm justify-content-center">
          <% promotedArticles.forEach(function(article, index) { %>
            <% var section = sections.filter(function(section) { return section.id === article['section_id']; })[0] || null; %>
            <div class="mb-4 text-center <%= getColumnClasses(numberColumns) %>">
              <div class="my-2">
                <a href="<%= article.html_url %>">
                  <%= article.title %>
                </a>
              </div>
              <% if (section) { %>
                <p class="my-0 text-gray-600">
                  <%= section.name %>
                </p>
              <% } %>
            </div>
          <% }) %>
        </div>
      <% } %>
    </template>

  </div>

  {{~#isnt settings.hero_image_style 'standard'}}
    {{~#isnt settings.hero_image_style 'parallax'}}
      {{! Background image (overlay) }}
      <div class="absolute z-20 top-0 left-0 h-full w-full bg-home{{#is settings.hero_image_style 'overlay'}} bg-cover bg-center{{/is}}{{#is settings.hero_image_style 'overlay-pattern'}} bg-contain bg-repeat{{/is}}"></div>
    {{/isnt~}}
  {{/isnt~}}

  {{! Background color }}
  <div class="absolute z-10 top-0 left-0 h-full w-full bg-hero"></div>

</div>

Because the hero section of the Home page of our themes is so configurable, most customization should be possible using theme settings alone. To add hero sections to other pages, or to add new elements to existing hero sections, you can selectively copy part of the code from one of the examples or copy it in full, pasting it into the appropriate part of your page template.

Related patterns

Dividers

Dividers

14 patterns

Footers

Footers

6 patterns