<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 a: Nome Tema
</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 pagina
</h1>
</div>
</div>
<div class="rtds-grid rtds-gap-2 md:rtds-justify-end md:rtds-items-end md:rtds-col-span-3">
<button type="button" class="rtds-btn
rtds-btn--inverted rtds-btn--s">
Visualizza l'archivio
</button>
</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-flex-wrap 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="Prima pagina">
<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="page">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="Ultima pagina">
<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": "--with-cta",
"context": {
"cta": [
{
"variant": "--inverted",
"label": "Visualizza l'archivio",
"classes": "rtds-btn--s"
}
]
}
}
}
/* Aggregator Component */
/* .rtds-aggregator {
@apply rtds-container;
} */
/* Aggregator Component */
@layer components {
/* .rtds-aggregator {
@apply rtds-container;
} */
}
Componente contenitore per pagine di aggregazione di contenuti. Combina un header di pagina con una griglia di card e la paginazione.
Il componente viene renderizzato come <div class="rtds-aggregator"> e include:
@page-header-base (configurabile tramite heading)@pagination--centered fisso in fondo alla sezioneLa griglia è generata tramite un ciclo annidato: items definisce quante volte viene ripetuto il blocco di card; contents definisce quali handle di componenti renderizzare per ogni iterazione.
default: Aggregatore base con header contenente titolo e link di ritornowith-cta: Header con CTA configurata tramite la variante @page-header-base--with-ctawith-filters: Aggiunge un campo di ordinamento (@select-field--sm) sopra la grigliaContesto di sviluppo Fractal/Nunjucks — Questa sezione riguarda esclusivamente i parametri del context
.config.ymlusati durante lo sviluppo nella libreria.
sectionTitle (stringa, opzionale): Testo del titolo di sezione nascosto — renderizzato come <h2 class="rtds-sr-only"> per gli screen reader; non visibile nella paginagridGap (stringa, opzionale): Classe Tailwind per lo spazio tra gli elementi della griglia (es. rtds-gap-4)gridColumns (stringa, opzionale): Classi Tailwind per il numero di colonne (es. rtds-grid-cols-1 md:rtds-grid-cols-2 lg:rtds-grid-cols-3)items (numero, opzionale): Numero di iterazioni del ciclo di rendering delle card (default: 6)filters (booleano, opzionale): Se true, mostra il selettore di ordinamento (@select-field--sm) sopra la grigliaheading (oggetto, obbligatorio): Configura il componente @page-header-base in testa all’aggregatore:heading.variant (stringa): Variante del componente header da usare (es. '' per la base, '--with-cta' per la variante con CTA)heading.context (oggetto): Contesto passato al componente @page-header-base; vedere la documentazione di @page-header-base per i dettaglicontents (array, obbligatorio): Elenco dei componenti card da renderizzare in ogni iterazione della griglia; ogni elemento accetta:handle (stringa): Handle del componente Fractal da renderizzare (es. "card--news-small", "card--news-small-no-thumb")context (oggetto, opzionale): Contesto dati da passare al componenteLivello AA — criteri pertinenti:
<h2> (anche se sr-only) per identificare il blocco agli screen readersectionTitle funge da intestazione nascosta per la sezione dei risultati<div class="rtds-aggregator"> — contenitore presentazionale senza ruolo semantico proprio<section class="rtds-aggregator__content"> — regione semantica; poiché non ha aria-label o aria-labelledby espliciti, non è un landmark navigabile; il titolo nascosto <h2 class="rtds-sr-only"> fornisce contesto agli screen reader ma non trasforma <section> in un landmark<h2 class="rtds-sr-only"> — annuncia il tipo di contenuto agli screen reader prima della griglia di card; il valore corrisponde a sectionTitlertds-sr-only) fornisce contesto agli screen reader prima della griglia di card@pagination--centered; verificare che il componente di paginazione abbia aria-label descrittivo<!-- Aggregatore base -->
<!-- Context Fractal:
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"
heading:
variant: ''
context:
title: "Titolo aggregatore"
backLink:
label: "Torna alla sezione principale"
-->
<!-- Aggregatore con CTA nell'header -->
<!-- Context Fractal:
heading:
variant: '--with-cta'
context:
cta:
- variant: "--inverted"
label: "Visualizza l'archivio"
classes: "rtds-btn--s"
-->
<!-- Aggregatore con filtri di ordinamento -->
<!-- Context Fractal:
filters: true
heading:
variant: ''
context:
title: "Notizie"
-->@page-header-base (e relative varianti) e @pagination--centeredaggregator--aggiornamenti.njk usa @page-header-base--aggiornamento come header — il template è identico a quello base ma con header fissoitems controlla quante volte viene ripetuto il set di contents: con items: 6 e contents con 2 elementi, la griglia mostrerà 12 card totali<section class="rtds-aggregator__content">: se si vuole renderla un landmark navigabile dagli screen reader, aggiungere aria-labelledby con l’ID dell’<h2> interno