<div class="c-attachments o-bg-light u-p-small">
<h3 class="u-label-02 u-color-base">Allegati</h3>
<ul class="u-list-none u-list-reset u-mb-none">
<li class="c-attachments__item">
<a href="#" class="o-link-text">
<svg class="o-icon o-icon--sm u-mr-xxsmall">
<use xlink:href="#icon-arrow-down-circle"></use>
</svg>
<span class="u-label-03">Titolo dell'allegato</span>
</a>
</li>
<li class="c-attachments__item">
<a href="#" class="o-link-text">
<svg class="o-icon o-icon--sm u-mr-xxsmall">
<use xlink:href="#icon-arrow-down-circle"></use>
</svg>
<span class="u-label-03">Titolo dell'allegato</span>
</a>
</li>
<li class="c-attachments__item">
<a href="#" class="o-link-text">
<svg class="o-icon o-icon--sm u-mr-xxsmall">
<use xlink:href="#icon-arrow-down-circle"></use>
</svg>
<span class="u-label-03">Titolo dell'allegato</span>
</a>
</li>
<li class="c-attachments__item">
<a href="#" class="o-link-text">
<svg class="o-icon o-icon--sm u-mr-xxsmall">
<use xlink:href="#icon-arrow-down-circle"></use>
</svg>
<span class="u-label-03">Titolo dell'allegato</span>
</a>
</li>
</ul>
</div>
<div class="c-attachments o-bg-light u-p-small">
<h3 class="u-label-02 u-color-base">Allegati</h3>
<ul class="u-list-none u-list-reset u-mb-none">
{% for item in files %}
<li class="c-attachments__item">
<a href="#" class="o-link-text">
<svg class="o-icon o-icon--sm u-mr-xxsmall"><use xlink:href="#icon-arrow-down-circle"></use></svg>
<span class="u-label-03">{{ item }}</span>
</a>
</li>
{% endfor %}
</ul>
</div>
{
"files": [
"Titolo dell'allegato",
"Titolo dell'allegato",
"Titolo dell'allegato",
"Titolo dell'allegato"
]
}
// Name: Attachments
// Description: Attached files to an item page
//
// Component: `c-attachments`
//
// Variants: `c-attachments--gallery`
//
// Dependencies: `settings/spacing.tokens`
// `v7_colors`
// `themes/[theme-file]`
//
// ========================================================================
.c-attachments {
--attachment-bg: #{$ui-02};
border-top: 3px solid var(--theme-color);
&--gallery {
background-color: var(--attachment-bg);
}
&__item:not(:last-child) {
padding-bottom: $padding-small;
border-bottom: 1px solid var(--divider-color);
margin-bottom: $margin-small;
}
}
Widget: Allegati articolo Template: - Link: url -