Author information

Author information can be displayed for articles, posts, requests and comments in your Zendesk help center.

By default author information is displayed above the content.

For article author information you can use the Metadata setting in the Article page elements setting group to switch between displaying just the article date (before or after the article content) or the article author and date.

Th built-in styles in all of our themes fully support user badges.

Standard author section
View code
<div class="flex{{#is settings.article_metadata 'none'}}{{#unless settings.show_follow_article}} hidden{{/unless}}{{/is}}">
  <div class="media">
    {{#is settings.article_metadata 'author'}}
      <div class="avatar">
        {{#if article.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 w-7 h-7" alt="{{article.author.name}}" src="{{article.author.avatar_url}}">
      </div>
    {{/is}}
    {{#isnt settings.article_metadata 'none'}}
      <div class="media-body font-size-md align-self-center{{#is settings.article_metadata 'date-end'}}{{#unless comments}} hidden{{/unless}}{{/is}}">
        {{#is settings.article_metadata 'author'}}
          {{#link 'user_profile' class="link-implied" id=article.author.id}}
            {{article.author.name}}
          {{/link}}
          {{#each article.author.badges}}
            {{#is category_slug "titles"}}
              <span class="badge bg-primary text-primary-inverse py-1 pr-2 mx-2" title="{{description}}" aria-label="{{name}}">
                {{#if icon_url}}
                  <img src="{{icon_url}}" alt="{{description}}" />
                {{/if}}
                {{name}}
              </span>
            {{/is}}
          {{/each}}
          {{#each article.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}}
        {{/is}}
        <ul class="list-divider">
          {{#isnt settings.article_metadata 'date-end'}}
            <li class="text-gray-600">
              {{#is article.created_at article.edited_at}}
                {{date article.created_at timeago=true}}
              {{else}}
                {{t 'updated'}}
                {{date article.edited_at timeago=true}}
              {{/is}}
            </li>
          {{/isnt}}
          {{#if settings.show_article_comments}}
            {{#if comments}}
              <li class="text-gray-600">
                <a href="#comments">
                  {{t 'comments_count' count=article.comment_count}}
                </a>
              </li>
            {{/if}}
          {{~/if}}
        </ul>
      </div>
    {{/isnt}}
    {{#if settings.show_follow_article}}
      <div class="subscribe-article">
        {{subscribe}}
      </div>
    {{/if}}
  </div>
</div>
Large author avatar with icons
View code
<div class="flex{{#is settings.article_metadata 'none'}}{{#unless settings.show_follow_article}} hidden{{/unless}}{{/is}}">
  <div class="media">
    {{#is settings.article_metadata 'author'}}
      <div class="avatar avatar-lg">
        {{#if article.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" alt="{{article.author.name}}" src="{{article.author.avatar_url}}">
      </div>
    {{/is}}
    {{#isnt settings.article_metadata 'none'}}
      <div class="media-body align-self-center{{#is settings.article_metadata 'date-end'}}{{#unless comments}} hidden{{/unless}}{{/is}}">
        {{#is settings.article_metadata 'author'}}
          {{#link 'user_profile' class="link-implied" id=article.author.id}}
            {{article.author.name}}
          {{/link}}
          {{#each article.author.badges}}
            {{#is category_slug "titles"}}
              <span class="badge bg-primary text-primary-inverse py-1 pr-2 mx-2" title="{{description}}" aria-label="{{name}}">
                {{#if icon_url}}
                  <img src="{{icon_url}}" alt="{{description}}" />
                {{/if}}
                {{name}}
              </span>
            {{/is}}
          {{/each}}
          {{#each article.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}}
        {{/is}}
        <ul class="list-divider mt-1">
          {{#isnt settings.article_metadata 'date-end'}}
            <li class="text-gray-600">
              <svg class="svg-icon fill-current mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M10 0C4.486 0 0 4.486 0 10s4.486 10 10 10 10-4.486 10-10S15.514 0 10 0zm0 1.667A8.32 8.32 0 0 1 18.333 10 8.32 8.32 0 0 1 10 18.333 8.32 8.32 0 0 1 1.667 10 8.32 8.32 0 0 1 10 1.667zm-1.2 2.13V11.9h5.966v-1.667h-4.3V3.796H8.8z"></path>
              </svg>
              {{#is article.created_at article.edited_at}}
                {{date article.created_at timeago=true}}
              {{else}}
                {{t 'updated'}}
                {{date article.edited_at timeago=true}}
              {{/is}}
            </li>
          {{/isnt}}
          {{#if settings.show_article_comments}}
            {{#if comments}}
              <li class="text-gray-600">
                <a href="#comments">
                  <svg class="svg-icon fill-current mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" x="0px" y="0px">
                    <path d="M17.92041,94.68165a4.592,4.592,0,0,0,4.86084-.955l14.47852-13.724A50.136,50.136,0,0,0,50,81.63144c24.28027,0,44.03369-17.18968,44.03369-38.31963C94.03369,22.18773,74.28027,5.002,50,5.002S5.96631,22.18773,5.96631,43.31181a34.58557,34.58557,0,0,0,7.03027,20.78035l1.9917,26.61408A4.58272,4.58272,0,0,0,17.92041,94.68165Zm-4.9541-51.36984c0-17.26487,16.61328-31.31016,37.03369-31.31016S87.03369,26.04694,87.03369,43.31181c0,17.26976-16.61328,31.31993-37.03369,31.31993a42.97953,42.97953,0,0,1-12.66943-1.88566l-1.95411-.60251L21.59619,85.2055l-1.687-22.54492V61.57665l-.75244-.95309A27.78933,27.78933,0,0,1,12.96631,43.31181Z"></path>
                  </svg>  {{article.comment_count}}
                </a>
              </li>
            {{/if}}
          {{~/if}}
        </ul>
      </div>
    {{/isnt}}
    {{#if settings.show_follow_article}}
      <div class="subscribe-article">
        {{subscribe}}
      </div>
    {{/if}}
  </div>
</div>
Simplified author section
View code
<div class="inline-flex py-2 pl-2 pr-5 align-items-center rounded font-size-md bg-gray-100">
  {{#is settings.article_metadata 'author'}}
    <div class="avatar mb-0 mr-3">
      {{#if article.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" alt="{{article.author.name}}" src="{{article.author.avatar_url}}">
    {{/is}}
  </div>
  <div class="{{#is settings.article_metadata 'date-end'}}{{#isnt settings.article_metadata 'author'}}hidden{{/isnt}}{{/is}}">
    {{#isnt settings.article_metadata 'date-end'}}
      {{#is article.created_at article.edited_at}}
        {{date article.created_at timeago=true}}
      {{else}}
        {{t 'updated'}} {{date article.edited_at timeago=true}}
      {{/is}}
    {{/isnt}}{{#is settings.article_metadata 'author'}} by {{#link 'user_profile' class="text-inherit font-medium" id=article.author.id}}
      {{article.author.name}}
    {{/link}}{{/is}}
  </div>
</div>
Date at end of article
View code
{{#is settings.article_metadata 'date-end'}}
  <p class="text-gray-600 my-5">
    {{#is article.created_at article.edited_at}}
      {{date article.created_at timeago=true}}
    {{else}}
      {{t 'updated'}}
      {{date article.edited_at timeago=true}}
    {{/is}}
  </p>
{{/is}}
Date at end of article with icon
View code
{{#is settings.article_metadata 'date-end'}}
  <div class="text-gray-600 my-5">
    <ul class="list-divider">
      <li>
        <svg class="svg-icon fill-current mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M10 0C4.486 0 0 4.486 0 10s4.486 10 10 10 10-4.486 10-10S15.514 0 10 0zm0 1.667A8.32 8.32 0 0 1 18.333 10 8.32 8.32 0 0 1 10 18.333 8.32 8.32 0 0 1 1.667 10 8.32 8.32 0 0 1 10 1.667zm-1.2 2.13V11.9h5.966v-1.667h-4.3V3.796H8.8z"></path>
        </svg> {{#is article.created_at article.edited_at}}{{date article.created_at timeago=true}}{{else}}{{date article.edited_at timeago=true}}{{/is}}
      </li>
      {{#isnt article.created_at article.edited_at}}
        <li>{{t 'updated'}}</li>
      {{/isnt}}
    </ul>
  </div>
{{/is}}

In sidebar

List with icons in sidebar
View code
<div class="row font-medium mb-0{{#is settings.article_metadata 'none'}}{{#unless settings.show_follow_article}} hidden{{/unless}}{{/is}}">
  <div class="flex align-items-center py-4 sm:col-6 sm:border-bottom md:col-12 md:border-bottom-0 md:py-3">
    <svg class="mr-2 stroke-current text-gray-600" width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M16 7C16 9.20914 14.2091 11 12 11C9.79086 11 8 9.20914 8 7C8 4.79086 9.79086 3 12 3C14.2091 3 16 4.79086 16 7Z" stroke="#4A5568" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
      <path d="M12 14C8.13401 14 5 17.134 5 21H19C19 17.134 15.866 14 12 14Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
    </svg>
    {{#link 'user_profile' class="text-inherit" id=article.author.id}}
      {{article.author.name}}
    {{/link}}
  </div>
  {{#isnt settings.article_metadata 'none'}}
    <div class="flex align-items-center py-4 sm:col-6 sm:border-left sm:border-bottom md:col-12 md:border-left-0 md:border-bottom-0 md:py-3">
      <svg class="mr-2 stroke-current text-gray-600" width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M8 7V3M16 7V3M7 11H17M5 21H19C20.1046 21 21 20.1046 21 19V7C21 5.89543 20.1046 5 19 5H5C3.89543 5 3 5.89543 3 7V19C3 20.1046 3.89543 21 5 21Z" stroke="#4A5568" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
      </svg>
      {{#is article.created_at article.edited_at}}
        {{date article.created_at timeago=true}}
      {{else}}
        <span class="mr-1">{{t 'updated'}}</span>{{date article.edited_at timeago=true}}
      {{/is}}
    </div>
    <div class="flex align-items-center py-4 sm:col-6 md:col-12 md:py-3">
      <svg class="mr-2 stroke-current text-gray-600" width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M7 7H7.01M7 3H12C12.5119 2.99999 13.0237 3.19525 13.4142 3.58579L20.4143 10.5858C21.1953 11.3668 21.1953 12.6332 20.4143 13.4142L13.4142 20.4142C12.6332 21.1953 11.3668 21.1953 10.5858 20.4142L3.58579 13.4142C3.19526 13.0237 3 12.5118 3 12V7C3 4.79086 4.79086 3 7 3Z" stroke="#4A5568" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
      </svg>
      <a class="text-inherit" href="{{section.url}}">
        {{section.name}}
      </a>
    </div>
    {{#if settings.show_article_comments}}
      {{#if comments}}
        <div class="flex align-items-center py-4 sm:col-6 sm:border-left md:col-12 md:border-left-0 md:border-bottom-0 md:py-3">
          <svg class="mr-2 stroke-current text-gray-600" width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M7 8H17M7 12H11M12 20L8 16H5C3.89543 16 3 15.1046 3 14V6C3 4.89543 3.89543 4 5 4H19C20.1046 4 21 4.89543 21 6V14C21 15.1046 20.1046 16 19 16H16L12 20Z" stroke="#4A5568" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
          <a href="#comments">
            <svg class="svg-icon fill-current mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" x="0px" y="0px">
              <path d="M17.92041,94.68165a4.592,4.592,0,0,0,4.86084-.955l14.47852-13.724A50.136,50.136,0,0,0,50,81.63144c24.28027,0,44.03369-17.18968,44.03369-38.31963C94.03369,22.18773,74.28027,5.002,50,5.002S5.96631,22.18773,5.96631,43.31181a34.58557,34.58557,0,0,0,7.03027,20.78035l1.9917,26.61408A4.58272,4.58272,0,0,0,17.92041,94.68165Zm-4.9541-51.36984c0-17.26487,16.61328-31.31016,37.03369-31.31016S87.03369,26.04694,87.03369,43.31181c0,17.26976-16.61328,31.31993-37.03369,31.31993a42.97953,42.97953,0,0,1-12.66943-1.88566l-1.95411-.60251L21.59619,85.2055l-1.687-22.54492V61.57665l-.75244-.95309A27.78933,27.78933,0,0,1,12.96631,43.31181Z"></path>
            </svg>  {{article.comment_count}}
          </a>
        </div>
      {{/if}}
    {{~/if}}
  {{/isnt}}
</div>
<div class="card bg-white{{#is settings.article_metadata 'none'}}{{#unless settings.show_follow_article}} hidden{{/unless}}{{/is}}">
  <ul class="list-unstyled font-size-md font-medium mb-0">
    {{#is settings.article_metadata 'author'}}
      <li class="flex align-items-center justify-content-between p-4 border-bottom">
        <div class="media">
          {{#is settings.article_metadata 'author'}}
            <div class="avatar avatar-lg mb-0 mr-4">
              {{#if article.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" alt="{{article.author.name}}" src="{{article.author.avatar_url}}">
            </div>
            <div class="media-body font-size-lg align-self-center{{#is settings.article_metadata 'date-end'}}{{#unless comments}} hidden{{/unless}}{{/is}}">
              {{#is settings.article_metadata 'author'}}
                {{#link 'user_profile' class="text-inherit" id=article.author.id}}
                  {{article.author.name}}
                {{/link}}
              {{/is}}
              {{#if settings.show_follow_article}}
                <div class="subscribe-article mt-2">
                  {{subscribe}}
                </div>
              {{/if}}
            </div>
          {{/is}}
        </div>
      </li>
    {{/is}}
    <li class="flex align-items-center justify-content-between p-4 border-bottom">
      <span class="text-gray-600">{{t 'created'}}</span>
      <span class="text-right">{{date article.created_at format="medium"}}</span>
    </li>
    {{#isnt article.created_at article.updated_at}}
      <li class="flex align-items-center justify-content-between p-4 border-bottom">
        <span class="text-gray-600">{{t 'updated'}}</span>
        <span class="text-right">{{date article.updated_at format="medium"}}</span>
      </li>
    {{/isnt}}
    {{#if settings.show_article_comments}}
      {{#if comments}}
        <li class="flex align-items-center justify-content-between p-4">
          <span class="text-gray-600">{{t 'comments'}}</span>
          <a class="text-right hover:no-underline" href="#comments">
            {{article.comment_count}}
          </a>
        </li>
      {{/if}}
    {{~/if}}
  </ul>
</div>

You can use author information patterns by copying and pasting the code into the position you’d like them to appear in any article, comment, post or request.

Using on the Article page

By default the Article page has three built-in author information and metadata styles controlled by the Metadata setting in the Article page elements setting group:

  1. Just the date at the start of the article
  2. The author information and date at the start of the article
  3. Just the date at the end of the article

When using a style that appears at the start of an article, you can replace the following block on the article_page.hbs template with your chosen pattern:

{{!----------------
   Article metadata
   ----------------}}
<div class="flex{{#is settings.article_metadata 'none'}}{{#unless settings.show_follow_article}} hidden{{/unless}}{{/is}}">
  ...
</div> 

When using a style that appears at the end of an article, you can replace the following block, which appears just below the article content and attachments section, on the article_page.hbs template with your chosen pattern:

{{#is settings.article_metadata 'date-end'}}
  {{! Article metadata }}
  <p class="text-gray-600 mt-6">
    ...
  </p>
{{/is}} 

Related patterns

Article lists

Article lists

4 patterns

Callouts

Callouts

5 patterns