Accordion
Stato del componente:ProntoUn accordion è una lista di intestazioni che possono espandersi per mostrare contenuti nascosti, utile per ottimizzare spazio su pagina e creare collegamenti con contenuti correlati
ComponentiMetadati e link per approfondire
Anteprima
Quando usarlo
Il componente Accordion permette di espandere e collassare delle sezioni con contenuti molto lunghi e non principali. L’intestazione delle sezioni dà una panoramica dei contenuti e permette all’utente di scegliere quali leggere.
Come usarlo
- Per ridurre lo scorrimento di contenuti testuali lunghi e non cruciali, soprattutto su mobile.
- Per dare un’anteprima di contenuti correlati tra loro.
- Per organizzare e collegare contenuti simili che si trovano su altre pagine.
- Per permettere all’utente di mostrare o nascondere contenuti che gli sono rilevanti.
Attenzione a
- Non nascondere in un accordion informazioni importanti che devono essere lette dagli utenti.
- Non usare l’accordion su pagine che devono essere stampate.
- Non usare l’accordion per contenuti molto articolati graficamente, ad esempio con immagini e icone.
Buone pratiche sui contenuti
- I titoli delle sezioni dell’accordion devono essere il più breve possibile, rimanendo comunque chiari e descrittivi del contenuto della sezione.
- Ogni titolo deve essere formattato come un heading (H2-H4) appropriato all’informazione dell’architettura della pagina.
- Il contenuto di sezione può essere diviso in paragrafi e includere sottotitoli di paragrafo, se necessario.
Alternative a questo componente
- Tabs: mostrano i contenuti senza spingere altre sezioni verso il fondo della pagina e sono utili quando l’utente deve passare velocemente da una sezione all’altra.
- Collapse: visivamente meno prominente, utile quando ci sono una o due sezioni di contenuti brevi e meno importanti.
Accessibilità
Lo stato delle verifiche di accessibilità effettuate sul componente Bootstrap Italia
| Caratteristica | Stato | Descrizione |
|---|---|---|
| Visivamente accessibile | Pronto | Uso e contrasto dei colori, leggibilità |
| Amichevole con lettori di schermo | Pronto | Struttura titolazioni, etichette e testi alternativi |
| Navigabile | Pronto | Focus, struttura, navigazione da tastiera o altri device |
| Comprensibile | Pronto | Comprensibile, prevedibile, gestione semplice dell’errore |
Stato del componente
Lo stato del presente componente nelle diverse librerie di design e sviluppo del design system
| Libreria | Stato componente | Link |
|---|---|---|
| UI Kit (design) | Pronto | Kit nello UI Kit su Figma (si apre in una nuova finestra) |
| Bootstrap Italia | Pronto | Scheda documentazione (si apre in una nuova finestra) |
| React | Da rivedere | Scheda storybook (si apre in una nuova finestra) |
| Angular | Non presente |
Anatomia
In stesura
Comportamento
In stesura
Specifiche di design
In stesura
Come iniziare
Scopri come utilizzare tutti gli strumenti pensati per progettare interfacce ed esperienze dei servizi pubblici
Design tokens
In stesura, quello che segue è un esempio
Colori
| Elemento | Stato | Proprietà | Token |
|---|---|---|---|
| Text | color | $color-text-base | |
| Link | color | $color-text-primary | |
| Link | active | color | $color-text-primary-active |
| Icon | background | $color-background-primary | |
| Icon | active | background | $color-background-primary-active |
| Separators | border | $color-bluegray-04 |
Spaziature
| Elemento | Dimensione | Token |
|---|---|---|
| Inset | S | $spacing-inset-s |
| Inset | M | $spacing-inset-m |
| Stack | M | $spacing-stack-m |
| Stack | XL | $spacing-stack-xl |
Icone
| Elemento | Stato | Icona |
|---|---|---|
| Chevron | Collapse | Navigazione/Chevron/Collapse |
| Chevron | Expand | Navigazione/Chevron/Expand |
Stili di testo
| Elemento | Stato | Stile |
|---|---|---|
| Text | body text/sans | |
| link | link/sans-bold | |
| link | active | link/sans-bold-underline |
Anteprima
Come iniziare
Scopri come utilizzare tutti gli strumenti pensati per progettare interfacce ed esperienze dei servizi pubblici