<div class="rtds-aggregator">
<div class="rtds-page-header rtds-container rtds-space-y-2 rtds-page-header--base">
<div class="rtds-flex">
<a href="#" class="rtds-text-link rtds-content-03 rtds-text-link--s">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-flex-shrink-0 rtds-flex-grow-0" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#solid--arrow-left" />
</svg>
Torna alla sezione principale
</a>
</div>
<div class="rtds-page-header__content rtds-grid rtds-gap-5 md:rtds-gap-12 rtds-grid-cols-1 md:rtds-grid-cols-12">
<div class="rtds-grid rtds-gap-5 md:rtds-col-span-9">
<div class="rtds-page-header__title rtds-space-y-4">
<h1 class="rtds-heading-1">
Titolo aggregatore
</h1>
</div>
</div>
</div>
</div>
<div class="rtds-container">
<section class="rtds-aggregator__content rtds-pb-8 md:rtds-pb-12">
<!-- section title: visible second level heading describing the section -->
<h2 class="rtds-sr-only">
Lista di elementi
</h2>
<div class="rtds-space-y-9">
<div class="rtds-space-y-6">
<div class="rtds-aggregator__grid rtds-grid rtds-gap-4 rtds-grid-cols-1 md:rtds-grid-cols-2 lg:rtds-grid-cols-3 ">
<article class="rtds-card rtds-card--news rtds-card--news-small rtds-card--horizontal rtds-card--horizontal-left is-card-fullclickable rtds-group/card">
<picture class="rtds-card__image-wrapper
">
<img class="rtds-card__image" 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="">
Nunc aliquam phasellus molestie blandit. Nisi, amet, id maecenas diam
</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__description ">
<p>
Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
</p>
</div>
<div class="rtds-card__categories">
<a href="#" class="rtds-category rtds-category--sm">
Categoria
</a>
</div>
</div>
</article>
<article class="rtds-card rtds-card--news rtds-card--news-small rtds-card--news-no-thumb is-card-fullclickable rtds-group/card">
<div class="rtds-card__content">
<div class="rtds-card__heading">
<h3 class="rtds-card__title">
<a class="group-hover/card:rtds-underline" href="">
Nunc aliquam phasellus molestie blandit. Nisi, amet, id maecenas diam
</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__description ">
<p>
Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
</p>
</div>
<div class="rtds-card__categories">
<a href="#" class="rtds-category rtds-category--sm">
Categoria
</a>
</div>
</div>
</article>
<article class="rtds-card rtds-card--news rtds-card--news-small rtds-card--horizontal rtds-card--horizontal-left is-card-fullclickable rtds-group/card">
<picture class="rtds-card__image-wrapper
">
<img class="rtds-card__image" 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="">
Nunc aliquam phasellus molestie blandit. Nisi, amet, id maecenas diam
</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__description ">
<p>
Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
</p>
</div>
<div class="rtds-card__categories">
<a href="#" class="rtds-category rtds-category--sm">
Categoria
</a>
</div>
</div>
</article>
<article class="rtds-card rtds-card--news rtds-card--news-small rtds-card--news-no-thumb is-card-fullclickable rtds-group/card">
<div class="rtds-card__content">
<div class="rtds-card__heading">
<h3 class="rtds-card__title">
<a class="group-hover/card:rtds-underline" href="">
Nunc aliquam phasellus molestie blandit. Nisi, amet, id maecenas diam
</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__description ">
<p>
Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
</p>
</div>
<div class="rtds-card__categories">
<a href="#" class="rtds-category rtds-category--sm">
Categoria
</a>
</div>
</div>
</article>
<article class="rtds-card rtds-card--news rtds-card--news-small rtds-card--horizontal rtds-card--horizontal-left is-card-fullclickable rtds-group/card">
<picture class="rtds-card__image-wrapper
">
<img class="rtds-card__image" 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="">
Nunc aliquam phasellus molestie blandit. Nisi, amet, id maecenas diam
</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__description ">
<p>
Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
</p>
</div>
<div class="rtds-card__categories">
<a href="#" class="rtds-category rtds-category--sm">
Categoria
</a>
</div>
</div>
</article>
<article class="rtds-card rtds-card--news rtds-card--news-small rtds-card--news-no-thumb is-card-fullclickable rtds-group/card">
<div class="rtds-card__content">
<div class="rtds-card__heading">
<h3 class="rtds-card__title">
<a class="group-hover/card:rtds-underline" href="">
Nunc aliquam phasellus molestie blandit. Nisi, amet, id maecenas diam
</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__description ">
<p>
Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
</p>
</div>
<div class="rtds-card__categories">
<a href="#" class="rtds-category rtds-category--sm">
Categoria
</a>
</div>
</div>
</article>
<article class="rtds-card rtds-card--news rtds-card--news-small rtds-card--horizontal rtds-card--horizontal-left is-card-fullclickable rtds-group/card">
<picture class="rtds-card__image-wrapper
">
<img class="rtds-card__image" 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="">
Nunc aliquam phasellus molestie blandit. Nisi, amet, id maecenas diam
</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__description ">
<p>
Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
</p>
</div>
<div class="rtds-card__categories">
<a href="#" class="rtds-category rtds-category--sm">
Categoria
</a>
</div>
</div>
</article>
<article class="rtds-card rtds-card--news rtds-card--news-small rtds-card--news-no-thumb is-card-fullclickable rtds-group/card">
<div class="rtds-card__content">
<div class="rtds-card__heading">
<h3 class="rtds-card__title">
<a class="group-hover/card:rtds-underline" href="">
Nunc aliquam phasellus molestie blandit. Nisi, amet, id maecenas diam
</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__description ">
<p>
Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
</p>
</div>
<div class="rtds-card__categories">
<a href="#" class="rtds-category rtds-category--sm">
Categoria
</a>
</div>
</div>
</article>
<article class="rtds-card rtds-card--news rtds-card--news-small rtds-card--horizontal rtds-card--horizontal-left is-card-fullclickable rtds-group/card">
<picture class="rtds-card__image-wrapper
">
<img class="rtds-card__image" 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="">
Nunc aliquam phasellus molestie blandit. Nisi, amet, id maecenas diam
</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__description ">
<p>
Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
</p>
</div>
<div class="rtds-card__categories">
<a href="#" class="rtds-category rtds-category--sm">
Categoria
</a>
</div>
</div>
</article>
<article class="rtds-card rtds-card--news rtds-card--news-small rtds-card--news-no-thumb is-card-fullclickable rtds-group/card">
<div class="rtds-card__content">
<div class="rtds-card__heading">
<h3 class="rtds-card__title">
<a class="group-hover/card:rtds-underline" href="">
Nunc aliquam phasellus molestie blandit. Nisi, amet, id maecenas diam
</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__description ">
<p>
Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
</p>
</div>
<div class="rtds-card__categories">
<a href="#" class="rtds-category rtds-category--sm">
Categoria
</a>
</div>
</div>
</article>
<article class="rtds-card rtds-card--news rtds-card--news-small rtds-card--horizontal rtds-card--horizontal-left is-card-fullclickable rtds-group/card">
<picture class="rtds-card__image-wrapper
">
<img class="rtds-card__image" 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="">
Nunc aliquam phasellus molestie blandit. Nisi, amet, id maecenas diam
</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__description ">
<p>
Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
</p>
</div>
<div class="rtds-card__categories">
<a href="#" class="rtds-category rtds-category--sm">
Categoria
</a>
</div>
</div>
</article>
<article class="rtds-card rtds-card--news rtds-card--news-small rtds-card--news-no-thumb is-card-fullclickable rtds-group/card">
<div class="rtds-card__content">
<div class="rtds-card__heading">
<h3 class="rtds-card__title">
<a class="group-hover/card:rtds-underline" href="">
Nunc aliquam phasellus molestie blandit. Nisi, amet, id maecenas diam
</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__description ">
<p>
Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
</p>
</div>
<div class="rtds-card__categories">
<a href="#" class="rtds-category rtds-category--sm">
Categoria
</a>
</div>
</div>
</article>
</div>
</div>
<div>
<nav class="rtds-pagination rtds-justify-center" role="navigation" aria-label="Paginazione">
<ul class="rtds-pagination__list rtds-justify-center">
<li>
<a class="rtds-pagination__link rtds-pagination__link-button " href="#" aria-label="Pagina iniziale">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-5 md:rtds-w-5 md:rtds-h-5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-double-left" />
</svg>
</a>
</li>
<li>
<a class="rtds-pagination__link rtds-pagination__link-button" href="#" aria-label="Pagina precedente">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-5 md:rtds-w-5 md:rtds-h-5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-left" />
</svg>
</a>
</li>
<li>
<a class="rtds-pagination__link rtds-pagination__link-button rtds-pagination__link-text " href="#" aria-label="pagina 1">1</a>
</li>
<li>
<a class="rtds-pagination__link rtds-pagination__link-button rtds-pagination__link-text rtds-background-primary rtds-border-primary rtds-text-white hover:rtds-content-01" href="#" aria-label="Pagina corrente, pagina 2" aria-current="true">2</a>
</li>
<li>
<a class="rtds-pagination__link rtds-pagination__link-button rtds-pagination__link-text " href="#" aria-label="pagina 3">3</a>
</li>
<li>
<a class="rtds-pagination__link rtds-pagination__link-button rtds-pagination__link-text " href="#" aria-label="pagina 4">4</a>
</li>
<li>
<a class="rtds-pagination__link rtds-pagination__link-button" href="#" aria-label="Pagina successiva">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-5 md:rtds-w-5 md:rtds-h-5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-right" />
</svg>
</a>
</li>
<li>
<a class="rtds-pagination__link rtds-pagination__link-button " href="#" aria-label="Pagina finale">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-5 md:rtds-w-5 md:rtds-h-5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-double-right" />
</svg>
</a>
</li>
</ul>
</nav>
</div>
</div>
</section>
</div>
</div>
<div class="rtds-aggregator">
{% render '@page-header-base' + heading.variant, heading.context|default({}), true %}
<div class="rtds-container">
<section class="rtds-aggregator__content rtds-pb-8 md:rtds-pb-12">
<!-- section title: visible second level heading describing the section -->
<h2 class="rtds-sr-only">
{{ sectionTitle|safe }}
</h2>
<div class="rtds-space-y-9">
<div class="rtds-space-y-6">
{% if filters %}
<div class="rtds-flex rtds-items-center rtds-gap-2 md:rtds-justify-end">
<div class="rtds-flex-1 md:rtds-flex-none">
{% render '@select-field--sm',{label: 'Ordina per', inline: 'true', variant: '--light' }, true %}
</div>
</div>
{% endif %}
<div class="rtds-aggregator__grid rtds-grid{% if gridGap %} {{ gridGap }} {% endif %}{% if gridColumns %} {{ gridColumns }} {% endif %}">
{% for i in range(0, items) %}
{% for content in contents %}
{% if content %}
{% render '@' + content.handle, content.context|default({}), true %}
{% endif %}
{% endfor %}
{% endfor %}
</div>
</div>
<div>
{% render '@pagination--centered' %}
</div>
</div>
</section>
</div>
</div>
{
"sectionTitle": "Lista di elementi",
"gridGap": "rtds-gap-4",
"gridColumns": "rtds-grid-cols-1 md:rtds-grid-cols-2 lg:rtds-grid-cols-3",
"items": 6,
"contents": [
{
"handle": "card--news-small"
},
{
"handle": "card--news-small-no-thumb"
}
],
"heading": {
"variant": ""
}
}
/* Aggregator Component */
@layer components {
/* .rtds-aggregator {
@apply rtds-container;
} */
}
Il componente aggregatore è un contenitore per una griglia di card, utilizzato come base per i template delle pagine di aggregazione.