Sections

Content

Layout

Navigation

Category lists

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

In this article

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 
  • <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 bg-white 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 bg-white 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.