Regione Toscana Design System Design System Servizi

Vertical divider 

<div class="rtds-vertical-divider rtds-w-4 md:rtds-w-8 lg:rtds-w-12">
    <img class="rtds-w-full rtds-h-auto" src="../../images/vertical-divider.svg" alt="">
</div>
 
<div class="rtds-vertical-divider {{ width }}{% if classes %} {{ classes }}{% endif %}">
    <img class="rtds-w-full rtds-h-auto" src="{{ '/images/vertical-divider.svg' | path }}" alt="">
</div>
 
{
  "width": "rtds-w-4 md:rtds-w-8 lg:rtds-w-12"
}
  • Content: 
    @layer components {
    .rtds-vertical-divider {
        @apply rtds-flex rtds-items-center rtds-justify-center;
    }
}
  • URL: /components/raw/vertical-divider/vertical-divider.css
  • Filesystem Path: components/02-atoms/vertical-divider/vertical-divider.css
  • Size: 120 Bytes

Vertical Divider

Separatore verticale per dividere visivamente elementi disposti in fila orizzontale.

Comportamento

Il componente viene renderizzato come un <div> contenitore con un <img> interno che carica un SVG decorativo (/images/vertical-divider.svg). L’immagine ha alt="" perché è puramente decorativa.

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.

  • width (stringa, opzionale): Classe di larghezza per il contenitore (es. rtds-w-px)
  • classes (stringa, opzionale): Classi CSS aggiuntive per il contenitore

Accessibilità

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

WCAG 2.1

Livello AA — criteri pertinenti:

  • 1.1.1 Contenuti non testuali — l’immagine SVG è decorativa e viene nascosta agli screen reader tramite alt=""

Struttura e semantica

  • Il <img> ha alt="" — gli screen reader ignorano l’immagine, che non trasporta informazioni
  • Il <div> wrapper non ha ruolo semantico

Stili CSS

Classi Base

  • .rtds-vertical-divider: Stile base del contenitore

Esempi di utilizzo

<!-- Separatore verticale base -->
<div class="rtds-vertical-divider">
  <img alt="" src="/images/vertical-divider.svg">
</div>

<!-- Separatore verticale con larghezza personalizzata -->
<div class="rtds-vertical-divider rtds-w-px">
  <img alt="" src="/images/vertical-divider.svg">
</div>