Regione Toscana Design System Design System Servizi

Horizontal Divider 

<div class="rtds-horizontal-divider rtds-border-b rtds-border-gray-03 rtds-mt-3 rtds-mb-4 ">
</div>
 
<div class="rtds-horizontal-divider rtds-border-b rtds-border-gray-03 rtds-mt-3 rtds-mb-4 {% if classes %} {{ classes }}{% endif %}">
</div>
 
{
  "classes": ""
}

Horizontal Divider

Separatore orizzontale per dividere visivamente sezioni di contenuto.

Comportamento

Il componente viene renderizzato come un <div> con bordo inferiore. Accetta classi CSS aggiuntive tramite il parametro classes per sovrascrivere la spaziatura predefinita.

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.

  • classes (stringa, opzionale): Classi CSS aggiuntive per personalizzare margini e spaziatura. Default: nessuna classe aggiuntiva.

Accessibilità

Componente puramente decorativo e non interattivo. Non richiede attributi ARIA né interazione da tastiera.

WCAG 2.1

Livello AA — criteri pertinenti:

  • 1.3.1 Informazioni e correlazioni — il separatore è renderizzato come <div> decorativo; non trasporta informazioni strutturali che richiedano semantica aggiuntiva

Stili CSS

Classi Base

  • .rtds-horizontal-divider: Applica border-bottom con colore gray-03, margine superiore mt-3 e inferiore mb-4.

Esempi di utilizzo

<!-- Separatore base -->
<div class="rtds-horizontal-divider rtds-border-b rtds-border-gray-03 rtds-mt-3 rtds-mb-4"></div>

<!-- Separatore con spaziatura personalizzata -->
<div class="rtds-horizontal-divider rtds-border-b rtds-border-gray-03 rtds-mt-6 rtds-mb-8"></div>