Comment lists

Change the layout and style of comments on the Article, Request and Community Post pages.

These comment list style patterns illustrate some of the ways that you present comments to your visitors. They can be used for article, post and request comments and easily modified using utilities to match you requirements.

Standard comment list
View code
{{#if comments}}
  <ul class="list-unstyled">
    {{#each comments}}
      <li class="comment py-5 border-bottom" id="{{anchor}}">

        {{! Comment metadata }}
        <div class="media mb-4">
          <div class="avatar">
            {{#if author.agent}}
              <svg class="svg-icon absolute bottom-0 right-0 text-primary bg-white border border-white circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" aria-hidden="true">
                <use xlink:href="#icon-agent" />
              </svg>
            {{/if}}
            <img class="avatar-img" src="{{author.avatar_url}}" alt="Comment author">
          </div>
          <div class="media-body">
            {{#link 'user_profile' class="link-implied" id=author.id title=author.name}}
              {{author.name}}
            {{/link}}
            {{#each author.badges}}
              {{#is category_slug "titles"}}
                <span class="badge inline-flex align-items-center align-middle bg-primary text-primary-inverse py-0 pr-2 mx-1" title="{{description}}" aria-label="{{name}}">
                {{#if icon_url}}
                  <img src="{{icon_url}}" alt="{{description}}" />
                {{/if}}
                {{name}}
              </span>
              {{/is}}
            {{/each}}
            {{#each author.badges}}
              {{#is category_slug "achievements"}}
                {{#if icon_url}}
                  <img width="22" height="22" src="{{icon_url}}" alt="{{name}}" title="{{name}} | {{description}}" aria-label="{{name}}" />
                {{/if}}
              {{/is}}
            {{/each}}
            <ul class="list-divider">
              {{#if editor}}
                <li class="text-gray-600">
                  {{t 'edited'}} {{date edited_at timeago=true}}
                </li>
              {{else}}
                <li class="text-gray-600">
                  {{date created_at timeago=true}}
                </li>
              {{/if}}
            </ul>
          </div>
          <div class="actions-comment">
            {{#actions}}
              <svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true">
                <path fill="none" stroke="currentColor" d="M13.17 3.07l-1.64.71c-.48-.4-1.03-.72-1.63-.94l-.22-1.79a.511.511 0 00-.4-.44C8.86.54 8.44.5 8 .5c-.44 0-.86.04-1.28.11-.22.04-.38.22-.4.44l-.21 1.79c-.6.22-1.15.54-1.63.94l-1.65-.71a.491.491 0 00-.58.13c-.55.65-.99 1.4-1.29 2.21-.08.21 0 .44.18.58l1.45 1.08a4.91 4.91 0 000 1.87l-1.45 1.08c-.18.13-.25.37-.18.58.3.81.74 1.55 1.28 2.2.14.17.38.22.58.13l1.65-.71c.48.4 1.03.72 1.63.94l.21 1.79c.03.22.19.4.4.44.43.07.85.11 1.29.11.44 0 .86-.04 1.28-.11.22-.04.38-.22.4-.44l.21-1.79c.6-.22 1.15-.54 1.63-.94l1.65.71c.2.09.44.04.58-.13.54-.65.98-1.39 1.28-2.2.08-.21 0-.44-.18-.57L13.4 8.95c.07-.32.1-.63.1-.95s-.03-.63-.09-.94l1.45-1.08c.18-.13.25-.37.18-.58-.3-.81-.74-1.55-1.28-2.2a.51.51 0 00-.59-.13z"/>
                <circle cx="8" cy="8" r="2.5" fill="none" stroke="currentColor"/>
              </svg>
            {{/actions}}
          </div>
        </div>

        {{#with ticket}}
          <a href="{{url}}" target="_zendesk_lotus" class="status-label escalation-badge">
            {{t 'request'}}{{id}}
          </a>
        {{/with}}
        {{#if pending}}
          <span class="badge badge-pending">
            {{t 'pending_approval'}}
          </span>
        {{/if}}

        {{! Comment content }}
        <section class="content">
          {{body}}
        </section>

        {{! Comment voting }}
        <div class="button-group button-group-sm" role="group">
          {{#vote 'up' class='button button-outline' selected_class='is-active' role='radio'}}
            <svg class="svg-icon rotate-180" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true">
              <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M4 6.5l3.6 3.6c.2.2.5.2.7 0L12 6.5"></path>
            </svg>
          {{/vote}}
          {{#vote 'down' class='button button-outline' selected_class='is-active' role='radio'}}
            <svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true">
              <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M4 6.5l3.6 3.6c.2.2.5.2.7 0L12 6.5"></path>
            </svg>
          {{/vote}}
        </div>
        {{vote 'sum' class='font-size-sm text-gray-600 ml-1'}}

      </li>
    {{/each}}
  </ul>
{{/if}}
Comments in media elements
View code
{{#if comments}}
  <ul class="list-unstyled border-top">
    {{#each comments}}
      <li class="comment py-5 border-bottom" id="{{anchor}}">
        <div class="media flex-column mb-4 sm:flex-row">
          <div class="avatar mr-4">
            {{#if author.agent}}
              <svg class="svg-icon absolute bottom-0 right-0 text-primary bg-white border border-white circle" xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12">
                <path fill="currentColor" d="M6 0C2.7 0 0 2.7 0 6s2.7 6 6 6 6-2.7 6-6-2.7-6-6-6zm0 2c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm2.3 7H3.7c-.3 0-.4-.3-.3-.5C3.9 7.6 4.9 7 6 7s2.1.6 2.6 1.5c.1.2 0 .5-.3.5z"/>
              </svg>
            {{/if}}
            <img class="avatar-img" src="{{author.avatar_url}}" alt="Comment author">
          </div>
          <div class="media-body">
            <div class="flex align-items-baseline justify-content-between sm:mt-1">
              <ul class="list-divider">
                <li>
                  {{#link 'user_profile' class="text-base font-semibold hover:no-underline" id=author.id title=author.name}}
                    {{author.name}}
                  {{/link}}
                  {{#each author.badges}}
                    {{#is category_slug "titles"}}
                      <span class="badge inline-flex align-items-center align-middle bg-primary text-primary-inverse py-0 pr-2 mx-1" title="{{description}}" aria-label="{{name}}">
                      {{#if icon_url}}
                        <img src="{{icon_url}}" alt="{{description}}" />
                      {{/if}}
                      {{name}}
                    </span>
                    {{/is}}
                  {{/each}}
                  {{#each author.badges}}
                    {{#is category_slug "achievements"}}
                      {{#if icon_url}}
                        <img width="22" height="22" src="{{icon_url}}" alt="{{name}}" title="{{name}} | {{description}}" aria-label="{{name}}" />
                      {{/if}}
                    {{/is}}
                  {{/each}}
                </li>
                {{#if editor}}
                  <li class="text-gray-600">
                    {{t 'edited'}} {{date edited_at timeago=true}}
                  </li>
                {{else}}
                  <li class="text-gray-600">
                    {{date created_at timeago=true}}
                  </li>
                {{/if}}
              </ul>
              <div class="actions-comment">
                {{#actions}}
                  <svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 16 16">
                    <path fill="none" stroke="currentColor" d="M13.17 3.07l-1.64.71c-.48-.4-1.03-.72-1.63-.94l-.22-1.79a.511.511 0 00-.4-.44C8.86.54 8.44.5 8 .5c-.44 0-.86.04-1.28.11-.22.04-.38.22-.4.44l-.21 1.79c-.6.22-1.15.54-1.63.94l-1.65-.71a.491.491 0 00-.58.13c-.55.65-.99 1.4-1.29 2.21-.08.21 0 .44.18.58l1.45 1.08a4.91 4.91 0 000 1.87l-1.45 1.08c-.18.13-.25.37-.18.58.3.81.74 1.55 1.28 2.2.14.17.38.22.58.13l1.65-.71c.48.4 1.03.72 1.63.94l.21 1.79c.03.22.19.4.4.44.43.07.85.11 1.29.11.44 0 .86-.04 1.28-.11.22-.04.38-.22.4-.44l.21-1.79c.6-.22 1.15-.54 1.63-.94l1.65.71c.2.09.44.04.58-.13.54-.65.98-1.39 1.28-2.2.08-.21 0-.44-.18-.57L13.4 8.95c.07-.32.1-.63.1-.95s-.03-.63-.09-.94l1.45-1.08c.18-.13.25-.37.18-.58-.3-.81-.74-1.55-1.28-2.2a.51.51 0 00-.59-.13z"/>
                    <circle cx="8" cy="8" r="2.5" fill="none" stroke="currentColor"/>
                  </svg>
                {{/actions}}
              </div>
            </div>
            
            {{#with ticket}}
              <a href="{{url}}" target="_zendesk_lotus" class="status-label escalation-badge">
                {{t 'request'}}{{id}}
              </a>
            {{/with}}
            {{#if pending}}
              <span class="badge badge-pending">
                {{t 'pending_approval'}}
              </span>
            {{/if}}
            
            {{! Comment content }}
            <section class="content">
              {{body}}
            </section>
            
             {{! Comment voting }}
            <div class="button-group button-group-sm" role="group">
              {{#vote 'up' class='button button-outline-primary' selected_class='is-active' role='radio'}}
                <svg class="svg-icon rotate-180" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 16 16">
                  <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M4 6.5l3.6 3.6c.2.2.5.2.7 0L12 6.5"></path>
                </svg>
              {{/vote}}
              {{#vote 'down' class='button button-outline-primary' selected_class='is-active' role='radio'}}
                <svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 16 16">
                  <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M4 6.5l3.6 3.6c.2.2.5.2.7 0L12 6.5"></path>
                </svg>
              {{/vote}}
            </div>
            {{vote 'sum' class='font-size-sm text-gray-600 ml-1'}}
          </div>
        </div>
      </li>
    {{/each}}
  </ul>
{{/if}}
Comments in cards
View code
{{#if comments}}
  <ul class="list-unstyled list-bordered border border-radius bg-white">
    {{#each comments}}
      <li class="comment p-5" id="{{anchor}}">

        {{! Comment metadata }}
        <div class="media mb-4">
          <div class="avatar">
            {{#if author.agent}}
              <svg class="svg-icon absolute bottom-0 right-0 text-primary bg-white border border-white circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" aria-hidden="true">
                <use xlink:href="#icon-agent" />
              </svg>
            {{/if}}
            <img class="avatar-img" src="{{author.avatar_url}}" alt="Comment author">
          </div>
          <div class="media-body font-size-md align-self-center">
            {{#link 'user_profile' class="link-implied" id=author.id title=author.name}}
              {{author.name}}
            {{/link}}
            {{#each author.badges}}
              {{#is category_slug "titles"}}
                <span class="badge inline-flex align-items-center align-middle bg-primary text-primary-inverse py-0 pr-2 mx-1" title="{{description}}" aria-label="{{name}}">
                {{#if icon_url}}
                  <img src="{{icon_url}}" alt="{{description}}" />
                {{/if}}
                {{name}}
              </span>
              {{/is}}
            {{/each}}
            {{#each author.badges}}
              {{#is category_slug "achievements"}}
                {{#if icon_url}}
                  <img width="22" height="22" src="{{icon_url}}" alt="{{name}}" title="{{name}} | {{description}}" aria-label="{{name}}" />
                {{/if}}
              {{/is}}
            {{/each}}
            <ul class="list-divider">
              {{#if editor}}
                <li class="text-gray-600">
                  {{t 'edited'}} {{date edited_at timeago=true}}
                </li>
              {{else}}
                <li class="text-gray-600">
                  {{date created_at timeago=true}}
                </li>
              {{/if}}
            </ul>
          </div>
          <div class="actions-comment">
            {{#actions}}
              <svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true">
                <path fill="none" stroke="currentColor" d="M13.17 3.07l-1.64.71c-.48-.4-1.03-.72-1.63-.94l-.22-1.79a.511.511 0 00-.4-.44C8.86.54 8.44.5 8 .5c-.44 0-.86.04-1.28.11-.22.04-.38.22-.4.44l-.21 1.79c-.6.22-1.15.54-1.63.94l-1.65-.71a.491.491 0 00-.58.13c-.55.65-.99 1.4-1.29 2.21-.08.21 0 .44.18.58l1.45 1.08a4.91 4.91 0 000 1.87l-1.45 1.08c-.18.13-.25.37-.18.58.3.81.74 1.55 1.28 2.2.14.17.38.22.58.13l1.65-.71c.48.4 1.03.72 1.63.94l.21 1.79c.03.22.19.4.4.44.43.07.85.11 1.29.11.44 0 .86-.04 1.28-.11.22-.04.38-.22.4-.44l.21-1.79c.6-.22 1.15-.54 1.63-.94l1.65.71c.2.09.44.04.58-.13.54-.65.98-1.39 1.28-2.2.08-.21 0-.44-.18-.57L13.4 8.95c.07-.32.1-.63.1-.95s-.03-.63-.09-.94l1.45-1.08c.18-.13.25-.37.18-.58-.3-.81-.74-1.55-1.28-2.2a.51.51 0 00-.59-.13z"/>
                <circle cx="8" cy="8" r="2.5" fill="none" stroke="currentColor"/>
              </svg>
            {{/actions}}
          </div>
        </div>

        {{#with ticket}}
          <a href="{{url}}" target="_zendesk_lotus" class="status-label escalation-badge">
            {{t 'request'}}{{id}}
          </a>
        {{/with}}
        {{#if pending}}
          <span class="badge badge-pending">
            {{t 'pending_approval'}}
          </span>
        {{/if}}

        {{! Comment content }}
        <section class="content">
          {{body}}
        </section>

        {{! Comment voting }}
        <div class="button-group button-group-sm" role="group">
          {{#vote 'up' class='button button-outline' selected_class='is-active' role='radio'}}
            <svg class="svg-icon rotate-180" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true">
              <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M4 6.5l3.6 3.6c.2.2.5.2.7 0L12 6.5"></path>
            </svg>
          {{/vote}}
          {{#vote 'down' class='button button-outline' selected_class='is-active' role='radio'}}
            <svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true">
              <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M4 6.5l3.6 3.6c.2.2.5.2.7 0L12 6.5"></path>
            </svg>
          {{/vote}}
        </div>
        {{vote 'sum' class='font-size-sm text-gray-600 ml-1'}}

      </li>
    {{/each}}
  </ul>
{{/if}}
Boxed comments with like button
View code
{{#if comments}}
  <ul class="list-unstyled list-bordered border border-radius bg-white">
    {{#each comments}}
      <li class="comment" id="{{anchor}}">

        {{! Comment metadata }}
        <div class="media">
          <div class="avatar">
            {{#if author.agent}}
              <svg class="svg-icon absolute bottom-0 right-0 text-primary bg-white border border-white circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" aria-hidden="true">
                <use xlink:href="#icon-agent" />
              </svg>
            {{/if}}
            <img class="avatar-img" src="{{author.avatar_url}}" alt="Comment author">
          </div>
          <div class="media-body font-size-md align-self-center">
            {{#link 'user_profile' class="link-implied" id=author.id title=author.name}}
              {{author.name}}
            {{/link}}
            {{#each author.badges}}
              {{#is category_slug "titles"}}
                <span class="badge inline-flex align-items-center align-middle bg-primary text-primary-inverse py-0 pr-2 mx-1" title="{{description}}" aria-label="{{name}}">
                {{#if icon_url}}
                  <img src="{{icon_url}}" alt="{{description}}" />
                {{/if}}
                {{name}}
              </span>
              {{/is}}
            {{/each}}
            {{#each author.badges}}
              {{#is category_slug "achievements"}}
                {{#if icon_url}}
                  <img width="22" height="22" src="{{icon_url}}" alt="{{name}}" title="{{name}} | {{description}}" aria-label="{{name}}" />
                {{/if}}
              {{/is}}
            {{/each}}
            <ul class="list-divider">
              {{#if editor}}
                <li class="text-gray-600">
                  {{t 'edited'}} {{date edited_at timeago=true}}
                </li>
              {{else}}
                <li class="text-gray-600">
                  {{date created_at timeago=true}}
                </li>
              {{/if}}
            </ul>
          </div>
          <div class="actions-comment">
            {{#actions}}
              <svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true">
                <path fill="none" stroke="currentColor" d="M13.17 3.07l-1.64.71c-.48-.4-1.03-.72-1.63-.94l-.22-1.79a.511.511 0 00-.4-.44C8.86.54 8.44.5 8 .5c-.44 0-.86.04-1.28.11-.22.04-.38.22-.4.44l-.21 1.79c-.6.22-1.15.54-1.63.94l-1.65-.71a.491.491 0 00-.58.13c-.55.65-.99 1.4-1.29 2.21-.08.21 0 .44.18.58l1.45 1.08a4.91 4.91 0 000 1.87l-1.45 1.08c-.18.13-.25.37-.18.58.3.81.74 1.55 1.28 2.2.14.17.38.22.58.13l1.65-.71c.48.4 1.03.72 1.63.94l.21 1.79c.03.22.19.4.4.44.43.07.85.11 1.29.11.44 0 .86-.04 1.28-.11.22-.04.38-.22.4-.44l.21-1.79c.6-.22 1.15-.54 1.63-.94l1.65.71c.2.09.44.04.58-.13.54-.65.98-1.39 1.28-2.2.08-.21 0-.44-.18-.57L13.4 8.95c.07-.32.1-.63.1-.95s-.03-.63-.09-.94l1.45-1.08c.18-.13.25-.37.18-.58-.3-.81-.74-1.55-1.28-2.2a.51.51 0 00-.59-.13z"/>
                <circle cx="8" cy="8" r="2.5" fill="none" stroke="currentColor"/>
              </svg>
            {{/actions}}
          </div>
        </div>
        <div class="p-5 mb-6 bg-white border border-radius">
          {{#with ticket}}
            <a href="{{url}}" target="_zendesk_lotus" class="status-label escalation-badge">
              {{t 'request'}}{{id}}
            </a>
          {{/with}}
          {{#if pending}}
            <span class="badge badge-pending">
              {{t 'pending_approval'}}
            </span>
          {{/if}}

          {{! Comment content }}
          <section class="content">
            {{body}}
          </section>

          {{! Comment voting }}
          <div class="button-group button-group-sm" role="group">
            {{#vote 'up' class='button button-outline' selected_class='is-active' role='radio'}}
              <svg class="svg-icon fill-current" viewBox="0 0 507 512" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                <path d="M330,512 C261,512 152,489 126,470 C119,466 116,459 116,452 L116,234 C116,228 119,221 124,217 C126,216 165,185 206,163 C256,135 291,96 300,71 C310,41 324,0 370,0 C392,0 409,12 419,33 C438,77 418,137 384,184 C407,189 434,196 451,201 C482,211 502,233 506,260 C510,288 496,317 467,338 C445,397 408,489 380,504 C370,510 352,512 330,512 Z M161,439 C203,456 333,475 358,465 C370,454 403,379 426,316 C428,312 431,308 434,305 C453,293 462,278 461,266 C459,256 450,248 437,243 C409,234 340,219 339,219 C331,218 325,212 322,204 C319,196 321,188 327,183 C377,129 386,73 377,51 C374,45 372,45 370,45 C359,45 354,52 342,86 C329,125 282,171 227,201 C201,216 174,235 161,245 L161,439 Z M73,454 L73,232 C73,211 57,195 37,195 C16,195 0,211 0,232 L0,454 C0,474 16,490 36,490 C56,490 73,474 73,454 Z"></path>
              </svg>
            {{/vote}}
          </div>
          <span class="ml-1 font-size-md text-gray-600">{{vote 'sum' class='font-size-sm text-gray-600 ml-1'}}</span>
        </div>
      </li>
    {{/each}}
  </ul>
{{/if}}

Comment list patterns are designed to replace the built-in comment lists on the Article, Request and/or Community Post pages. To use a given pattern, copy-and-paste the code into one of the above pages, replacing the existing comment list:

{{#if comments}}
  <ul class="list-unstyled">
    {{#each comments}}
      <li> 
        ...
      </li>
    {{/each}}
  </ul>
{{/if}}

The surrounding markup (e.g., comment header and form) can be left unchanged.

Related patterns