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.

Standard category blocks

Preview
Code

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

Grow on hover effect Get code

Background color on hover effect Get code

Cards

Cards with border border Get code

Cards with icons Get code

Lists

Lists with links Get code

List groups

List group with icons Get code

Tabs

Collapsible tabs with dropdown menus Get code

Large collapsible tabs Get code

Toggles

Toggles Get code

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.

Content

Layout