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.