Regione Toscana Design System Design System Servizi

Text with cards 

<section class=" rtds-py-8 md:rtds-py-12">
    <div class="rtds-container rtds-space-y-4 md:rtds-space-y-6">
        <div class="rtds-grid rtds-grid-cols-1 lg:rtds-grid-cols-12">
            <div class="rtds-space-y-4 md:rtds-space-y-6 rtds-col-span-12 md:rtds-col-span-9 lg:rtds-col-span-6">
                <h2 class="rtds-heading-2">Lorem ipsum dolor sit amet</h2>
                <div class="rtds-body">
                    <p>Nella programmazione 2021-2027 la Toscana ha a disposizione con il programma del Fondo europeo di sviluppo regionale 1,2 miliardi e con il programma del Fondo sociale europeo plus 1,1 miliardi, un totale di 2,3 miliardi di euro. Per la pesca e l&#39;acquacoltura il programma Feampa 2021-2027 Toscana ha una dotazione complessiva (quota UE, quota dello Stato, quota della Regione), di 22.684.066 milioni. Per l&#39;agricoltura e lo sviluppo rurale, il Complemento per lo sviluppo rurale 2023-2027 mette a disposizione della Toscana 748.813.503 milioni di euro.</p>
                </div>
            </div>

        </div>

        <div>

            <ul role="list" class="rtds-grid rtds-grid-cols-1 md:rtds-grid-cols-2 lg:rtds-grid-cols-3 rtds-gap-4">

                <li class="rtds-col">
                    <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="">

                                        Programma Italia-Francia Marittimo

                                    </a>
                                </h3>

                            </div>

                        </div>

                    </article>

                </li>

                <li class="rtds-col">
                    <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="">

                                        Programma Italia-Francia Marittimo

                                    </a>
                                </h3>

                            </div>

                        </div>

                    </article>

                </li>

                <li class="rtds-col">
                    <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="">

                                        Programma Italia-Francia Marittimo

                                    </a>
                                </h3>

                            </div>

                        </div>

                    </article>

                </li>

                <li class="rtds-col">
                    <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="">

                                        Programma Italia-Francia Marittimo

                                    </a>
                                </h3>

                            </div>

                        </div>

                    </article>

                </li>

                <li class="rtds-col">
                    <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="">

                                        Programma Italia-Francia Marittimo

                                    </a>
                                </h3>

                            </div>

                        </div>

                    </article>

                </li>

                <li class="rtds-col">
                    <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="">

                                        Programma Italia-Francia Marittimo

                                    </a>
                                </h3>

                            </div>

                        </div>

                    </article>

                </li>

                <li class="rtds-col">
                    <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="">

                                        Programma Italia-Francia Marittimo

                                    </a>
                                </h3>

                            </div>

                        </div>

                    </article>

                </li>

                <li class="rtds-col">
                    <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="">

                                        Programma Italia-Francia Marittimo

                                    </a>
                                </h3>

                            </div>

                        </div>

                    </article>

                </li>

                <li class="rtds-col">
                    <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="">

                                        Programma Italia-Francia Marittimo

                                    </a>
                                </h3>

                            </div>

                        </div>

                    </article>

                </li>

                <li class="rtds-col">
                    <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="">

                                        Programma Italia-Francia Marittimo

                                    </a>
                                </h3>

                            </div>

                        </div>

                    </article>

                </li>

                <li class="rtds-col">
                    <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="">

                                        Programma Italia-Francia Marittimo

                                    </a>
                                </h3>

                            </div>

                        </div>

                    </article>

                </li>

                <li class="rtds-col">
                    <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="">

                                        Programma Italia-Francia Marittimo

                                    </a>
                                </h3>

                            </div>

                        </div>

                    </article>

                </li>

                <li class="rtds-col">
                    <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="">

                                        Programma Italia-Francia Marittimo

                                    </a>
                                </h3>

                            </div>

                        </div>

                    </article>

                </li>

            </ul>
        </div>
    </div>
</section>
 
<section class="{% if sectionPadding %} {{ sectionPadding }}{% endif %}">
    <div class="rtds-container rtds-space-y-4 md:rtds-space-y-6">
        <div class="rtds-grid rtds-grid-cols-1 lg:rtds-grid-cols-12{% if leftColumnGap %} {{ leftColumnGap }}{% endif %}">
            <div class="rtds-space-y-4 md:rtds-space-y-6{% if leftColumnWidth %} {{ leftColumnWidth }}{% endif %}">
                <h2 class="rtds-heading-2">{{ heading }}</h2>
                <div class="rtds-body">
                    <p>{{ text }}</p>
                </div>
            </div>

            {% block rightColumn %}
            {% endblock rightColumn %}
        </div>

        <div>
            {% if listHeading %}
                <h2 class="rtds-sr-only">{{ listHeading }}</h2>
            {% endif %}
            <ul role="list" class="rtds-grid rtds-grid-cols-1 md:rtds-grid-cols-2 lg:rtds-grid-cols-3 rtds-gap-4">
                {% for i in range(0,cardNumber) %}
                    <li class="rtds-col">
                        {% render '@' + card.handle, card.context|default({}), true %}
                    </li>
                {% endfor %}
            </ul>
        </div>
    </div>
</section>
 
{
  "sectionPadding": "rtds-py-8 md:rtds-py-12",
  "heading": "Lorem ipsum dolor sit amet",
  "text": "Nella programmazione 2021-2027 la Toscana ha a disposizione con il programma del Fondo europeo di sviluppo regionale 1,2 miliardi e con il programma del Fondo sociale europeo plus 1,1 miliardi, un totale di 2,3 miliardi di euro. Per la pesca e l'acquacoltura il programma Feampa 2021-2027 Toscana ha una dotazione complessiva (quota UE, quota dello Stato, quota della Regione), di 22.684.066 milioni. Per l'agricoltura e lo sviluppo rurale, il Complemento per lo sviluppo rurale 2023-2027 mette a disposizione della Toscana 748.813.503 milioni di euro."
}

Text with Cards

Sezione di pagina con heading, testo descrittivo e griglia di card. Usata per presentare una raccolta di contenuti (notizie, programmi, finanziamenti) preceduta da un blocco testuale introduttivo. La variante argomento aggiunge una colonna destra con filtri e lista servizi correlati.

Comportamento

Il componente è renderizzato come <section> e contiene:

  1. Un blocco testuale a sinistra con <h2> e paragrafo descrittivo.
  2. Un blocco rightColumn opzionale a destra (vuoto nel template base; popolato nella variante argomento).
  3. Una griglia di card generata iterando cardNumber volte sul componente specificato in card.handle.

Il numero di colonne della griglia card è fisso: 1 colonna su mobile, 2 su tablet, 3 su desktop.

Varianti

Varianti di layout

  • default: Layout a colonna singola per il blocco testo + testo (occupa 6 colonne su 12 su desktop), senza colonna destra. Griglia card a 3 colonne.
  • argomento: Layout a due colonne — testo a sinistra (5 colonne) e colonna destra (7 colonne) con heading di sezione, statistiche servizi, filtro “Rivolto a:” e lista di card card--information-with-gradient. La colonna destra viene iniettata tramite il blocco rightColumn nel template text-with-cards--argomento.njk.

Parametri di configurazione

Contesto di sviluppo Fractal/Nunjucks — Questa sezione riguarda esclusivamente i parametri del context .config.yml usati durante lo sviluppo nella libreria. Non descrive attributi HTML o proprietà da usare nei temi, CMS o ambienti di implementazione.

Parametri struttura

  • sectionPadding (stringa, opzionale): Classi CSS per il padding verticale della <section> (es. rtds-py-8 md:rtds-py-12).
  • leftColumnGap (stringa, opzionale): Classi CSS per il gap tra le colonne della griglia principale (es. rtds-gap-4 md:rtds-gap-6 lg:rtds-gap-8 xl:rtds-gap-16).
  • leftColumnWidth (stringa, opzionale): Classi CSS per la larghezza della colonna sinistra (es. rtds-col-span-12 md:rtds-col-span-9 lg:rtds-col-span-6).
  • rightColumnWidth (stringa, opzionale): Classi CSS per la larghezza della colonna destra — usato nella variante argomento (es. rtds-col-span-12 lg:rtds-col-span-7).

Parametri contenuto testuale

  • heading (stringa, obbligatorio): Testo dell’<h2> della sezione.
  • text (stringa, obbligatorio): Testo del paragrafo descrittivo.
  • listHeading (stringa, opzionale): Se presente, viene reso come <h2 class="rtds-sr-only"> sopra la griglia card — etichetta la lista per gli screen reader senza impatto visivo.

Parametri griglia card

  • cardNumber (numero, obbligatorio): Numero di card da renderizzare nella griglia (iterate con range(0, cardNumber)).
  • card (oggetto, obbligatorio): Configurazione della card da renderizzare. Chiavi:
    • handle (stringa, obbligatorio): Handle Fractal del componente card (es. card--news-small, card--news-small-no-thumb).
    • context (oggetto, opzionale): Context da passare al componente card renderizzato.

Accessibilità

WCAG 2.1

Livello AA — criteri pertinenti:

  • 1.3.1 Informazioni e correlazioni — struttura semantica con <section>, <h2> come heading della sezione, <ul role="list"> per la griglia card
  • 2.4.6 Intestazioni ed etichette — l’<h2> descrive l’area tematica; listHeading (se presente) etichetta la griglia di card

Struttura e semantica

  • <section> — identifica la sezione come regione della pagina; è consigliabile che l’<h2> presente nel markup la renda un landmark region riconoscibile dagli screen reader
  • <h2 class="rtds-heading-2"> — heading principale della sezione; si colloca nella gerarchia sotto l’<h1> della pagina
  • <ul role="list"> — griglia delle card; role="list" ripristina la semantica di lista rimossa da reset CSS di Tailwind
  • <li class="rtds-col"> — ogni card è avvolta in un <li> per garantire la corretta struttura della lista
  • <h2 class="rtds-sr-only"> — heading visivamente nascosto per la griglia card, reso solo quando listHeading è definito; consente la navigazione per heading agli screen reader

Attributi ARIA

Attributo Valori Condizione
role="list" list Sulla <ul> della griglia card — ripristina semantica lista

Screen reader

  • La <section> con <h2> visibile è riconoscibile come landmark region dagli screen reader compatibili (es. NVDA, JAWS con ARIA regions abilitati)
  • Il parametro listHeading genera un <h2 class="rtds-sr-only"> che etichetta la griglia card senza essere visibile — gli screen reader possono navigare direttamente alla lista tramite heading
  • Le card delegate a card.handle gestiscono autonomamente la propria accessibilità interna

Stili CSS

Il componente non ha un file CSS dedicato; usa esclusivamente classi utility Tailwind con prefisso rtds- e il container di layout.

Classi strutturali utilizzate

  • .rtds-container: Contenitore centrato con max-width e padding orizzontale
  • .rtds-space-y-4 / .rtds-space-y-6: Spaziatura verticale tra blocchi interni (mobile/desktop)
  • .rtds-grid rtds-grid-cols-1 md:rtds-grid-cols-2 lg:rtds-grid-cols-3: Griglia responsive delle card
  • .rtds-gap-4: Gap tra le card
  • .rtds-heading-2: Tipografia heading sezione
  • .rtds-body: Tipografia corpo testo
  • .rtds-sr-only: Nasconde il listHeading visivamente

Esempi di utilizzo

<!-- Variante default: testo + griglia di card notizie -->
<section class="rtds-py-8 md:rtds-py-12">
  <div class="rtds-container rtds-space-y-4 md:rtds-space-y-6">
    <div class="rtds-grid rtds-grid-cols-1 lg:rtds-grid-cols-12">
      <div class="rtds-space-y-4 md:rtds-space-y-6 rtds-col-span-12 md:rtds-col-span-9 lg:rtds-col-span-6">
        <h2 class="rtds-heading-2">Finanziamenti europei</h2>
        <div class="rtds-body">
          <p>Nella programmazione 2021-2027 la Toscana ha a disposizione 2,3 miliardi di euro.</p>
        </div>
      </div>
    </div>
    <div>
      <ul role="list" class="rtds-grid rtds-grid-cols-1 md:rtds-grid-cols-2 lg:rtds-grid-cols-3 rtds-gap-4">
        <li class="rtds-col"><!-- card --></li>
        <li class="rtds-col"><!-- card --></li>
        <li class="rtds-col"><!-- card --></li>
      </ul>
    </div>
  </div>
</section>

<!-- Variante argomento: usa text-with-cards--argomento.njk che aggiunge la colonna destra -->
<!-- Nel config.yml passare:
     sectionPadding: "rtds-pb-8 md:rtds-pb-12"
     leftColumnGap: "rtds-gap-4 md:rtds-gap-6 lg:rtds-gap-8 xl:rtds-gap-16"
     leftColumnWidth: "rtds-col-span-12 lg:rtds-col-span-5"
     rightColumnWidth: "rtds-col-span-12 lg:rtds-col-span-7"
     listHeading: "Contenuti utili"
     cardNumber: 3
     card:
       handle: card--news-small-no-thumb
-->

Note

  • La griglia card usa range(0, cardNumber) per iterare: tutte le card avranno il medesimo context definito in card.context. Se si necessita di card con contenuti diversi, il componente va esteso o sostituito con un loop su un array di dati.
  • La variante argomento è implementata in text-with-cards--argomento.njk tramite estensione Nunjucks ({% extends '@text-with-cards' %}) e sovrascrittura del blocco rightColumn. La colonna destra è attualmente parzialmente hardcodata (statistiche e filtro).
  • Il componente non ha CSS dedicato: tutti gli stili si affidano alle utility Tailwind RTDS.
  • Dipende da: qualsiasi componente @card--* specificato in card.handle.