<section class="rtds-section rtds-section--approfondimenti rtds-py-6 md:rtds-py-8">
<div class="rtds-container rtds-space-y-4">
<div class="rtds-section-header rtds-section-header--approfondimenti">
<div class="rtds-flex rtds-items-center rtds-gap-4 md:rtds-gap-6 rtds-content-01">
<div class="rtds-flex rtds-flex-wrap rtds-items-center rtds-gap-2 md:rtds-gap-4">
<h2 class="rtds-heading-3 md:rtds-heading-2">Approfondimenti</h2>
<div class="rtds-vertical-divider rtds-w-4 md:rtds-w-6 lg:rtds-w-8">
<img class="rtds-w-full rtds-h-auto" src="/images/vertical-divider.svg" alt="">
</div>
</div>
</div>
</div>
<div class="rtds-space-y-5">
<div class="rtds-approfondimenti-list rtds-grid rtds-gap-4 md:rtds-grid-cols-2 lg:rtds-grid-cols-3">
<!-- Grid item wrapper -->
<div class="rtds-col">
<article class="rtds-card rtds-card--news rtds-card--news-image-fullwidth is-card-fullclickable rtds-group/card">
<picture class="rtds-card__image-wrapper
">
<img class="rtds-card__image rtds-h-full" alt="" src="/images/card-image.jpg" />
</picture>
<div class="rtds-card__content">
<div class="rtds-card__heading">
<h3 class="rtds-card__title">
<a class="group-hover/card:rtds-underline" href="">
Vaccinarsi contro Covid-19
<span class="rtds-sr-only">: leggi di più</span>
</a>
</h3>
<div class="rtds-card__metadata">
<div class="rtds-card__date">
<time datetime="2025-05-30">30 MAG 2025</time>
</div>
</div>
</div>
<div class="rtds-card__categories">
<span class="rtds-category ">
Salute
</span>
</div>
<div class="rtds-mt-auto rtds-pt-4">
<span class="rtds-action-link
rtds-card__action-link rtds-action-link--has-icon rtds-action-link--sm
">
Scopri l'approfondimento
<svg class="rtds-icon rtds-fill-current rtds-transition-all group-hover/card:rtds-translate-x-1" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-right" />
</svg>
</span>
</div>
</div>
</article>
</div>
<!-- Grid item wrapper -->
<div class="rtds-col">
<article class="rtds-card rtds-card--news rtds-card--news-image-fullwidth is-card-fullclickable rtds-group/card">
<picture class="rtds-card__image-wrapper
">
<img class="rtds-card__image rtds-h-full" alt="" src="/images/card-image.jpg" />
</picture>
<div class="rtds-card__content">
<div class="rtds-card__heading">
<h3 class="rtds-card__title">
<a class="group-hover/card:rtds-underline" href="">
Vaccinarsi contro Covid-19
<span class="rtds-sr-only">: leggi di più</span>
</a>
</h3>
<div class="rtds-card__metadata">
<div class="rtds-card__date">
<time datetime="2025-05-30">30 MAG 2025</time>
</div>
</div>
</div>
<div class="rtds-card__categories">
<span class="rtds-category ">
Salute
</span>
</div>
<div class="rtds-mt-auto rtds-pt-4">
<span class="rtds-action-link
rtds-card__action-link rtds-action-link--has-icon rtds-action-link--sm
">
Scopri l'approfondimento
<svg class="rtds-icon rtds-fill-current rtds-transition-all group-hover/card:rtds-translate-x-1" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-right" />
</svg>
</span>
</div>
</div>
</article>
</div>
<!-- Grid item wrapper -->
<div class="rtds-col">
<article class="rtds-card rtds-card--news rtds-card--news-image-fullwidth is-card-fullclickable rtds-group/card">
<picture class="rtds-card__image-wrapper
">
<img class="rtds-card__image rtds-h-full" alt="" src="/images/card-image.jpg" />
</picture>
<div class="rtds-card__content">
<div class="rtds-card__heading">
<h3 class="rtds-card__title">
<a class="group-hover/card:rtds-underline" href="">
Vaccinarsi contro Covid-19
<span class="rtds-sr-only">: leggi di più</span>
</a>
</h3>
<div class="rtds-card__metadata">
<div class="rtds-card__date">
<time datetime="2025-05-30">30 MAG 2025</time>
</div>
</div>
</div>
<div class="rtds-card__categories">
<span class="rtds-category ">
Salute
</span>
</div>
<div class="rtds-mt-auto rtds-pt-4">
<span class="rtds-action-link
rtds-card__action-link rtds-action-link--has-icon rtds-action-link--sm
">
Scopri l'approfondimento
<svg class="rtds-icon rtds-fill-current rtds-transition-all group-hover/card:rtds-translate-x-1" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-right" />
</svg>
</span>
</div>
</div>
</article>
</div>
<!-- Grid item wrapper -->
<div class="rtds-col">
<article class="rtds-card rtds-card--news rtds-card--news-image-fullwidth is-card-fullclickable rtds-group/card">
<picture class="rtds-card__image-wrapper
">
<img class="rtds-card__image rtds-h-full" alt="" src="/images/card-image.jpg" />
</picture>
<div class="rtds-card__content">
<div class="rtds-card__heading">
<h3 class="rtds-card__title">
<a class="group-hover/card:rtds-underline" href="">
Vaccinarsi contro Covid-19
<span class="rtds-sr-only">: leggi di più</span>
</a>
</h3>
<div class="rtds-card__metadata">
<div class="rtds-card__date">
<time datetime="2025-05-30">30 MAG 2025</time>
</div>
</div>
</div>
<div class="rtds-card__categories">
<span class="rtds-category ">
Salute
</span>
</div>
<div class="rtds-mt-auto rtds-pt-4">
<span class="rtds-action-link
rtds-card__action-link rtds-action-link--has-icon rtds-action-link--sm
">
Scopri l'approfondimento
<svg class="rtds-icon rtds-fill-current rtds-transition-all group-hover/card:rtds-translate-x-1" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-right" />
</svg>
</span>
</div>
</div>
</article>
</div>
<!-- Grid item wrapper -->
<div class="rtds-col">
<article class="rtds-card rtds-card--news rtds-card--news-image-fullwidth is-card-fullclickable rtds-group/card">
<picture class="rtds-card__image-wrapper
">
<img class="rtds-card__image rtds-h-full" alt="" src="/images/card-image.jpg" />
</picture>
<div class="rtds-card__content">
<div class="rtds-card__heading">
<h3 class="rtds-card__title">
<a class="group-hover/card:rtds-underline" href="">
Vaccinarsi contro Covid-19
<span class="rtds-sr-only">: leggi di più</span>
</a>
</h3>
<div class="rtds-card__metadata">
<div class="rtds-card__date">
<time datetime="2025-05-30">30 MAG 2025</time>
</div>
</div>
</div>
<div class="rtds-card__categories">
<span class="rtds-category ">
Salute
</span>
</div>
<div class="rtds-mt-auto rtds-pt-4">
<span class="rtds-action-link
rtds-card__action-link rtds-action-link--has-icon rtds-action-link--sm
">
Scopri l'approfondimento
<svg class="rtds-icon rtds-fill-current rtds-transition-all group-hover/card:rtds-translate-x-1" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-right" />
</svg>
</span>
</div>
</div>
</article>
</div>
<!-- Grid item wrapper -->
<div class="rtds-col">
<article class="rtds-card rtds-card--news rtds-card--news-image-fullwidth is-card-fullclickable rtds-group/card">
<picture class="rtds-card__image-wrapper
">
<img class="rtds-card__image rtds-h-full" alt="" src="/images/card-image.jpg" />
</picture>
<div class="rtds-card__content">
<div class="rtds-card__heading">
<h3 class="rtds-card__title">
<a class="group-hover/card:rtds-underline" href="">
Vaccinarsi contro Covid-19
<span class="rtds-sr-only">: leggi di più</span>
</a>
</h3>
<div class="rtds-card__metadata">
<div class="rtds-card__date">
<time datetime="2025-05-30">30 MAG 2025</time>
</div>
</div>
</div>
<div class="rtds-card__categories">
<span class="rtds-category ">
Salute
</span>
</div>
<div class="rtds-mt-auto rtds-pt-4">
<span class="rtds-action-link
rtds-card__action-link rtds-action-link--has-icon rtds-action-link--sm
">
Scopri l'approfondimento
<svg class="rtds-icon rtds-fill-current rtds-transition-all group-hover/card:rtds-translate-x-1" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-right" />
</svg>
</span>
</div>
</div>
</article>
</div>
</div>
</div>
</div>
</section>
<section class="rtds-section rtds-section--approfondimenti {{ padding }}">
<div class="rtds-container rtds-space-y-4">
{% render '@section-header', {
verticalDividerRight: 'true',
heading: 'Approfondimenti',
classes: 'rtds-section-header--approfondimenti'
}, true %}
<div class="rtds-space-y-5">
<div class="rtds-approfondimenti-list rtds-grid rtds-gap-4 md:rtds-grid-cols-2 lg:rtds-grid-cols-3">
{% for i in range(0,6) %}
<!-- Grid item wrapper -->
<div class="rtds-col">
{% render '@card--news-image-fullwidth',{categoryText:"Salute", heading:"Vaccinarsi contro Covid-19", excerpt:"is-empty", ctaLink:'true', ctaLinkLabel:'Scopri l\'approfondimento' },true %}
</div>
{% endfor %}
</div>
</div>
</div>
</section>
{
"padding": "rtds-py-6 md:rtds-py-8"
}
Esempi di classi disponibili di spaziatura per le sezioni con titolo e card.
Usa le classi rtds-py-6 md:rtds-py-8
Usa le classi rtds-py-8 md:rtds-py-12