Attachment lists

Attachment lists allow users to view and download attachments associated with an article or request.

Attachments in a list
View code
{{#if attachments}}
  <ul class="list-unstyled my-6">
    {{#each attachments}}
      <li class="list-item">
        <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" d="M9.5 4v7.7c0 .8-.7 1.5-1.5 1.5s-1.5-.7-1.5-1.5V3C6.5 1.6 7.6.5 9 .5s2.5 1.1 2.5 2.5v9c0 1.9-1.6 3.5-3.5 3.5S4.5 13.9 4.5 12V4"/>
        </svg>
        <a class="mr-2" href="{{url}}" target="_blank">{{name}}</a><span class="font-size-md text-gray-600">{{size}}</span>
      </li>
    {{/each}}
  </ul>
{{/if}}
Attachments as buttons
View code
{{#if attachments}}
  <ul class="list-unstyled my-6">
    {{#each attachments}}
      <li class="inline-block mb-4 mr-2">
        <a class="button button-outline button-sm flex flex-no-wrap align-items-baseline" href="{{url}}" target="_blank">
          <svg class="svg-icon fill-current mr-1" xmlns="http://www.w3.org/2000/svg" focusable="false" viewBox="0 0 16 16">
            <path fill="none" stroke="currentColor" stroke-linecap="round" d="M9.5 4v7.7c0 .8-.7 1.5-1.5 1.5s-1.5-.7-1.5-1.5V3C6.5 1.6 7.6.5 9 .5s2.5 1.1 2.5 2.5v9c0 1.9-1.6 3.5-3.5 3.5S4.5 13.9 4.5 12V4"/>
         </svg>
        <span class="truncate">{{name}}</span>
         <span class="sr-only">{{size}}</span>
       </a>
      </li>
    {{/each}}
  </ul>
{{/if}}
Attachments in larger list items
View code
{{#if attachments}}
  <ul class="list-unstyled my-6">
    {{#each attachments}}
      <li class="media mb-4">
        <svg class="fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="24" aria-hidden="true">
          <path fill="none" stroke="currentColor" stroke-linecap="round" d="M9.5 4v7.7c0 .8-.7 1.5-1.5 1.5s-1.5-.7-1.5-1.5V3C6.5 1.6 7.6.5 9 .5s2.5 1.1 2.5 2.5v9c0 1.9-1.6 3.5-3.5 3.5S4.5 13.9 4.5 12V4"/>
        </svg>
        <div class="media-body ml-2">
          <p class="mb-1">
            <a class="font-semibold text-inherit" href="{{url}}" target="_blank">
              {{name}}
            </a>
          </p>
          <ul class="list-divider text-gray-600 font-size-md">
            <li>{{size}}</li>
            <li><a href="{{url}}" target="_blank">Download</a></li>
          </ul>
        </div>
      </li>
    {{/each}}
  </ul>
{{/if}}

Attachment list patterns use the attachments collection on the Article page (article_page.hbs) and Community Post page (community_post_page) templates.

Simply copy and paste the code of your selected pattern into the position you’d like it to appear on either of those pages.

Related patterns

Article lists

Article lists

4 patterns

Callouts

Callouts

5 patterns