Regione Toscana Design System

Note: Comunicazione 

<section class="rtds-note rtds-bg-gradient-03 rtds-note--avviso">
    <div class="rtds-note__header">
        <h2 class="rtds-note__title rtds-text-sm md:rtds-text-base rtds-uppercase rtds-font-semibold">
            Titolo
        </h2>

        <div class="rtds-ml-auto rtds-text-sm md:rtds-text-base">
            <time datetime="2025-01-16">16.01.2025</time>
        </div>

    </div>
    <div class="rtds-note__content rtds-divide-y rtds-divide-gray-01">

        <div class="rtds-note__content-item">

            <h3 class="rtds-note__content-item-title">
                Titolo
            </h3>

            <p class="rtds-note__content-item-description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. Lorem ipsum dolor <a href='#'>sit amet consectetur adipisicing elit.</a></p>

            <a href="#" class="rtds-text-link rtds-leading-snug 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#outline--document" />
                </svg>

                Link text (PDF - 40Kb)

            </a>

        </div>

    </div>
</section>
 
{% extends '@note' %}
{% block classes %}{{ super() }} rtds-note--avviso{% endblock classes %}

{% block titleAdditionalContent %}
<div class="rtds-ml-auto rtds-text-sm md:rtds-text-base">
    <time datetime="2025-01-16">16.01.2025</time>
</div>
{% endblock %}
 
{
  "label": "Titolo",
  "gradient": "rtds-bg-gradient-03",
  "id": null,
  "contents": [
    {
      "title": "Titolo",
      "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. Lorem ipsum dolor <a href='#'>sit amet consectetur adipisicing elit.</a>",
      "link": {
        "variant": "--s",
        "url": "#",
        "title": "Link",
        "icon": "outline--document"
      }
    }
  ]
}
  • Content: 
    @layer components {
    .rtds-note {
        @apply rtds-p-4 md:rtds-p-6 rtds-rounded-lg rtds-content-01;
    }

    .rtds-note__header {
        @apply rtds-border-b rtds-border-gray-01 rtds-pb-3 rtds-flex rtds-items-baseline;
    }

    .rtds-note__content {
        @apply rtds-py-3;
    }

    .rtds-note__content-item {
        @apply rtds-grid rtds-gap-2.5 rtds-py-3 first:rtds-pt-0 last:rtds-pb-0;
    }

    .rtds-note__content-item-title {
        @apply rtds-text-sm rtds-font-bold;
    }

    .rtds-note__content-item-description {
        @apply rtds-text-sm;
    }

    .rtds-note__content-item-description a {
        @apply rtds-underline rtds-content-02;
    }
}
  • URL: /components/raw/note/note.css
  • Filesystem Path: components/03-molecules/note/note.css
  • Size: 679 Bytes

Componente Note

Componente utility per informazioni aggiuntive all’interno di pagine di dettaglio contenuto.

Varianti

  • note--esiti: versione per la visualizzazione di esiti e graduatorie
  • note--faq: versione per la visualizzazione di FAQ
  • note--avviso: versione per la visualizzazione di avvisi
  • note--comunicazione: versione per la visualizzazione di comunicazioni

Markup

Il componente utilizza una struttura semantica con:

  • <section> come contenitore principale
  • <div class="rtds-note__header"> per l’intestazione
  • <h2> per il titolo della nota
  • <div class="rtds-note__content"> per il contenuto principale
  • <div class="rtds-note__content-item"> per ogni elemento del contenuto

La struttura base del markup è:

<section class="rtds-note [classi aggiuntive]">
  <div class="rtds-note__header">
    <h2 class="rtds-note__title">Titolo</h2>
  </div>
  <div class="rtds-note__content">
    <div class="rtds-note__content-item">
      <!-- Contenuto -->
    </div>
  </div>
</section>

Comportamento

  • Supporta diversi tipi di contenuto (testo, link, CTA)
  • Permette l’aggiunta di gradienti di sfondo
  • Supporta la strutturazione del contenuto con titoli e descrizioni
  • Integra componenti di link e bottoni
  • Gestisce la formattazione del testo con supporto HTML

Configurazioni per lo sviluppo (Nunjucks)

I seguenti parametri possono essere utilizzati per configurare il componente:

  • id: stringa - ID opzionale per la sezione
  • classes: stringa - classi CSS aggiuntive per il componente
  • gradient: stringa - classe per il gradiente di sfondo
  • label: stringa - titolo della nota
  • contents: array di oggetti - elementi del contenuto
    • title: stringa - titolo dell’elemento
    • description: stringa - descrizione dell’elemento
    • link: oggetto - configurazione del link
      • variant: stringa - variante del link
      • url: stringa - URL del link
      • title: stringa - titolo del link
      • icon: stringa - icona del link
    • cta: oggetto - configurazione del bottone
      • variant: stringa - variante del bottone
      • classes: stringa - classi aggiuntive del bottone
      • url: stringa - URL del bottone
      • label: stringa - etichetta del bottone
      • icon: stringa - icona del bottone

Configurazione YAML

Il file di configurazione supporta le seguenti impostazioni:

  • title: stringa - titolo del componente
  • context: oggetto - configurazione di default
    • label: stringa - titolo predefinito
    • gradient: stringa - gradiente predefinito
    • id: stringa - ID predefinito
    • contents: array - elementi del contenuto predefiniti
  • variants: array - varianti del componente
    • name: stringa - nome della variante
    • context: oggetto - configurazione specifica della variante
      • label: stringa - titolo specifico
      • gradient: stringa - gradiente specifico
      • contents: array - elementi del contenuto specifici

Blocchi

  • classes: blocco per l’inserimento di classi CSS aggiuntive
  • titleAdditionalContent: blocco per contenuto aggiuntivo nell’intestazione
  • content: blocco per il contenuto principale