Content blocks and icons

Display icons against categories, sections and articles.

All of our themes provide content blocks to display categories or sections on the Home page. The blocks are fully configurable through theme settings, allowing you to replace the images through Zendesk Guide.

You can choose from several built-in styles, copy-and-paste one from another theme or our Pattern Library or create your own using our powerful micro-templating system. The example below demonstrates a style of content block found in our Braxton theme.

Grow on hover effect
View code
<template id="tmpl-content-blocks">
  <% var getColumnClasses = function(numberColumns) {
    var classNames = 'col-12';
    if (numberColumns >= 2) classNames += ' md:col-6';
    if (numberColumns >= 3) classNames += ' lg:col-4';
    if (numberColumns >= 4) classNames += ' xl:col-3';
    return classNames;
  } %>
  <div class="container text-<%= alignment %>">
    {{~#if settings.content_blocks_heading}}
      <h2 class="flex align-items-baseline mt-6" x-data="{ src: Theme.assets['content-blocks-heading'] }">
        <template x-if="src">
          <img class="svg-icon mr-2" src="{{asset 'placeholder.png'}}" alt="" aria-hidden="true" :src="src" />
        {{~#if settings.use_translations}}
          {{dc settings.content_blocks_heading}}
    <ul class="list-unstyled row row-sm justify-content-center mb-0">
      <% (categories.length > 1 ? categories : sections).forEach(function(block, index) { %>
        <li class="text-<%= alignment %> <%= getColumnClasses(numberColumns) %>">
          <a class="block link-plain text-inherit p-5 h-full transition-fast hover:bg-<%= color %> hover:text-<%= color %>-inverse hover:grow hover:shadow-lg" href="<%= block.html_url %>"
            x-data="{ hover: false }"
            @mouseover="hover = true"
            @mouseleave="hover = false">
            <% if (imageHeight) { %>
              <img alt="" src="<%= images[index] || images[0] %>" style="height: <%= imageHeight %>; width: auto;" />
            <% } %>
            <% if ( { %>
              <h2 class="<% if (numberColumns > 3) { %> h3<% } %>" :class="{ 'text-inherit': hover }">
                <%= %>
            <% } %>
            <% if (block.description) { %>
                <%= block.description %>
            <% } %>
      <% }) %>

Similar general purpose custom blocks, used to display custom links on your help center Home page, and contact blocks, used to present contact options, are also available and can be configured through theme settings.

Content blocks are bundled into all of our themes by default, so you can start using them straight away. They build upon our powerful micro-templating system and gives you full control over how the search terms look and behave.

Our themes allow you to add content blocks to the Home page using theme settings.

  1. In Zendesk Guide, click the Customize design icon (Customize icon) in the sidebar.

  2. Click Customize on the theme you want to edit.

  3. Expand the Content blocks setting group to reveal settings that allow you to configure various aspects of the blocks. Select a style from the Content blocks style setting dropdown list to have them appear on the Home page.

If you’d like to display the content blocks outside of the Home page, you can copy-and-paste the following HTML and JavaScript code into your desired position:

{{#isnt settings.content_block_style 'none'}}
  <div id="content-blocks">
    <script type="text/javascript">
      ready(function() {
        new Navigation(document.getElementById('content-blocks'), {
          collection: Theme.contentBlocks,
          template: 'content-blocks',
          templateData: {
            images: [
              "{{settings.content_block_1_image}}", "{{settings.content_block_2_image}}", "{{settings.content_block_3_image}}", "{{settings.content_block_4_image}}",
              "{{settings.content_block_5_image}}", "{{settings.content_block_6_image}}", "{{settings.content_block_7_image}}", "{{settings.content_block_8_image}}"
            imageHeight: "{{settings.content_block_image_height}}",
            numberColumns: {{settings.number_content_block_columns}},
            alignment: "{{settings.content_block_alignment}}",
            color: "{{settings.color_content_blocks}}"

The code in this example references one of the built-in micro-templates (with ID content-blocks), which you can edit or replace with your own custom micro-template.

For more information refer to the article on adding content blocks to your theme.

Related extensions

Animations and transitions Free

Animations and transitions

Add engaging animation and transition effects to elements.

Carousels Free


Present content in well defined and easy to follow steps.

Featured articles Free

Featured articles

Display a list of articles with one or more labels.