Sections

Category lists

Categories are the top-level organizing containers of your Zendesk Help Center.

Zendesk page templates only provide access to categories on the Home page, however using our micro-templating system you can display a complete list of categories anywhere in the Help Center and style them however you like.

Blocks

Presenting categories in blocks or cards is a popular choice, particularly on the Home page.

  • <ul class="list-unstyled row row-sm my-6">
      {{#each categories}}
        {{#if ../has_multiple_categories}}
          <li class="md:col-6 lg:col-4 text-center mb-4">
            <a class="card p-5 link-plain border-primary h-full hover:text-white hover:bg-primary" href="{{url}}">
              <h3 class="h4 m-0 font-medium text-inherit">
                {{name}}
              </h3>
              {{#if description}}
                <p class="mt-3 mb-auto">
                  {{excerpt description}}
                </p>
              {{/if}}
            </a>
          </li>
        {{else}}
          {{#each sections}}
            <li class="md:col-6 lg:col-4 text-center mb-4">
              <a class="card p-5 link-plain border-primary h-full hover:text-white hover:bg-primary" href="{{url}}">
                <h3 class="h4 m-0 font-medium text-inherit">
                  {{name}}
                </h3>
                {{#if description}}
                  <p class="mt-3 mb-auto">
                    {{excerpt description}}
                  </p>
                {{/if}}
              </a>
            </li>
          {{/each}}
        {{/if}}
      {{/each}}
    </ul>
    {{pagination}}

Examples that include icons, like the one below, make use of the {{asset}} helper. For more advanced use-cases, our Images plugin can be used.

Cards

Lists

List groups

Tabs

Toggles

Examples like those above, which are more likely to be used outside of just the Home page, can be created using our micro-templating system. They can also be used for general navigation instead of just representing categories.