Article lists

Article lists are used throughout most Zendesk themes and can display articles within a section, promoted articles, related articles and more.

Lists, despite being simple, can take many forms. Our standard list styles are robust and easy to apply, and when combined with out comprehensive set of utilities the possibilities are endless.

Built-in styles

The following list styles are available in all of our themes and can be applied using theme settings.

In addition to small differences in the overall look-and-feel that may exist in some themes, you can configure several aspects (like the number of columns, style of promoted articles and excerpt lengths) that will automatically be reflected in the template.

<template id="tmpl-articles">
  <% 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;
  } %>
  <% if (articles.length) { %>
    <ul class="row row-flush list-disc">
      <% articles.forEach(function(article) { %>
        <li class="<%= getColumnClasses({{settings.article_list_columns}}) %>">
          <div class="relative media align-items-baseline py-2 h-full pr-7
            {{~#is settings.promoted_article_style 'bold'}}<% if (article.promoted) { %> font-bold<% } %>{{/is~}}
            {{~#isnt settings.article_list_excerpt 0}} font-semibold{{/isnt~}}">
            <div class="media-body">
              <a class="link-stretched" href="<%= article.html_url %>">
                <%= article.title %>
              </a>
              {{#is settings.promoted_article_style 'icon'}}
                <% if (article.promoted) { %>
                  <svg class="svg-icon ml-1 fill-current text-orange-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 426 405" aria-hidden="true">
                    <title>{{t 'promoted'}}</title>
                    <use xlink:href="#icon-star" />
                  </svg>
                <% } %>
              {{/is}}
              {{#isnt settings.article_list_excerpt 0}}
                <% if (article.body) { %>
                  <p class="my-2 font-size-md break-words font-normal">
                    <%= Util.getExcerpt(article.body, {{settings.article_list_excerpt}}) %>
                  </p>
                <% } %>
              {{/isnt}}
            </div>
          </div>
        </li>
      <% }) %>
    </ul>
  <% } %>
</template>
<template id="tmpl-articles">
  <% 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;
  } %>
  <% if (articles.length) { %>
    <ul class="row row-sm list-unstyled">
      <% articles.forEach(function(article) { %>
        <li class="<%= getColumnClasses({{settings.article_list_columns}}) %>">
          <div class="relative media align-items-baseline py-2 h-full
            {{~#is settings.promoted_article_style 'bold'}}<% if (article.promoted) { %> font-bold<% } %>{{/is~}}
            {{~#isnt settings.article_list_excerpt 0}} font-semibold{{/isnt~}}">
            <div class="media-body">
              <a class="link-stretched" href="<%= article.html_url %>">
                <%= article.title %>
              </a>
              {{#is settings.promoted_article_style 'icon'}}
                <% if (article.promoted) { %>
                  <svg class="svg-icon ml-1 fill-current text-orange-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 426 405" aria-hidden="true">
                    <title>{{t 'promoted'}}</title>
                    <use xlink:href="#icon-star" />
                  </svg>
                <% } %>
              {{/is}}
              {{#isnt settings.article_list_excerpt 0}}
                <% if (article.body) { %>
                  <p class="my-2 font-size-md break-words font-normal">
                    <%= Util.getExcerpt(article.body, {{settings.article_list_excerpt}}) %>
                  </p>
                <% } %>
              {{/isnt}}
            </div>
          </div>
        </li>
      <% }) %>
    </ul>
  <% } %>
</template>
<template id="tmpl-articles">
  <% 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;
  } %>
  <% if (articles.length) { %>
    <ul class="row row-sm list-unstyled">
      <% articles.forEach(function(article) { %>
        <li class="<%= getColumnClasses({{settings.article_list_columns}}) %>">
          <div class="relative media align-items-baseline py-3 h-full border-bottom{{~#is settings.article_list_columns "1"}}<% if (index === articles.length - 1) { %> border-bottom-0<% } %>{{/is~}}
            {{~#is settings.promoted_article_style 'bold'}}<% if (article.promoted) { %> font-bold<% } %>{{/is~}}
            {{~#isnt settings.article_list_excerpt 0}} font-semibold{{/isnt~}}">
            <div class="flex" x-data="{ src: Theme.assets['article'] }">
              <template x-if="src">
                <img class="svg-icon mr-3" src="{{asset 'placeholder.png'}}" alt="" aria-hidden="true" :src="src" />
              </template>
            </div>
            <div class="media-body">
              <a class="link-stretched" href="<%= article.html_url %>">
                <%= article.title %>
              </a>
              {{#is settings.promoted_article_style 'icon'}}
                <% if (article.promoted) { %>
                  <svg class="svg-icon ml-1 fill-current text-orange-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 426 405" aria-hidden="true">
                    <title>{{t 'promoted'}}</title>
                    <use xlink:href="#icon-star" />
                  </svg>
                <% } %>
              {{/is}}
              {{#isnt settings.article_list_excerpt 0}}
                <% if (article.body) { %>
                  <p class="my-2 font-size-md break-words font-normal">
                    <%= Util.getExcerpt(article.body, {{settings.article_list_excerpt}}) %>
                  </p>
                <% } %>
              {{/isnt}}
            </div>
          </div>
        </li>
      <% }) %>
    </ul>
  <% } %>
</template>

The bordered list style supports an icon which you can have appear by adding an image with the file name article.(svg|png|jpg|jpeg) to your theme’s Assets folder.

<template id="tmpl-articles">
  <% 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;
  } %>
  <% if (articles.length) { %>
    <ul class="row row-sm list-unstyled">
      <% articles.forEach(function(article) { %>
        <li class="<%= getColumnClasses({{settings.article_list_columns}}) %>">
          <div class="relative media align-items-baseline py-3 h-full border-bottom{{~#is settings.article_list_columns "1"}}<% if (index === articles.length - 1) { %> border-bottom-0<% } %>{{/is~}}
            {{~#is settings.promoted_article_style 'bold'}}<% if (article.promoted) { %> font-bold<% } %>{{/is~}}
            {{~#isnt settings.article_list_excerpt 0}} font-semibold{{/isnt~}}">
            <div class="flex" x-data="{ src: Theme.assets['article'] }">
              <template x-if="src">
                <img class="svg-icon mr-3" src="{{asset 'placeholder.png'}}" alt="" aria-hidden="true" :src="src" />
              </template>
            </div>
            <div class="media-body">
              <a class="link-stretched" href="<%= article.html_url %>">
                <%= article.title %>
              </a>
              {{#is settings.promoted_article_style 'icon'}}
                <% if (article.promoted) { %>
                  <svg class="svg-icon ml-1 fill-current text-orange-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 426 405" aria-hidden="true">
                    <title>{{t 'promoted'}}</title>
                    <use xlink:href="#icon-star" />
                  </svg>
                <% } %>
              {{/is}}
              {{#isnt settings.article_list_excerpt 0}}
                <% if (article.body) { %>
                  <p class="my-2 font-size-md break-words font-normal">
                    <%= Util.getExcerpt(article.body, {{settings.article_list_excerpt}}) %>
                  </p>
                <% } %>
              {{/isnt}}
            </div>
          </div>
        </li>
      <% }) %>
    </ul>
  <% } %>
</template>

Because each of the styles above are already built in to our themes, there’s no need to copy the micro-template. You can simply select the style you wish to use from the Article list style setting.

Custom styles

Bullet list with icons replacing bullets
View code
<template id="tmpl-articles">
  <% 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;
  } %>
  <% if (articles.length) { %>
    <div class="row">
      <% articles.forEach(function(article) { %>
        <div class="<%= getColumnClasses({{settings.article_list_columns}}) %>">
          <div class="media align-items-baseline py-2 h-full">
            {{#is settings.promoted_article_style 'icon'}}
              <% if (article.promoted) { %>
                <svg class="flex-shrink-0 fill-current text-orange-500 w-4" viewBox="0 0 426 405" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <polygon points="213 325 81 405 116 255 0 154 153 141 213 0 273 141 426 154 310 255 345 405"></polygon>
                </svg>
              <% } else { %>
                <svg class="flex-shrink-0 fill-current w-4" height="12" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <path d="M12.14 8.753l-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 011.659-.753l5.48 4.796a1 1 0 010 1.506z"></path>
                </svg>
              <% } %>
            {{else}}
              <svg class="flex-shrink-0 fill-current w-4" height="12" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                <path d="M12.14 8.753l-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 011.659-.753l5.48 4.796a1 1 0 010 1.506z"></path>
              </svg>
            {{/is}}
            <div class="media-body text-base ml-3">
              <a class="link-stretched text-inherit
                {{~#is settings.promoted_article_style 'bold'}}<% if (article.promoted) { %> font-bold<% } %>{{else}}
                {{#isnt settings.article_list_excerpt 0}} font-semibold{{/isnt}}{{/is~}}" href="<%= article.html_url %>">
                <%= article.title %>
              </a>
              {{#isnt settings.article_list_excerpt 0}}
                <% if (article.body) { %>
                  <p class="my-2 font-size-md break-words font-normal">
                    <%= Util.getExcerpt(article.body, {{settings.article_list_excerpt}}) %>
                  </p>
                <% } %>
              {{/isnt}}       
            </div>
          </div>
        </div>
      <% }) %>
    </div>
  <% } %>
</template>
Bullet list with larger list items
View code
<template id="tmpl-articles">
  <% 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;
  } %>
  <% if (articles.length) { %>
    <div class="row row-sm">
      <% articles.forEach(function(article) { %>
        <div class="<%= getColumnClasses({{settings.article_list_columns}}) %>">
          <div class="media align-items-baseline py-2">
            {{#is settings.promoted_article_style 'icon'}}
              <% if (article.promoted) { %>
                <svg class="flex-shrink-0 fill-current text-orange-500 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 426 405" aria-hidden="true">
                  <title>{{t 'promoted'}}</title>
                  <use xlink:href="#icon-star" />
                </svg>
              <% } else { %>
                <span class="flex align-items-center justify-content-center w-4">
                  &#8226;
                </span>
              <% } %>
            {{else}}
              <span class="flex align-items-center justify-content-center w-4">
                &#8226;
              </span>
            {{/is}}
            <div class="media-body text-base ml-3">
              {{~#isnt settings.article_list_excerpt 0}}
                <% if (excerptLength > 0 && article.body) { %>
                  <h3 class="my-0">
                    <a class="link-stretched text-inherit hover:no-underline" href="<%= article.html_url %>">
                      <%= article.title %>
                    </a>
                  </h3>
                  <p class="mt-3 text-gray-600 font-size-md font-normal break-words">
                    <%= Util.getExcerpt(article.body, {{settings.article_list_excerpt}}) %>
                  </p>
                 <% } else { %>
                   <a class="link-stretched text-inherit{{~#is settings.promoted_article_style 'bold'}}<% if (article.promoted) { %> font-bold<% } %>{{/is~}}" href="<%= article.html_url %>">
                     <%= article.title %>
                   </a>
                <% } %>
              {{else}}
                <a class="link-stretched text-inherit{{~#is settings.promoted_article_style 'bold'}}<% if (article.promoted) { %> font-bold<% } %>{{/is~}}" href="<%= article.html_url %>">
                  <%= article.title %>
                </a>
              {{/isnt~}}
            </div>
          </div>
        </div>
      <% }) %>
    </div>
  <% } %>
</template>
Bordered list with larger list items
View code
<template id="tmpl-articles">
  <% 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;
  } %>
  <% if (articles.length) { %>
    <ul class="list-unstyled row my-4 font-medium font-size-lg">
      <% articles.forEach(function(article) { %>
        <li class="<%= getColumnClasses({{settings.article_list_columns}}) %> -mb-1px">
          <a class="flex justify-content-between align-items-baseline py-5 text-inherit border-top border-bottom h-full hover:no-underline
            {{~#is settings.promoted_article_style 'bold'}}<% if (article.promoted) { %> font-bold<% } %>{{/is~}}" href="<%= article.html_url %>">
            <%= article.title %>
            {{#is settings.promoted_article_style 'icon'}}
              <% if (article.promoted) { %>
                <svg class="svg-icon fill-current ml-2 mr-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 426 405" aria-hidden="true">
                  <title>{{t 'promoted'}}</title>
                  <polygon points="213 325 81 405 116 255 0 154 153 141 213 0 273 141 426 154 310 255 345 405"></polygon>
                </svg>
              <% } %>
            {{/is}}
            <svg class="svg-icon fill-current text-gray-500 ml-3" viewBox="0 0 14 24" xmlns="http://www.w3.org/2000/svg">
              <polygon fill-rule="nonzero" points="0.292893 22.292893 1.70710656 23.7071066 13.413544 12.0006691 1.72859119 0.293563 0.313038936 1.7064366 10.5864556 11.9993305"></polygon>
            </svg>
          </a>
        </li>
      <% }) %>
    </ul>
  <% } %>
</template>
Bordered list with larger list items and excerpts
View code
<template id="tmpl-articles">
  <% 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;
  } %>
  <% if (articles.length) { %>
    <ul class="row row-sm list-unstyled">
      <% articles.forEach(function(article) { %>
        <li class="<%= getColumnClasses({{settings.article_list_columns}}) %>">
          <div class="relative media align-items-baseline py-3 h-full border-bottom{{~#is settings.article_list_columns "1"}}<% if (index === articles.length - 1) { %> border-bottom-0<% } %>{{/is~}}
            {{~#is settings.promoted_article_style 'bold'}}<% if (article.promoted) { %> font-bold<% } %>{{/is~}}
            {{~#isnt settings.article_list_excerpt 0}} font-semibold{{/isnt~}}">
            <div class="flex" x-data="{ src: Theme.assets['article'] }">
              <template x-if="src">
                <img class="svg-icon mr-3" src="{{asset 'placeholder.png'}}" alt="" aria-hidden="true" :src="src" />
              </template>
            </div>
            <div class="media-body">
              <a class="link-stretched" href="<%= article.html_url %>">
                <%= article.title %>
              </a>
              {{#is settings.promoted_article_style 'icon'}}
                <% if (article.promoted) { %>
                  <svg class="svg-icon ml-1 fill-current text-orange-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 426 405" aria-hidden="true">
                    <title>{{t 'promoted'}}</title>
                    <use xlink:href="#icon-star" />
                  </svg>
                <% } %>
              {{/is}}
              {{#isnt settings.article_list_excerpt 0}}
                <% if (article.body) { %>
                  <p class="my-2 font-size-md break-words font-normal">
                    <%= Util.getExcerpt(article.body, {{settings.article_list_excerpt}}) %>
                  </p>
                <% } %>
              {{/isnt}}
            </div>
          </div>
        </li>
      <% }) %>
    </ul>
  <% } %>
</template>

List groups

Built using our List group element, these are perfect for use on an off-white background and work well for smaller screen sizes.

Bordered list group
View code
<template id="tmpl-articles">
  <% 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;
  } %>
  <% if (articles.length) { %>
    <div class="border border-radius bg-white overflow-hidden">
      <div class="row row-flush -mb-1px">
        <% articles.forEach(function(article, index) { %>
          <% var isLast = index === articles.length - 1 %>
          <div class="<%= getColumnClasses({{settings.article_list_columns}}) %> border-bottom hover:bg-gray-100">
            <div class="media align-items-center m-5">
              <div class="media-body">
                <h3 class="my-0{{#is settings.promoted_article_style 'bold'}}<% if (!article.promoted) { %> font-normal<% } %>{{/is}}">
                  <a class="link-stretched text-inherit hover:no-underline" href="<%= article.html_url %>">
                   <%= article.title %>
                    {{#is settings.promoted_article_style 'icon'}}
                      <% if (article.promoted) { %>
                        <svg class="svg-icon ml-1 fill-current text-orange-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 426 405" aria-hidden="true">
                          <title>{{t 'promoted'}}</title>
                          <use xlink:href="#icon-star" />
                        </svg>
                      <% } %>
                    {{/is}}
                  </a>
                </h3>
                {{#isnt settings.article_list_excerpt 0}}
                  <% if (article.body) { %>
                    <p class="mt-2 mb-0 break-words font-normal">
                      <%= Util.getExcerpt(article.body, {{settings.article_list_excerpt}}) %>
                    </p>
                  <% } %>
                {{/isnt}}
              </div>
              <svg class="fill-current text-inherit ml-4" width="18" height="18" viewBox="0 0 14 24" xmlns="http://www.w3.org/2000/svg">
                <polygon fill-rule="nonzero" points="0.292893 22.292893 1.70710656 23.7071066 13.413544 12.0006691 1.72859119 0.293563 0.313038936 1.7064366 10.5864556 11.9993305"></polygon>
              </svg>
            </div>
          </div>
        <% }) %>
      </div>
    </div>
  <% } %>
</template>

Cards

Built using our Card element, these occupy more space but are useful for capturing attention.

Cards with excerpt
View code
<template id="tmpl-articles">
  <% 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;
  } %>
  <% if (articles.length) { %>
    <div class="row row-sm">
      <% articles.forEach(function(article, index) { %>
        <% var section = sections.filter(function(section) { return section.id === article['section_id']; })[0] || null; %>
        <div class="mb-4 <%= getColumnClasses({{settings.article_list_columns}}) %>">
          <div class="card card-body h-full">
            <% if (section) { %>
              <a class="mt-4" href="<%= section.html_url %>">
                <%= section.name %>
              </a>
            <% } %>
            <h3 class="mt-3">
              <a class="text-inherit" href="<%= article.html_url %>">
                <%= article.title %>
              </a>
            </h3>
            {{#isnt settings.article_list_excerpt 0}}
              <% if (article.body) { %>
                <p>
                  <%= Util.getExcerpt(article.body, {{settings.article_list_excerpt}}) %>
                </p>
              <% } %>
            {{/isnt}}
          </div>
        </div>
      <% }) %>
    </div>
  <% } %>
</template>
<template id="tmpl-articles">
  <% 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;
  } %>
  <% if (articles.length) { %>
    <div class="row row-sm">
      <% articles.forEach(function(article, index) { %>
        <% var section = sections.filter(function(section) { return section.id === article['section_id']; })[0] || null; %>
        <div class="mb-4 <%= getColumnClasses({{settings.article_list_columns}}) %>">
          <a class="card card-body bg-white h-full hover:no-underline hover:border-primary" href="<%= article.html_url %>">
            <div class="media justify-content-between">
              <div class="media-body">
                <% if (section) { %>
                  <p class="my-2 text-gray-600">
                    <%= section.name %>
                  </p>
                <% } %>
                <h3 class="mt-0">
                  <%= article.title %>
                </h3>
                {{#isnt settings.article_list_excerpt 0}}
                  <% if (article.body) { %>
                    <p class="mb-2 text-base">
                      <%= Util.getExcerpt(article.body, {{settings.article_list_excerpt}}) %>
                    </p>
                  <% } %>
                {{/isnt}}
              </div>
              <svg class="text-primary fill-current align-self-center ml-3" height="16" 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>
  <% } %>
</template>

Toggles

Interactive toggle sections can be used to present short articles or excerpts.

Toggles with excerpt
View code
<template id="tmpl-articles">
  <% 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;
  } %>
  <% if (articles.length) { %>
    <div class="list-bordered border border-radius overflow-hidden">
      <% articles.forEach(function(article) { %>
        <div class="bg-white" x-data="{ open: false }">
          <% if (article.body) { %>
            <h3 class="my-4 px-6">
              <a class="flex align-items-center justify-content-between transition text-inherit hover:text-primary hover:no-underline" href="<%= article.html_url %>"
                 data-toggle="collapse"
                 data-target="#article-<%= article.id %>"
                 data-active-class="text-primary"
                 aria-expanded="false"
                 @click="open = !open">
                <%= article.title %>
                <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>
            </h3>
            <div class="collapse content px-6 py-2" id="article-<%= article.id %>">
              {{~#isnt settings.article_list_excerpt 0}}
                <%= Util.getExcerpt(article.body, {{settings.article_list_excerpt}}) %>
                <p class="my-4">
                  <a class="button button-outline button-sm" href="<%= article.html_url %>">
                    {{~#if settings.use_translations}}
                      {{dc settings.read_more_text}}
                    {{else}}
                      {{settings.read_more_text}}
                    {{/if~}}
                  </a>
                </p>
              {{else}}
                <div class="content">
                  <%= article.body %>
                </div>
              {{/isnt~}}
            </div>
          <% } else { %>
            <h3 class="my-4 px-6">
              <a class="flex align-items-center justify-content-between transition text-inherit hover:text-primary hover:no-underline" href="<%= article.html_url %>">
                <%= article.title %>
                <svg class="fill-current pointer-events-none rotate-270 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>
            </h3>
          <% } %>
        </div>
      <% }); %>
    </div>
  <% } %>
</template>

This pattern uses our Collapse extension to manage the collapsed and expanded states and can be modified to act as an accordion using the parent option described on that extension’s page.

Article list patterns can be used to replace default article lists in your theme or added to any page in a position of your choosing.

To replace built-in article lists with a custom micro-template:

  1. Select the Custom template option in the Article list style setting in the Article lists setting group.

    Article list style setting

  2. Copy-and-paste an existing pattern micro-template, or one you’ve created yourself, into the footer template (footer.hbs).

Custom article lists are generated using our Navigation extension which supports options that you can configure using data-attributes.

To create a custom article list anywhere in your help center:

  1. Initialize the Navigation extension using an HTML hook like the one below:

     <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="articles"
       data-template-data='{}'>
     </div>
    
  2. Copy-and-paste an existing pattern micro-template, or one you’ve created yourself, into the footer template (footer.hbs).

In the example above, the Navigation extension is looking for a micro-template with the ID articles. You can have multiple different article lists on the same page by adding hooks with different micro-template references.

Related patterns