Sections
Sezioni per creare raggruppamenti orizzontali di contenuti coerenti e con sfondi dedicati
ComponentiMetadati e link per approfondire
Quando usarlo
L'elemento Sections, in italiano sezioni, è utile per organizzare e suddividere contenuti particolarmente ampi e complessi, permettendo agli utenti di navigare facilmente tra le diverse parti. L'uso delle sezioni migliora la leggibilità e la struttura di una pagina.
Come usarlo
- Definisci le sezioni identificando le diverse parti del contenuto che vuoi suddividere in parti distinte; ciascuna di esse dovrebbe trattare un argomento specifico o una parte del contenuto complessivo.
- Organizza il contenuto all'interno di ogni sezione in modo logico e coerente, utilizzando titoli, sottotitoli e colonne della griglia per delineare chiaramente le diverse parti della sezione.
- Personalizza l'aspetto delle sezioni adattandolo in base al design del sito o applicazione. Puoi utilizzare le varianti del colore di sfondo e altri elementi di stile per migliorare la leggibilità e l'estetica.
Attenzione a
- Creare sezioni con una struttura simile e posizionate in sequenza una dopo l'altra. L'eccessiva ripetizione di uno schema può compromettere la fruizione dei contenuti.
- Personalizzare il colore di sfondo di una sezione, rispettando il giusto contrasto con i contenuti testuali.
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 Italia (design) | Non presente | KitUI Kit Italia su Figma (si apre in una nuova finestra) |
Bootstrap Italia | Pronto | Scheda documentazione (si apre in una nuova finestra) |
React | Pronto | Scheda Storybook (si apre in una nuova finestra) |
Angular | Non presente | Scheda documentazione (si apre in una nuova finestra) |
Anatomia
Una sezione può essere composta da un numero variabile di elementi testuali o altri componenti. L'anatomia dipenderà quindi dalla tipologia di contenuto che deve essere organizzato e strutturato al suo interno.
Comportamento
Una sezione non prevede di per sé comportamenti interattivi particolari, ma dipenderà dagli elementi o componenti inseriti al suo interno.
Specifiche di design
Non sono presenti specifiche particolari in quanto queste dipendono dall'organizzazione dei contenuti all'interno della sezione.
Come iniziare
Scopri come utilizzare tutti gli strumenti pensati per progettare interfacce ed esperienze dei servizi pubblici
Come iniziare
Scopri come utilizzare tutti gli strumenti pensati per progettare interfacce ed esperienze dei servizi pubblici