Regione Toscana Design System

Note: Avviso 

<section class="rtds-note rtds-bg-gradient-03">
    <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>
    <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">
                Aggiornamento 26 gennaio 2025
            </h3>

            <p class="rtds-note__content-item-description">Approvata la graduatoria definitiva</p>

            <div class="rtds-flex rtds-justify-end">
                <button type="button" class="rtds-btn 
    rtds-btn--icon-right rtds-group/button rtds-btn--only-text rtds-btn--s">

                    Leggi l'avviso completo

                    <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 group-hover/button:rtds-translate-x-1" aria-hidden="true" focusable="false" role="img">
                        <use href="../../icons.svg#mini--chevron-right" />
                    </svg>

                </button>

            </div>

        </div>

    </div>
</section>
 
<section{% if id %} id="{{ id }}"{% endif %} class="rtds-note{% if gradient %} {{ gradient }}{% endif %}{% block classes %}{% if classes %} {{classes}}{% endif %}{% endblock %}">
    <div class="rtds-note__header">
        <h2 class="rtds-note__title rtds-text-sm md:rtds-text-base rtds-uppercase rtds-font-semibold">
            {{ label | safe }}
        </h2>
        {% block titleAdditionalContent %}
        {% endblock %}
    </div>
    <div class="rtds-note__content rtds-divide-y rtds-divide-gray-01">
        {% block content %}
            {% for item in contents %}
            <div class="rtds-note__content-item">
                {% if item.title %}
                <h3 class="rtds-note__content-item-title">
                    {{ item.title | safe }}
                </h3>
                {% endif %}
                {% if item.description %}
                <p class="rtds-note__content-item-description">{{ item.description | safe }}</p>
                {% endif %}
                {% if item.link %}
                    {% render '@text-link' ~ item.link.variant, item.link, true %}
                {% endif %}
                {% if item.cta %}
                <div class="rtds-flex rtds-justify-end">
                    {% render '@button' ~ item.cta.variant, item.cta, true %}
                </div>
                {% endif %}
            </div>
            {% endfor %}
        {% endblock %}
    </div>
</section>
 
{
  "label": "Titolo",
  "gradient": "rtds-bg-gradient-03",
  "id": null,
  "contents": [
    {
      "title": "Aggiornamento 26 gennaio 2025",
      "description": "Approvata la graduatoria definitiva",
      "cta": {
        "variant": "--icon-right",
        "classes": "rtds-btn--only-text rtds-btn--s",
        "url": "#",
        "label": "Leggi l'avviso completo",
        "icon": "mini--chevron-right"
      }
    }
  ]
}
  • 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