<div class="c-attachments o-bg-light u-p-small">
<h3 class="u-label-03 u-m-none u-color-inverse">
<svg class="o-icon o-icon--sm u-mr-xsmall u-mb-xxsmall">
<use xlink:href="#icon-camera"></use>
</svg>
Gallery
</h3>
<ul class="c-lightbox u-list-none u-list-reset u-mb-none u-flex u-wrap ">
<li class="c-lightbox__item u-p-xsmall">
<a class="u-block u-relative u-size-full-height" href="#image-0">
<img class="u-block u-cover" decoding="async" referrerpolicy="no-referrer" src="https://www.previewtoday.it/~media/original-hi/43271161050302/gallery1-2-4.png" alt="image01">
</a>
<div class="c-lightbox__overlay u-fixed u-overflow-hidden u-top u-left" id="image-0">
<div class="c-lightbox__expanded u-flex u-justify-center u-items-center ">
<a href="#image--1" class="o-link-inverse u-mr-large">
<svg class="o-icon o-icon--md" data-dd-icon="">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-left"></use>
</svg>
</a>
<div class="u-relative">
<img decoding="async" referrerpolicy="no-referrer" class="c-lightbox__full-img" src="https://www.previewtoday.it/~media/original-hi/43271161050302/gallery1-2-4.png" alt="image01">
<a href="#page" class="c-lightbox__icon-close o-link-inverse u-p-xxsmall u-absolute">
<svg class="o-icon o-icon--md">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-x"></use>
</svg>
</a>
</div>
<a href="#image-1" class="o-link-inverse u-ml-large">
<svg class="o-icon o-icon--md" data-dd-icon="">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-right"></use>
</svg>
</a>
</div>
</div>
</li>
<li class="c-lightbox__item u-p-xsmall">
<a class="u-block u-relative u-size-full-height" href="#image-1">
<img class="u-block u-cover" decoding="async" referrerpolicy="no-referrer" src="https://www.previewtoday.it/~media/original-hi/43271161050302/gallery1-2-4.png" alt="image01">
</a>
<div class="c-lightbox__overlay u-fixed u-overflow-hidden u-top u-left" id="image-1">
<div class="c-lightbox__expanded u-flex u-justify-center u-items-center ">
<a href="#image-0" class="o-link-inverse u-mr-large">
<svg class="o-icon o-icon--md" data-dd-icon="">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-left"></use>
</svg>
</a>
<div class="u-relative">
<img decoding="async" referrerpolicy="no-referrer" class="c-lightbox__full-img" src="https://www.previewtoday.it/~media/original-hi/43271161050302/gallery1-2-4.png" alt="image01">
<a href="#page" class="c-lightbox__icon-close o-link-inverse u-p-xxsmall u-absolute">
<svg class="o-icon o-icon--md">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-x"></use>
</svg>
</a>
</div>
<a href="#image-2" class="o-link-inverse u-ml-large">
<svg class="o-icon o-icon--md" data-dd-icon="">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-right"></use>
</svg>
</a>
</div>
</div>
</li>
<li class="c-lightbox__item u-p-xsmall">
<a class="u-block u-relative u-size-full-height" href="#image-2">
<img class="u-block u-cover" decoding="async" referrerpolicy="no-referrer" src="https://www.previewtoday.it/~media/original-hi/43271161050302/gallery1-2-4.png" alt="image01">
</a>
<div class="c-lightbox__overlay u-fixed u-overflow-hidden u-top u-left" id="image-2">
<div class="c-lightbox__expanded u-flex u-justify-center u-items-center ">
<a href="#image-1" class="o-link-inverse u-mr-large">
<svg class="o-icon o-icon--md" data-dd-icon="">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-left"></use>
</svg>
</a>
<div class="u-relative">
<img decoding="async" referrerpolicy="no-referrer" class="c-lightbox__full-img" src="https://www.previewtoday.it/~media/original-hi/43271161050302/gallery1-2-4.png" alt="image01">
<a href="#page" class="c-lightbox__icon-close o-link-inverse u-p-xxsmall u-absolute">
<svg class="o-icon o-icon--md">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-x"></use>
</svg>
</a>
</div>
<a href="#image-3" class="o-link-inverse u-ml-large">
<svg class="o-icon o-icon--md" data-dd-icon="">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-right"></use>
</svg>
</a>
</div>
</div>
</li>
<li class="c-lightbox__item u-p-xsmall">
<a class="u-block u-relative u-size-full-height" href="#image-3">
<img class="u-block u-cover" decoding="async" referrerpolicy="no-referrer" src="https://www.previewtoday.it/~media/original-hi/43271161050302/gallery1-2-4.png" alt="image01">
</a>
<div class="c-lightbox__overlay u-fixed u-overflow-hidden u-top u-left" id="image-3">
<div class="c-lightbox__expanded u-flex u-justify-center u-items-center ">
<a href="#image-2" class="o-link-inverse u-mr-large">
<svg class="o-icon o-icon--md" data-dd-icon="">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-left"></use>
</svg>
</a>
<div class="u-relative">
<img decoding="async" referrerpolicy="no-referrer" class="c-lightbox__full-img" src="https://www.previewtoday.it/~media/original-hi/43271161050302/gallery1-2-4.png" alt="image01">
<a href="#page" class="c-lightbox__icon-close o-link-inverse u-p-xxsmall u-absolute">
<svg class="o-icon o-icon--md">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-x"></use>
</svg>
</a>
</div>
<a href="#image-4" class="o-link-inverse u-ml-large">
<svg class="o-icon o-icon--md" data-dd-icon="">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-right"></use>
</svg>
</a>
</div>
</div>
</li>
<li class="c-lightbox__item u-p-xsmall">
<a class="u-block u-relative u-size-full-height" href="#image-4">
<img class="u-block u-cover" decoding="async" referrerpolicy="no-referrer" src="https://www.previewtoday.it/~media/original-hi/43271161050302/gallery1-2-4.png" alt="image01">
</a>
<div class="c-lightbox__overlay u-fixed u-overflow-hidden u-top u-left" id="image-4">
<div class="c-lightbox__expanded u-flex u-justify-center u-items-center ">
<a href="#image-3" class="o-link-inverse u-mr-large">
<svg class="o-icon o-icon--md" data-dd-icon="">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-left"></use>
</svg>
</a>
<div class="u-relative">
<img decoding="async" referrerpolicy="no-referrer" class="c-lightbox__full-img" src="https://www.previewtoday.it/~media/original-hi/43271161050302/gallery1-2-4.png" alt="image01">
<a href="#page" class="c-lightbox__icon-close o-link-inverse u-p-xxsmall u-absolute">
<svg class="o-icon o-icon--md">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-x"></use>
</svg>
</a>
</div>
<a href="#image-5" class="o-link-inverse u-ml-large">
<svg class="o-icon o-icon--md" data-dd-icon="">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-right"></use>
</svg>
</a>
</div>
</div>
</li>
<li class="c-lightbox__item u-p-xsmall">
<a class="u-block u-relative u-size-full-height" href="#image-5">
<img class="u-block u-cover" decoding="async" referrerpolicy="no-referrer" src="https://www.previewtoday.it/~media/original-hi/43271161050302/gallery1-2-4.png" alt="image01">
</a>
<div class="c-lightbox__overlay u-fixed u-overflow-hidden u-top u-left" id="image-5">
<div class="c-lightbox__expanded u-flex u-justify-center u-items-center ">
<a href="#image-4" class="o-link-inverse u-mr-large">
<svg class="o-icon o-icon--md" data-dd-icon="">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-left"></use>
</svg>
</a>
<div class="u-relative">
<img decoding="async" referrerpolicy="no-referrer" class="c-lightbox__full-img" src="https://www.previewtoday.it/~media/original-hi/43271161050302/gallery1-2-4.png" alt="image01">
<a href="#page" class="c-lightbox__icon-close o-link-inverse u-p-xxsmall u-absolute">
<svg class="o-icon o-icon--md">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-x"></use>
</svg>
</a>
</div>
<a href="#image-6" class="o-link-inverse u-ml-large">
<svg class="o-icon o-icon--md" data-dd-icon="">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-right"></use>
</svg>
</a>
</div>
</div>
</li>
</ul>
</ul>
</div>
<div class="c-attachments o-bg-light u-p-small">
<h3 class="u-label-03 u-m-none u-color-inverse">
<svg class="o-icon o-icon--sm u-mr-xsmall u-mb-xxsmall"> <use xlink:href="#icon-camera"></use> </svg>
Gallery
</h3>
{% render "@lightbox" %}
</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 -