Regione Toscana Design System Design System Servizi

Text with cards: Argomento 

<section class=" rtds-pb-8 md:rtds-pb-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 rtds-gap-4 md:rtds-gap-6 lg:rtds-gap-8 xl:rtds-gap-16">
            <div class="rtds-space-y-4 md:rtds-space-y-6 rtds-col-span-12 lg:rtds-col-span-5">
                <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 class="rtds-col-span-12 lg:rtds-col-span-7">
                <div class="rtds-space-y-4">
                    <div class="rtds-px-2 rtds-py-4 rtds-border-b rtds-border-gray-02">
                        <h2 class="rtds-heading-4 rtds-content-primary">I servizi per { questo argomento }</h2>
                    </div>
                    <div class="rtds-flex rtds-gap-4 md:rtds-gap-6 lg:rtds-gap-8 rtds-flex-wrap">

                        <ul role="list" class="rtds-flex rtds-flex-wrap rtds-gap-4 md:rtds-gap-6 lg:rtds-gap-8">
                            <li class="rtds-content-02 rtds-font-bold rtds-flex rtds-items-center rtds-gap-2 rtds-text-sm lg:rtds-text-base">
                                <svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6" aria-hidden="true" focusable="false" role="img">
                                    <use href="../../icons.svg#outline--cog-6-tooth" />
                                </svg>

                                3 servizi disponibili
                            </li>
                            <li class="rtds-content-02 rtds-font-bold rtds-flex rtds-items-center rtds-gap-2 rtds-text-sm lg:rtds-text-base">
                                <svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6" aria-hidden="true" focusable="false" role="img">
                                    <use href="../../icons.svg#outline--computer-desktop" />
                                </svg>

                                3 servizi disponibili
                            </li>
                            <li class="rtds-content-02 rtds-font-bold rtds-flex rtds-items-center rtds-gap-2 rtds-text-sm lg:rtds-text-base">
                                <svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6" aria-hidden="true" focusable="false" role="img">
                                    <use href="../../icons.svg#outline--hands-shaking" />
                                </svg>

                                3 servizi disponibili
                            </li>

                        </ul>

                        <div class="lg:rtds-ml-auto">
                            <div class="rtds-input-field rtds-select-field rtds-field-inline rtds-select-field--sm">
                                <label for="selectId" class="rtds-input-field__label">
                                    Rivolto a:

                                </label>

                                <div class="rtds-select rtds-select--light">

                                    <select id="selectId" class="">
                                        <option value="1">Text</option>
                                        <option value="2">Option 1</option>
                                        <option value="3">Option 2</option>
                                        <option value="4">Option 3</option>
                                        <option value="5">Option 4</option>
                                        <option value="6">Option 5</option>

                                    </select>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="rtds-servizi-list">
                        <div class="rtds-grid rtds-gap-4 md:rtds-gap-5 rtds-grid-cols-1 md:rtds-grid-cols-3 lg:rtds-grid-cols-3">

                            <!-- Grid item wrapper -->
                            <div class="rtds-col">
                                <article class="rtds-card rtds-card--information rtds-bg-gradient-04
 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>

                                        <div class="rtds-card__description ">
                                            <p>
                                                Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
                                            </p>
                                        </div>

                                        <ul class="rtds-card__tags" aria-label="Categorie">

                                            <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                    label</span></li>

                                            <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                    label</span></li>

                                            <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                    label</span></li>

                                            <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                    label</span></li>

                                        </ul>

                                    </div>

                                </article>

                            </div>

                            <!-- Grid item wrapper -->
                            <div class="rtds-col">
                                <article class="rtds-card rtds-card--information rtds-bg-gradient-04
 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>

                                        <div class="rtds-card__description ">
                                            <p>
                                                Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
                                            </p>
                                        </div>

                                        <ul class="rtds-card__tags" aria-label="Categorie">

                                            <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                    label</span></li>

                                            <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                    label</span></li>

                                            <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                    label</span></li>

                                            <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                    label</span></li>

                                        </ul>

                                    </div>

                                </article>

                            </div>

                            <!-- Grid item wrapper -->
                            <div class="rtds-col">
                                <article class="rtds-card rtds-card--information rtds-bg-gradient-04
 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>

                                        <div class="rtds-card__description ">
                                            <p>
                                                Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
                                            </p>
                                        </div>

                                        <ul class="rtds-card__tags" aria-label="Categorie">

                                            <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                    label</span></li>

                                            <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                    label</span></li>

                                            <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                    label</span></li>

                                            <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                    label</span></li>

                                        </ul>

                                    </div>

                                </article>

                            </div>

                        </div>

                        <div class="rtds-flex rtds-justify-center rtds-py-8">
                            <a href="#" class="rtds-btn 
    rtds-btn--icon-right rtds-group/button rtds-btn--secondary rtds-btn--s">

                                vedi tutti i servizi

                                <svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-transition-all rtds-duration-200 rtds-ease-out rtds-transform group-hover/button:rtds-translate-x-1" aria-hidden="true" focusable="false" role="img">
                                    <use href="../../icons.svg#mini--chevron-right" />
                                </svg>

                            </a>

                        </div>
                    </div>
                </div>

            </div>

        </div>

        <div>

            <h2 class="rtds-sr-only">Contenuti utili</h2>

            <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--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>

                            </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>

                </li>

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

                            </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>

                </li>

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

                            </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>

                </li>

            </ul>
        </div>
    </div>
</section>
 
{% extends '@text-with-cards' %}

{% block rightColumn %}
<div class="{{ rightColumnWidth }}">
    <div class="rtds-space-y-4">
        <div class="rtds-px-2 rtds-py-4 rtds-border-b rtds-border-gray-02">
            <h2 class="rtds-heading-4 rtds-content-primary">I servizi per { questo argomento }</h2>
        </div>
        <div class="rtds-flex rtds-gap-4 md:rtds-gap-6 lg:rtds-gap-8 rtds-flex-wrap">
           
            <ul role="list" class="rtds-flex rtds-flex-wrap rtds-gap-4 md:rtds-gap-6 lg:rtds-gap-8">
                <li class="rtds-content-02 rtds-font-bold rtds-flex rtds-items-center rtds-gap-2 rtds-text-sm lg:rtds-text-base">
                    {% render '@icon', { id: 'outline--cog-6-tooth', size: 'rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6' }, true %}
                    3 servizi disponibili
                </li>
                <li class="rtds-content-02 rtds-font-bold rtds-flex rtds-items-center rtds-gap-2 rtds-text-sm lg:rtds-text-base">
                    {% render '@icon', { id: 'outline--computer-desktop', size: 'rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6' }, true %}
                    3 servizi disponibili
                </li>
                <li class="rtds-content-02 rtds-font-bold rtds-flex rtds-items-center rtds-gap-2 rtds-text-sm lg:rtds-text-base">
                    {% render '@icon', { id: 'outline--hands-shaking', size: 'rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6' }, true %}
                    3 servizi disponibili
                </li>

            </ul>

            <div class="lg:rtds-ml-auto">
            {% render '@select-field--sm',{label: 'Rivolto a:', inline: 'true', variant: '--light' }, true  %}
            </div>
        </div>
        <div class="rtds-servizi-list">
            <div class="rtds-grid rtds-gap-4 md:rtds-gap-5 rtds-grid-cols-1 md:rtds-grid-cols-3 lg:rtds-grid-cols-3">
                {% for i in range(0,3) %}
                    <!-- Grid item wrapper -->
                    <div class="rtds-col">
                        {% render '@card--information-with-gradient' %}
                    </div>
                {% endfor %}
            </div>

            <div class="rtds-flex rtds-justify-center rtds-py-8">
                {% render '@button--icon-right-s',{ href: '#', classes: 'rtds-btn--secondary', label: 'vedi tutti i servizi', hasIcon: 'true' }, true %}
            </div>
        </div>
    </div>


</div>
{% endblock rightColumn %}
 
{
  "sectionPadding": "rtds-pb-8 md:rtds-pb-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.",
  "cardNumber": 3,
  "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",
  "card": {
    "handle": "card--news-small-no-thumb",
    "context": {
      "date": ""
    }
  }
}

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.