Sections

Article lists

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

Each pattern on this page is created using the Zendesk (Curly Bars) templating system, meaning you can use them directly in all page templates that has an array of article objects. If you’d like to use them in a weird and wonderful place without access to article objects, you can always modify them for use with our JavaScript templating system.

Standard lists

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.

Lists can be presented within columns using our Row and Column elements.

  • <ul class="list-unstyled row">
      {{#each articles}}
        <li class="md:col-6">
          <a class="block py-3 border-bottom h-full text-inherit hover:text-inherit" href="{{url}}">
            {{title}}
            {{~#if promoted~}}
              <svg class="svg-icon fill-current ml-2 text-orange-500" viewBox="0 0 426 405" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <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>
            {{~/if~}}
            {{~#if internal~}}
              <svg class="svg-icon text-base ml-2" xmlns="http://www.w3.org/2000/svg" focusable="false" viewBox="0 0 16 16">
                <title>{{t 'internal'}}</title>
                <rect width="12" height="9" x="2" y="7" fill="currentColor" rx="1" ry="1"/>
                <path fill="none" stroke="currentColor" d="M4.5 7.5V4a3.5 3.5 0 017 0v3.5"/>
              </svg>
            {{~/if~}}
          </a>
        </li>
      {{/each}}
    </ul>

Lists can also be presented within columns using the simple .column-count-{column_count} utility, as in the example below. A bullet list is used, replacing the bullet list style with a custom icon for promoted articles.

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.

Cards

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

Cards can also be used to present lists of articles, for example in the sidebar or footer of an article.

Toggles

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