Understanding patterns

Patterns are layouts that you can copy and paste into your theme to instantly change the look-and-feel or behavior of a page.

Patterns are layouts that you can copy and paste into your theme to instantly change the look-and-feel or behavior of a page. They’re built on our powerful micro-templating system, which means they can be copied from our Pattern Library and pasted anywhere in the help center, giving you unparallelled flexibility and control.

While page templates can only make use of the objects and helpers available on a given page, patterns can render markup based on help center data (categories, sections, articles, topics and/or posts), custom data you pass to the template or data from third-party services. Our status indicator patterns are an example of displaying third-party status information from Statuspage.

System status in a badge
View code
<div data-element="system-status" data-template="system-status"></div>

<template id="tmpl-system-status">
  <% if (indicator) { %>
    <a class="badge inline-flex align-items-center py-2 px-3 font-size-sm rounded" href="https://<%= subdomain %>.statuspage.io" target="_blank">
      <% if (indicator === "critical") { %><span class="w-2 h-2 bg-red-500 circle"></span><% } %>
      <% if (indicator === "major") { %><span class="w-2 h-2 bg-orange-500 circle"></span><% } %>
      <% if (indicator === "minor") { %><span class="w-2 h-2 bg-orange-500 circle"></span><% } %>
      <% if (indicator === "none") { %><span class="w-2 h-2 bg-green-500 circle"></span><% } %>
      <% if (["critical", "major", "minor", "none"].indexOf(indicator) === -1) { %><span class="w-2 h-2 bg-gray-500 circle"></span><% } %>
      <span class="ml-2"><%= description %></span>
    </a>
  <% } %>
</template>

Flexible, dynamic layouts on demand

Patterns are not limited to specific pages and you can use them to add layouts and functionality that doesn’t already exist. Our Recent Articles extension, which allows you to display a list of the most recent articles from across your help center, is an example of this.

Most recent articles
View code
<div
  data-element="navigation"
  data-properties='[
    "id",
    "name",
    "title",
    "body",
    "html_url",
    "position",
    "promoted",
    "draft",
    "section_id",
    "category_id",
    "created_at",
    "updated_at"
  ]'
  data-template="recent-articles"
  data-template-data='{ "heading": "Recent articles", "maxArticles": 6, "excerptLength": 120 }'>
</div>
<template id="tmpl-recent-articles">
  <%
    var getDate = function(article) { return article.created_at !== article.updated_at ? article.updated_at : article.created_at; }
    var sortByDate = function(a, b) { return new Date(getDate(b)) - new Date(getDate(a)); }
    articles = articles.sort(sortByDate).slice(0, maxArticles);
  %>
  <% if (articles.length) { %>
    <% if (heading) { %>
      <h2 class="h1 flex align-items-center justify-content-center mb-6">
        <svg class="fill-current mr-2" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <g stroke="none" stroke-width="1" fill-rule="evenodd">
            <rect opacity="0" x="0" y="0" width="24" height="24"></rect>
            <path d="M10.9630156,7.5 L11.0475062,7.5 C11.3043819,7.5 11.5194647,7.69464724 11.5450248,7.95024814 L12,12.5 L15.2480695,14.3560397 C15.403857,14.4450611 15.5,14.6107328 15.5,14.7901613 L15.5,15 C15.5,15.2109164 15.3290185,15.3818979 15.1181021,15.3818979 C15.0841582,15.3818979 15.0503659,15.3773725 15.0176181,15.3684413 L10.3986612,14.1087258 C10.1672824,14.0456225 10.0132986,13.8271186 10.0316926,13.5879956 L10.4644883,7.96165175 C10.4845267,7.70115317 10.7017474,7.5 10.9630156,7.5 Z"></path>
            <path d="M7.38979581,2.8349582 C8.65216735,2.29743306 10.0413491,2 11.5,2 C17.2989899,2 22,6.70101013 22,12.5 C22,18.2989899 17.2989899,23 11.5,23 C5.70101013,23 1,18.2989899 1,12.5 C1,11.5151324 1.13559454,10.5619345 1.38913364,9.65805651 L3.31481075,10.1982117 C3.10672013,10.940064 3,11.7119264 3,12.5 C3,17.1944204 6.80557963,21 11.5,21 C16.1944204,21 20,17.1944204 20,12.5 C20,7.80557963 16.1944204,4 11.5,4 C10.54876,4 9.62236069,4.15592757 8.74872191,4.45446326 L9.93948308,5.87355717 C10.0088058,5.95617272 10.0495583,6.05898805 10.05566,6.16666224 C10.0712834,6.4423623 9.86044965,6.67852665 9.5847496,6.69415008 L4.71777931,6.96995273 C4.66931162,6.97269931 4.62070229,6.96837279 4.57348157,6.95710938 C4.30487471,6.89303938 4.13906482,6.62335149 4.20313482,6.35474463 L5.33163823,1.62361064 C5.35654118,1.51920756 5.41437908,1.4255891 5.49660017,1.35659741 C5.7081375,1.17909652 6.0235153,1.2066885 6.2010162,1.41822583 L7.38979581,2.8349582 Z" opacity="0.3"></path>
          </g>
        </svg>
        <%= heading %>
      </h2>
    <% } %>
    <ul class="list-unstyled row my-6">
      <% articles.forEach(function(article) { %>
        <li class="col-6 mb-4 lg:col-4">
          <% var date = article.created_at !== article.updated_at ? article.updated_at : article.created_at %>
          <p class="font-medium text-primary mb-2">
            <%= new Date(date).toDateString().split(' ').slice(1).join(' ') %>
          </p>
          <h3 class="mt-0 mb-3">
            <a class="link-stretched text-inherit hover:text-primary" href="<%= article.html_url %>">
              <%= article.title %>
            </a>
          </h3>
          <p class="text-gray-600">
            <%= Util.getExcerpt(article.body || '', excerptLength) %>
          </p>
        </li>
      <% }) %>
    </ul>
  <% } %>
</template>

Our themes also come with many configurable elements, like content blocks and table of contents elements, which you can customize using patterns. The look-and-feel and even functionality of these elements can be completed changed by copying a pattern from our library into the theme as described on each pattern’s page.

Because patterns must be copied and pasted into your theme, you must have access to underlying templates. To get complete access to the theme source code you can purchase:

  1. The Developer license through the Zendesk Theme Marketplace; or

  2. A single theme or the Complete Package through our website.

Questions or feedback about this article? Let us know