Note

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

Comportamento

Il componente è sempre renderizzato come <section> — blocco tematico autonomo. Contiene un <h2> come titolo della nota e, per ogni elemento del contenuto, un <h3> con la relativa descrizione, link e/o pulsante CTA.

Varianti

Varianti di Stile

• 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

Varianti Callout

I callout sono una variante visivamente prominente della nota — bordo laterale sinistro e sfondo neutro — per evidenziare informazioni cruciali nel corpo dei contenuti. Il segnale semantico è portato da colore del bordo, colore dell’icona e testo, non dallo sfondo. Si distinguono dalla nota base (sfondi a gradiente) per la struttura visiva, e dall’alert per la semantica: il callout è contenuto statico della pagina, non un messaggio di stato dinamico.

Non usare role="alert" né aria-live sui callout — riservare quei pattern all’alert per messaggi in risposta ad azioni utente.

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: per quello, fare riferimento alla sezione Esempi di utilizzo.

Parametri Base

• id (stringa, opzionale): ID opzionale per la sezione
• classes (stringa, opzionale): Classi CSS aggiuntive per il componente
• gradient (stringa, opzionale): Classe per il gradiente di sfondo. Impostare "" nelle varianti callout per sovrascrivere il gradiente di default
• label (stringa, obbligatorio): Titolo della nota
• icon (stringa, opzionale): ID dell’icona SVG dallo sprite (es. outline--light-bulb). Usato dalle varianti callout; aria-hidden="true" di default — l’accessibilità è garantita dal testo

Parametri Contenuto

• contents (array, opzionale): Elementi del contenuto
  • title (stringa, opzionale): Titolo dell’elemento
  • description (stringa, opzionale): Descrizione dell’elemento
  • link (oggetto, opzionale): Configurazione del link
    • variant (stringa, opzionale): Variante del link
    • url (stringa, opzionale): URL del link
    • title (stringa, opzionale): Titolo del link
    • icon (stringa, opzionale): Icona del link
  • cta (oggetto, opzionale): Configurazione del bottone
    • variant (stringa, opzionale): Variante del bottone
    • classes (stringa, opzionale): Classi aggiuntive del bottone
    • url (stringa, opzionale): URL del bottone
    • label (stringa, opzionale): Etichetta del bottone
    • icon (stringa, opzionale): Icona del bottone

Accessibilità

WCAG 2.1

Livello AA — criteri pertinenti:

• 1.3.1 Informazioni e correlazioni — il componente usa <section> come contenitore semantico; i titoli seguono una gerarchia coerente (<h2> per il titolo della nota, <h3> per i titoli degli elementi)
• 2.4.6 Intestazioni ed etichette — il titolo della nota (<h2>) identifica il blocco per la navigazione tramite heading degli screen reader

Struttura e semantica

• <section> — blocco tematico autonomo nella pagina; senza aria-labelledby o aria-label non è un landmark navigabile dagli screen reader; per esporla come landmark region, assegnare un id all’<h2> interno e aggiungere aria-labelledby="[id-h2]" sulla <section>
• <h2> — etichetta l’intera nota; referenziarlo con aria-labelledby sulla <section> abilita la navigazione rapida tra le regioni della pagina
• <h3> — titolo di ogni elemento del contenuto; presuppone che la <section> abbia già un <h2> come intestazione di contesto
• I link e i pulsanti CTA interni gestiscono la propria accessibilità tramite la semantica dei rispettivi componenti atom

Screen reader

• Senza aria-labelledby, la <section> non è un landmark — lo screen reader la legge come contenuto generico e non la include nella navigazione rapida per regioni
• Con aria-labelledby="[id-h2]" sulla <section>, lo screen reader annuncia la regione con il testo dell’<h2> (es. “Avviso importante, regione”) e la rende raggiungibile tramite la navigazione per landmark
• I link e i pulsanti CTA interni mantengono la propria semantica (ruolo, nome accessibile) come definita dai rispettivi componenti atom

Stili CSS

Classi Base

• .rtds-note: Classe principale del componente

Classi Elementi (BEM)

• .rtds-note__header: Intestazione della nota
• .rtds-note__title: Titolo <h2> della nota
• .rtds-note__content: Contenitore del contenuto principale
• .rtds-note__content-item: Singolo elemento del contenuto
• .rtds-note__icon: Icona nell’header (solo varianti callout)

Modificatori Callout

• .rtds-note--callout: Base callout (sfondo neutro, bordo sinistro)
• .rtds-note--callout-info: Tipo informativo (blu)
• .rtds-note--callout-avviso: Tipo avviso (arancione)
• .rtds-note--callout-pericolo: Tipo pericolo (rosso)

Esempi di utilizzo

<!-- Esempio base con landmark region accessibile (consigliato) -->
<section class="rtds-note" aria-labelledby="note-title-01">
  <div class="rtds-note__header">
    <h2 id="note-title-01" class="rtds-note__title">Titolo della nota</h2>
  </div>
  <div class="rtds-note__content">
    <div class="rtds-note__content-item">
      <h3>Sottotitolo</h3>
      <p>Descrizione del contenuto</p>
    </div>
  </div>
</section>

<!-- Variante avviso con landmark region accessibile (consigliato) -->
<section class="rtds-note rtds-note--avviso" aria-labelledby="note-avviso-01">
  <div class="rtds-note__header">
    <h2 id="note-avviso-01" class="rtds-note__title">Avviso importante</h2>
  </div>
  <div class="rtds-note__content">
    <div class="rtds-note__content-item">
      <p>Testo dell'avviso</p>
    </div>
  </div>
</section>

<!-- Callout generico -->
<section class="rtds-note rtds-note--callout">
  <div class="rtds-note__header">
    <svg class="rtds-note__icon" aria-hidden="true" focusable="false">
      <use href="/icons.svg#outline--light-bulb"></use>
    </svg>
    <h2 class="rtds-note__title">Nota</h2>
  </div>
  <div class="rtds-note__content">
    <div class="rtds-note__content-item">
      <p>Testo del callout generico.</p>
    </div>
  </div>
</section>

<!-- Callout informativo -->
<section class="rtds-note rtds-note--callout rtds-note--callout-info">
  <div class="rtds-note__header">
    <svg class="rtds-note__icon" aria-hidden="true" focusable="false">
      <use href="/icons.svg#outline--information-circle"></use>
    </svg>
    <h2 class="rtds-note__title">Informazione</h2>
  </div>
  <div class="rtds-note__content">
    <div class="rtds-note__content-item">
      <p>Testo informativo.</p>
    </div>
  </div>
</section>

<!-- Callout avviso -->
<section class="rtds-note rtds-note--callout rtds-note--callout-avviso">
  <div class="rtds-note__header">
    <svg class="rtds-note__icon" aria-hidden="true" focusable="false">
      <use href="/icons.svg#outline--exclamation-triangle"></use>
    </svg>
    <h2 class="rtds-note__title">Attenzione</h2>
  </div>
  <div class="rtds-note__content">
    <div class="rtds-note__content-item">
      <p>Testo dell'avviso.</p>
    </div>
  </div>
</section>

<!-- Callout pericolo -->
<section class="rtds-note rtds-note--callout rtds-note--callout-pericolo">
  <div class="rtds-note__header">
    <svg class="rtds-note__icon" aria-hidden="true" focusable="false">
      <use href="/icons.svg#outline--shield-exclamation"></use>
    </svg>
    <h2 class="rtds-note__title">Attenzione</h2>
  </div>
  <div class="rtds-note__content">
    <div class="rtds-note__content-item">
      <p>Testo del pericolo.</p>
    </div>
  </div>
</section>