Card
Aiutano a presentare un gruppo di contenuti correlati, come articoli o sezioni di un sito web e permettono di continuare la navigazione verso le rispettive pagine di dettaglio
ComponentiMetadati e link per approfondire
Quando usarlo
Le card sono contenitori flessibili e versatili per organizzare e presentare contenuti strutturati in modo coerente, adattabili a diversi contesti e necessità.
Come usarlo
- Rendi la card azionabile poiché è una sintesi di informazioni più dettagliate. Ogni card deve puntare a una pagina di dettaglio tramite link.
- Includi contenuti unici, evitando di ripetere immagini o informazioni che sono presenti in altre card.
Attenzione a
- Non usare la card a scopo decorativo, creando un contorno per qualunque tipologia di contenuto.
- Usare la corretta struttura semantica per i contenuti (
article,time,address, ordine immagini, ...), rispettando quanto negli esempi delle varianti. - Usare la corretta semantica per le intestazioni (heading), rispettando la gerarchia visiva di base.
- Scegliere immagini della dimensione corretta, assicurandoti che funzionino bene su qualsiasi dispositivo e dimensione.
- Usare gli elementi lista HTML
<ul>e<li>per raggruppare molte card di un'unica sezione.
Buone pratiche sui contenuti
- Scrivi titoli concisi che stimolino l'interesse dell'utente ad approfondire il contenuto.
- Usa la descrizione per contenuti secondari, non per informazioni essenziali, in quanto gli utenti potrebbero prestarvi minore attenzione.
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) | Pronto | KitUI Kit Italia 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 | Da rivedere | Scheda documentazione (si apre in una nuova finestra) |
Anatomia
Uno sfondo bianco con un bordo grigio chiaro e un ombreggiatura leggera sono elementi comuni a tutte le varianti di card.
Card editoriale
Tutte le varianti di card editoriali posso contenere i seguenti elementi:
- immagine (opzionale), deve essere pertinente al contenuto della card, in un rapporto tra quelli disponibili e con un testo alternativo descrittivo;
- titolo, deve essere breve e descrittivo del contenuto della card, con un link alla pagina di dettaglio;
- sottotitolo (opzionale), deve differire dal titolo e fornire ulteriori informazioni sul contenuto;
- autore (opzionale), mostra il nome e cognome dell'autore del contenuto;
- sommario (opzionale), fornisce una breve descrizione del contenuto della card;
- categoria (opzionale), mostra la categoria del contenuto della card;
- tag (opzionale), mostra i tag associati al contenuto della card;
- data (opzionale), mostra la data di pubblicazione del contenuto della card;
- link di approfondimento (opzionale), mostra un link per ulteriori informazioni sul contenuto della card. A seconda della variante utilizzata, alcuni di questi elementi possono essere combinati o presentati in modo diverso.
Card evento
La card evento è una variante della card editoriale con qualche differenza:
- immagine (opzionale), deve essere pertinente al contenuto della card, in un rapporto tra quelli disponibili e con un testo alternativo descrittivo;
- titolo, deve essere breve e descrittivo del contenuto della card, con un link alla pagina di dettaglio;
- perdio dell'evento, mostra il periodo di svolgimento dell'evento, come ad esempio "dal 1 gennaio al 31 dicembre 2023";
- sommario (opzionale), fornisce una breve descrizione dell'evento;
- categoria (opzionale), mostra la categoria dell'evento;
- data (opzionale), mostra la data di pubblicazione dell'evento;
- link di approfondimento (opzionale), mostra un link per ulteriori informazioni sull'evento.
Card media
La card media è una variante della card editoriale con qualche differenza:
- immagine, deve essere pertinente al contenuto media (video o foto), in un rapporto tra quelli disponibili e con un testo alternativo descrittivo;
- titolo, deve essere breve e descrittivo del contenuto della card, con un link alla pagina di dettaglio;
- icona, mostra un'icona che rappresenta il tipo di contenuto media (video o foto);
- sommario (opzionale), fornisce una breve descrizione del contenuto media;
- categoria (opzionale), mostra la categoria del contenuto media;
- data (opzionale), mostra la data di pubblicazione del contenuto media;
Card servizio
La card servizio può contenere i seguenti elementi:
- titolo, deve essere breve e descrittivo del servizio, con un link alla pagina di dettaglio;
- icona, mostra un'icona che rappresenta il servizio;
- sommario (opzionale), fornisce una breve descrizione del servizio;
- categoria (opzionale), mostra la categoria del servizio;
- tag (opzionale), mostra i tag associati al servizio;
- link di approfondimento (opzionale), mostra un link per ulteriori informazioni sul servizio.
Card documento
La card documento può contenere i seguenti elementi:
- titolo, deve essere il titolo effettivo del documento, con un link al download o ad una pagina di dettaglio;
- icona, mostra un'icona che rappresenta il tipo di documento (ad esempio, PDF, DOCX, XLSX);
- sommario, fornisce una breve descrizione del documento e può indicare il formato del file e il peso espresso in byte;
- categoria (opzionale), mostra la categoria del documento;
Card persona
La card persona può contenere i seguenti elementi:
- nome della persona, deve essere il nome e cognome della persona, con un link alla pagina di dettaglio;
- foto, deve essere un'immagine della persona, in un rapporto tra quelli disponibili e con un testo alternativo descrittivo; in alternativa può essere utilizzata un'icona di tipo "persona";
- sottotitolo (opzionale), fornisce ulteriori informazioni sulla persona, come ad esempio il ruolo o la posizione;
- dettagli, fornisce ulteriori informazioni sulla persona, come ad esempio il numero di telefono o l'indirizzo email;
Card luogo
La card luogo può contenere i seguenti elementi:
- nome del luogo, deve essere il nome del luogo, con un link alla pagina di dettaglio;
- foto, deve essere un'immagine del luogo, in un rapporto tra quelli disponibili e con un testo alternativo descrittivo; in alternativa può essere utilizzata un'icona di tipo "luogo";
- sottotitolo (opzionale), fornisce ulteriori informazioni sul luogo, come ad esempio la descrizione o la posizione geografica;
- dettagli, fornisce ulteriori informazioni sul luogo, come ad esempio l'indirizzo o il numero di telefono;
- link mappa (opzionale), mostra un link per ulteriori informazioni sul luogo.
Card link correlati
La card link correlati può contenere i seguenti elementi:
- immagine (opzionale), deve essere pertinente al contenuto della card, in un rapporto tra quelli disponibili e con un testo alternativo descrittivo;
- titolo, deve essere breve e descrittivo del contenuto della card, con un link alla pagina di dettaglio;
- sottotitolo (opzionale), fornisce ulteriori informazioni sull'argomento;
- sommario (opzionale), completa la descrizione del contenuto della card;
- lista di link, mostra un elenco di link correlati al contenuto della card, ciascuno con un link alla pagina di dettaglio;
- link secondario (opzionale), mostra un link per ulteriori informazioni sul contenuto della card.
Specifiche di design
Tutte le misure indicate sono espresse in px.
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