Content blocks

Display categories, sections and/or articles in your help center using a variety of different layout styles.

Content blocks allow you to display categories, sections and/or articles in a variety of different styles. Like custom blocks and contact blocks, various aspects of the blocks are configurable through theme settings. For example, you can change the number of columns, color palette and image size.

Blocks

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

<template id="tmpl-content-blocks">
  <% 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;
  } %>
  <div class="container py-{{#is settings.bg_color settings.bg_color_content_blocks}}2{{else}}4{{/is}}">
    {{#if settings.content_blocks_heading}}
      <h2 class="inline-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" />
        </template>
        {{#if settings.use_translations}}
          {{dc settings.content_blocks_heading}}
        {{else}}
          {{settings.content_blocks_heading}}
        {{/if}}
      </h2>
    {{/if}}
    <ul class="list-unstyled row row-sm my-5">
      <% (categories.length > 1 ? categories : sections).forEach(function(block, index) { %>
        <li class="mb-4 text-<%= alignment %> <%= getColumnClasses(numberColumns) %>">
          <a class="card p-5 link-plain text-<%= color %> border-<%= color %> bg-white h-full hover:text-<%= color %>-inverse hover:bg-<%= color %>" href="<%= block.html_url %>">
            <% if (imageHeight) { %>
              <img class="mb-3" src="<%= images.length > index ? images[index] : images[images.length - 1] %>" alt="" style="height: <%= imageHeight %>; width: auto;" />
            <% } %>
            <% if (block.name) { %>
              <h3 class="h4 m-0 font-medium text-inherit">
                <%= block.name %>
              </h3>
            <% } %>
            <% if (block.description) { %>
              <p class="mt-3 mb-auto">
                <%= block.description %>
              </p>
            <% } %>
          </a>
        </li>
      <% }) %>
    </ul>
  </div>
</template>
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" />
        </template>
        {{~#if settings.use_translations}}
          {{dc settings.content_blocks_heading}}
        {{else}}
          {{settings.content_blocks_heading}}
        {{/if~}}
      </h2>
    {{/if~}}
    <ul class="list-unstyled row row-sm justify-content-center mb-0">
      <% (categories.length > 1 ? categories : sections).forEach(function(block, index) { %>
        <li class="<%= 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 (block.name) { %>
              <h2 class="<% if (numberColumns > 3) { %> h3<% } %>" :class="{ 'text-inherit': hover }">
                <%= block.name %>
              </h2>
            <% } %>
            <% if (block.description) { %>
              <p>
                <%= block.description %>
              </p>
            <% } %>
          </a>
        </li>
      <% }) %>
    </ul>
  </div>
</template>
Background color 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" />
        </template>
        {{~#if settings.use_translations}}
          {{dc settings.content_blocks_heading}}
        {{else}}
          {{settings.content_blocks_heading}}
        {{/if~}}
      </h2>
    {{/if~}}
    <ul class="list-unstyled row row-sm mt-4">
      <% (categories.length > 1 ? categories : sections).forEach(function(block, index) { %>
        <li class="mb-4 <%= getColumnClasses(numberColumns) %>">
          <a class="block p-6 border-radius h-full transition-fast hover:no-underline hover:bg-<%= color %>" href="<%= block.html_url %>">
            <% if (imageHeight) { %>
              <img class="mb-3" alt="" src="<%= images[index] || images[0] %>" style="height: <%= imageHeight %>; width: auto;" />
            <% } %>
            <% if (block.name) { %>
              <h3 class="h4 m-0 mt-auto">
                <%= block.name %>
                <svg class="svg-icon fill-current ml-1" viewBox="0 0 423 323" xmlns="http://www.w3.org/2000/svg">
                  <path d="M416,178 L277,317 C273,321 267,323 262,323 C256,323 251,321 246,317 C237,308 237,294 246,285 L347,184 L22,184 C10,184 0,174 0,162 C0,150 10,140 22,140 L347,140 L246,38 C237,30 237,16 246,7 C254,-2 268,-2 277,7 L416,146 C425,155 425,169 416,178 Z"></path>
                </svg>
              </h3>
            <% } %>
            <% if (block.description) { %>
              <p class="mt-2 mb-auto text-gray-600">
                <%= block.description %>
              </p>
            <% } %>
          </a>
        </li>
      <% }) %>
    </ul>
  </div>
</template>

Cards

Cards with bottom border
View code
<template id="tmpl-content-blocks">
  <% 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;
  } %>
  <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" />
        </template>
        {{~#if settings.use_translations}}
          {{dc settings.content_blocks_heading}}
        {{else}}
          {{settings.content_blocks_heading}}
        {{/if~}}
      </h2>
    {{/if~}}
    <ul class="list-unstyled row row-sm">
      <% (categories.length > 1 ? categories : sections).forEach(function(block, index) { %>
        <li class="mb-5 <%= getColumnClasses(numberColumns) %>">
          <a class="card px-6 py-5 h-full bg-white border-bottom-<%= color %> border-bottom-3 text-gray-600 hover:no-underline" href="<%= block.html_url %>">
            <% if (imageHeight) { %>
              <img alt="" src="<%= images[index] || images[0] %>" style="height: <%= imageHeight %>; width: auto;" />
            <% } %>
            <% if (block.name) { %>
              <h2 class="h3 my-4">
                <%= block.name %>
              </h2>
            <% } %>
            <% if (block.description) { %>
              <p>
                <%= block.description %>
              </p>
            <% } %>
          </a>
        </li>
      <% }) %>
    </ul>
  </div>
</template>
}
<template id="tmpl-content-blocks">
  <% 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;
  } %>
  <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" />
        </template>
        {{~#if settings.use_translations}}
          {{dc settings.content_blocks_heading}}
        {{else}}
          {{settings.content_blocks_heading}}
        {{/if~}}
      </h2>
    {{/if~}}
    <ul class="list-unstyled row row-sm">
      <% (categories.length > 1 ? categories : sections).forEach(function(block, index) { %>
        <li class="mb-5 text-<%= alignment %> <%= getColumnClasses(numberColumns) %>">
          <div class="card p-5 h-full bg-white transition hover:border-<%= color %>">
            <div class="media align-items-center text-<%= alignment %><% if (alignment === 'center') { %> flex-column<% } %>">
              <% if (imageHeight) { %>
                <a class="flex p-5 mx-3 align-items-center justify-content-center link-stretched circle transition <% if (alignment === 'left' ) { %>md:mr-5<% } else { %>align-self-center<% } %> bg-gray-100 hover:bg-gray-200" href="<%= block.html_url %>">
                  <img class="svg-icon fill-current font-size-3xl bottom-0" alt="" src="<%= images[index] || images[0] %>" style="height: <%= imageHeight %>; width: auto;" />
                </a>
              <% } %>
              <div class="media-body">
                <% if (block.name) { %>
                  <h2 class="mt-4 mb-2">
                    <% if (!imageHeight) { %>
                      <a class="text-inherit hover:text-inherit hover:underline" href="<%= block.html_url %>">
                        <%= block.name %>
                      </a>
                    <% } else { %>
                      <%= block.name %>
                    <% } %>
                  </h2>
                <% } %>
                <% if (block.description) { %>
                  <p class="font-size-lg text-gray-600">
                    <%= block.description %>
                  </p>
               <% } %>
              </div>
            </div>
          </div>
        </li>
      <% }) %>
    </ul>
  </div>
</template>

Lists and list groups

List items with links
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" />
        </template>
        {{~#if settings.use_translations}}
         {{dc settings.content_blocks_heading}}
        {{else}}
          {{settings.content_blocks_heading}}
        {{/if~}}
      </h2>
    {{/if~}}
    <ul class="list-unstyled row row-sm">
      <% (categories.length > 1 ? categories : sections).forEach(function(block, index) { %>
        <li class="mb-5 text-<%= alignment %> <%= getColumnClasses(numberColumns) %>">
          <% if (imageHeight) { %>
            <img alt="" src="<%= images[index] || images[0] %>" style="height: <%= imageHeight %>; width: auto;" />
          <% } %>
          <% if (block.name) { %>
            <h3>
              <%= block.name %>
            </h3>
          <% } %>
          <% if (block.description) { %>
            <p class="font-size-lg mb-5">
              <%= block.description %>
            </p>
          <% } %>
          <a class="text-inherit font-medium link-stretched underline hover:text-<%= color %>" href="<%= block.html_url %>">
            View articles
          </a>
        </li>
      <% }) %>
    </ul>
  </div>
</template>
List group with icons
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" />
        </template>
        {{~#if settings.use_translations}}
          {{dc settings.content_blocks_heading}}
        {{else}}
          {{settings.content_blocks_heading}}
        {{/if~}}
      </h2>
    {{/if~}}
    <div class="list-group list-group-flush border border-radius overflow-hidden bg-white shadow-xs">
      <div class="row row-flush align-items-stretch text-<%= alignment %>">
        <% (categories.length > 1 ? categories : sections).forEach(function(block, index) { %>
          <a class="list-group-item list-group-item-action <%= getColumnClasses(numberColumns) %>" href="<%= block.html_url %>">
            <div class="media h-full p-5<% if (alignment === 'center') { %> flex-column<% } %><% if (numberColumns >= 2) { %> md:flex-column<% } %>">
              <% if (imageHeight) { %>
                <div class="circle border p-5 bg-gray-100 link-stretched transition hidden md:flex hover:bg-white hover:border-<%= color %> <% if (alignment === 'left') { %>align-self-center mx-2<% } else { %>mx-auto mb-4<% } %><% if (numberColumns >= 2) { %> md:mb-4 md:align-self-<% if (alignment === 'left') { %>start<% } else { %>center<% } %><% } %>">
                  <img class="inline-flex" src="<%= images[index] || images[images.length - 1] %>" alt="" style="height: <%= imageHeight %>; width: <%= imageHeight %>;" />
                </div>
              <% } %>
              <div class="media-body align-self-center w-full px-4">
                <% if (block.name) { %>
                  <h3 class="my-2 text-<%= color %>">
                    <%= block.name %>
                  </h3>
                <% } %>
                <% if (block.description) { %>
                  <p class="mb-2">
                    <%= block.description %>
                  </p>
                <% } %>
              </div>
              <% if (alignment === 'left') { %>
                <svg class="svg-icon ml-2 align-self-center font-size-sm text-<%= color %> fill-current<% if (numberColumns >= 2) { %> hidden<% } %>" viewBox="0 0 190 323" xmlns="http://www.w3.org/2000/svg">
                  <path d="M190,162 C190,168 187,174 183,178 L38,317 C34,321 28,323 23,323 C17,323 11,321 7,317 C-2,308 -2,294 7,285 L135,162 L7,39 C-2,31 -2,16 7,7 C15,-2 29,-2 38,7 L183,146 C187,150 190,156 190,162 Z"></path>
                </svg>
              <% } %>
            </div>
          </a>
        <% }) %>
      </div>
    </div>
  </div>
</template>

Tabs and toggles

Categories in collapsible tabs
View code
<template id="tmpl-content-blocks">
  {{~#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" />
      </template>
      {{~#if settings.use_translations}}
        {{dc settings.content_blocks_heading}}
      {{else}}
        {{settings.content_blocks_heading}}
      {{/if~}}
    </h2>
  {{/if~}}
  <div class="bg-white border-top border-bottom md:border-top-0 md:bg-transparent" x-data="{ active: 0 }">
    <div class="container">
      <nav class="nav nav-tabs white-space-no-wrap collapsible-nav border-0 md:border-bottom-1">
        <% (categories.length > 1 ? categories : sections).forEach(function(block, index) { %>
          <li class="nav-item tracking-tight">
            <a href="<%= block.html_url %>"
               class="nav-link px-0 font-size-lg font-semibold md:px-5 md:py-3 hover:text-<%= color %>"
               :class="{ 'is-active text-<%= color %>': active === <%= index %>, 'text-inherit': active !== <%= index %> }"
               @click="active = <%= index %>">
              <%= block.name %>
            </a>
          </li>
        <% }) %>
      </nav>
    </div>
  </div>
</template>
Categories in toggles
View code
<template id="tmpl-content-blocks">
  <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" />
        </template>
        {{~#if settings.use_translations}}
          {{dc settings.content_blocks_heading}}
        {{else}}
          {{settings.content_blocks_heading}}
        {{/if~}}
      </h2>
    {{/if~}}
    <div class="list-bordered border border-radius bg-white overflow-hidden mb-4">
      <% (categories.length > 1 ? categories : sections).forEach(function(block, index) { %>
        <div x-data="{ open: false }">
          <a href="#"
             class="h3 flex align-items-center justify-content-between px-6 py-4 my-0 transition hover:no-underline <% if (['primary', 'secondary', 'tertiary'].indexOf(color) !== -1) { %>hover:text-<%= color %><% } else { %>hover:text-inherit<% } %>"
             @click="open = !open"
             data-active-class="<% if (['primary', 'secondary', 'tertiary'].indexOf(color) !== -1) { %>text-<%= color %><% } %>"
             data-toggle="collapse" aria-expanded="false"
             data-target="#block-<%= block.id %>">
            <%= block.name %>
            <svg class="fill-current pointer-events-none ml-3" :class="open && 'rotate-180'" width="14px" viewBox="0 0 40 20" xmlns="http://www.w3.org/2000/svg">
              <path d="M20,19.5 C19.4,19.5 18.9,19.3 18.4,18.9 L1.4,4.9 C0.3,4 0.2,2.4 1.1,1.4 C2,0.3 3.6,0.2 4.6,1.1 L20,13.8 L35.5,1.1 C36.6,0.2 38.1,0.4 39,1.4 C39.9,2.5 39.7,4 38.7,4.9 L21.7,18.9 C21.1,19.3 20.5,19.5 20,19.5 Z" fill-rule="nonzero"></path>
            </svg>
          </a>
          <div class="collapse" id="block-<%= block.id %>">
            <% if (block.sections.length) { %>
              <ul class="list-unstyled bg-gray-100 border-top mb-0 py-2">
                <% block.sections.forEach(function(section) { %>
                  <li>
                    <a class="block px-6 py-2 text-inherit transition hover:text-inherit hover:no-underline hover:bg-gray-200" href="<%= section.html_url %>">
                      <%= section.name %>
                    </a>
                  </li>
                <% }) %>
              </ul>
            <% } else if (block.articles.length) { %>
              <ul class="list-unstyled bg-gray-100 border-top mb-0 py-2">
                <% block.articles.forEach(function(article) { %>
                  <li>
                    <a class="block px-6 py-2 text-inherit transition hover:text-inherit hover:no-underline hover:bg-gray-200" href="<%= article.html_url %>">
                      <%= article.title %>
                    </a>
                  </li>
                <% }) %>
              </ul>
            <% } else { %>
              <p class="bg-gray-100 border-top mb-0 py-2">
                <a class="block px-6 py-4 text-inherit transition hover:text-inherit hover:no-underline hover:bg-gray-200" href="<%= block.html_url %>">
                  {{t 'empty'}}
                </a>
              </p>
            <% } %>
          </div>
        </div>
      <% }) %>
    </div>
  </div>
</template>

By default content blocks are displayed on the Home page, however you can use them anywhere in the help center.

You can display content blocks on the Home page using theme settings.

The following settings, found within the Content blocks setting group, are available in the to use in every theme when customizing content blocks:

Setting Description
Content blocks style The style of content blocks to display.
Content blocks color The color palette used for content blocks.
Content blocks background color The background color applied to the content blocks section.
Content blocks heading The heading to display above the content blocks.
Content blocks columns The maximum number of columns to display per row.
Content blocks alignment The alignment of content within content blocks.
Content blocks image height The height (in px) for content block images.

Select a style from the Content blocks style setting to have the content blocks appear.

To display content blocks on any page in the help center other than the Home page:

  1. Select the “Custom template” option from the Content blocks style setting in the Content blocks setting group to ensure that there’s not a conflict with an existing micro-template.

  2. Copy the HTML hook below into the position where you’d like the content blocks to appear.

     <div class="content-blocks bg-content-blocks" 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}}"
             }
           });
         })
       </script>
     </div>
    
  3. Copy-and-paste your selected pattern micro-template into the bottom of the footer.hbs template.

Related patterns

Article lists

Article lists

4 patterns

Contact blocks

Contact blocks

3 patterns

Custom blocks

Custom blocks

3 patterns