Crea una scheda

Panoramica

Una scheda raggruppa un contenuto correlato o una scelta. Si tratta di un pattern visivo, non di un modello semantico o di interazione fisso, quindi conserva il significato dei contenuti e utilizza l'interazione nativa corrispondente allo scopo.

Linee guida

Scegli la semantica per i contenuti e la relativa interazione separatamente:

• utilizzare <article> come radice della scheda, indipendentemente dal fatto che rimandi o meno a una destinazione;
• utilizza un link nativo per la navigazione. Quando l'intera scheda è una destinazione, un singolo link può aggregare <article> solo se la scheda non contiene altri elementi interattivi (a, button, input, select, textarea).
• Mantieni i link e i pulsanti per le azioni indipendenti come controlli nativi separati.
• Utilizza un pulsante di opzione o una casella di controllo con un <label> associato o un option in un <select> nativo, quando la scheda è una scelta.

Mantieni i contenuti multimediali, il titolo, i contenuti di supporto e le azioni in un ordine di origine significativo; non utilizzare CSS order per contraddirlo (consulta Layout CSS e responsive design).

Implementazione

Mantieni il markup al minimo e lascia che i selettori CSS riconoscano ogni regione, in modo che le schede semplici rimangano semplici e le schede interattive rimangano possibili. Una scheda può avere fino a quattro regioni, in questo ordine di origine, e ognuna di queste può essere omessa. Le regioni sono elementi secondari diretti della scheda, non raggruppati in elementi wrapper come .card__body, il che impedisce il posizionamento e lo stile delle regioni in base al selettore. Una regione con un singolo elemento è l'elemento stesso, non racchiuso: un singolo paragrafo è <p>. Utilizza un wrapper solo quando una regione contiene più elementi.

• Media: un elemento <img>, <picture>, <video> o <svg> come primo elemento secondario. Aggiungi una classe .media solo ai contenuti hero arbitrari che non sono uno di questi elementi e non inserire mai un elemento <img> semplice in un elemento .media.
• Intestazione: un'intestazione a sé stante. Utilizza <hgroup> solo quando l'intestazione ha un sottotitolo o uno slogan e <header> quando la regione contiene più di un titolo, ad esempio una riga con il nome dell'autore o un badge. Quando la scheda ha una destinazione principale, il link viene inserito nell'intestazione.
• Contenuti: un singolo <p>, <ul> o <dl> è indipendente. Quando i contenuti sono costituiti da più elementi, ad esempio più paragrafi o un paragrafo più un elenco, raggruppali in un unico <div> in modo che la regione sia un singolo elemento della griglia.
• Piè di pagina: un <footer> che contiene azioni indipendenti come link e pulsanti nativi. Un link "Leggi di più" può condividere l'URL del link dell'intestazione, ma assegnargli un nome accessibile descrittivo che inizi con il testo visibile, utilizzando un testo nascosto visivamente (ad esempio, Read more<span> about poached eggs</span>), perché i link "Leggi di più" identici sono ambigui nell'elenco dei link di uno screen reader. Non aggiungere altri link nel piè di pagina che ripetono l'URL dell'intestazione.

La scheda più semplice è un <article> contenente un'intestazione e un paragrafo. Scegli il pattern di link e azioni che corrisponde al comportamento della scheda. Consulta Modelli di interazione.

Per le immagini o i video delle schede che devono riempire un'area con proporzioni fisse, imposta aspect-ratio e object-fit: cover su <img> o <video>, in modo che riempiano l'area senza distorsioni (potrebbe verificarsi un ritaglio). Utilizza un contenitore .media di aspect-ratio solo per altri contenuti hero. In caso contrario, mantieni le proporzioni intrinseche dei contenuti multimediali. Fornisci alle immagini informative un testo alternativo appropriato; utilizza alt="" per le immagini decorative.

Adattarsi allo spazio disponibile

Basare il layout sullo spazio disponibile della scheda, non sull'area visibile. Per adattare i discendenti della scheda (media, testo, azioni), imposta la scheda come contenitore delle dimensioni (container-type: inline-size) e scrivi le regole @container per i relativi elementi secondari. Evita di dimensionare in base alla griglia o all'elenco principale: la larghezza effettiva della scheda può dipendere dal numero di colonne, dagli spazi vuoti e così via, rendendo i breakpoint basati sull'elemento principale poco chiari.

In un contenitore stretto, impila le regioni nell'ordine di origine. In un contenitore largo, posiziona i contenuti multimediali in una colonna laterale accanto alle altre regioni, ma solo per le schede che contengono contenuti multimediali: applica queste regole con :has() all'elemento secondario dei contenuti multimediali (ad esempio .card:has(> img)) in modo che le definizioni delle colonne e i posizionamenti di grid-column non vengano mai applicati a una scheda senza contenuti multimediali. Una scheda senza contenuti multimediali rimane a colonna singola per ogni larghezza e non deve riservare una colonna vuota per i contenuti multimediali.

Allinea le schede in una griglia

Quando le schede di una riga devono condividere le altezze delle loro regioni, utilizza subgrid: fai in modo che ogni scheda si estenda su quattro tracce di riga condivise (media, intestazione, contenuti, piè di pagina) e posiziona le regioni in base al selettore di elementi, trattando tutto ciò che non è un media, un'intestazione o un <footer> come contenuti. Una scheda che omette una regione lascia vuota la relativa traccia, in modo che le regioni rimanenti siano comunque allineate con le schede vicine. Ogni traccia contiene un elemento della griglia, quindi inserisci la regione dei contenuti in un <div> solo quando contiene più di un elemento e le schede condividono le tracce. Le schede che non sono allineate con gli elementi di pari livello non richiedono né wrapper né griglia secondaria.

Modelli di interazione

Schede dei contenuti

Utilizza un <article> come radice della scheda. Mantieni i link e i pulsanti come controlli nativi separati.

Schede con destinazione singola

Quando l'intera scheda è una destinazione e non ha azioni indipendenti, utilizza un link nativo. Il link può includere <article>. Non nidificare altri link, pulsanti o controlli dei moduli all'interno del link e mantieni il testo "Scopri di più" come semplice <p> o <span>. Poiché il nome accessibile del link è tutto il testo della scheda, mantieni i contenuti brevi. Se la scheda contiene molto testo o altre azioni, utilizza il pattern del link esteso di seguito in modo che solo l'intestazione sia il link:

<a href="/recipes/poached-eggs">
  <article class="card">
    <h3>Poached eggs</h3>
    <p>Two poached eggs served on toasted sourdough.</p>
  </article>
</a>

Schede cliccabili con azioni indipendenti

Se il clic sulla scheda attiva un'azione anziché la navigazione, utilizza un <button> anziché un link.

Quando una scheda di contenuti rimanda a una destinazione principale, contiene anche altri elementi interattivi e deve essere cliccabile nel suo complesso:

• Utilizza un singolo opt-in sul link principale stesso: inserisci .card-link esattamente su un link per scheda (il link dell'intestazione). Il piè di pagina e gli altri link non lo ricevono mai, altrimenti ognuno di essi estenderebbe il proprio overlay e l'ultimo acquisirebbe l'intera scheda.
• Collega il titolo ed estendi l'area di selezione del puntatore sulla scheda con ::after

.card:has(a.card-link) {
    position: relative;
}

.card a.card-link::after {
    content: "";
    position: absolute;
    inset: 0;
}

• Metti in evidenza gli elementi interattivi con position: relative; z-index: 1 in modo che rimangano utilizzabili. Scegli come target i tipi di elementi (ad es. a, button) anziché richiedere l'attivazione tramite le classi.
• NON applicare z-index a interi container, perché in questo modo acquisirebbero eventi puntatore che non producono alcuna azione.

.card:has(a.card-link) {
    /* Keep other interactive elements above the overlay */
    a:not(.card-link), button, input, x-button {
        position: relative;
        z-index: 1;
    }
}

• Applica lo stile alla scheda stessa al passaggio del mouse/quando è attiva, anziché al link esteso:

.card {
    a.card-link {
        &:focus-visible {
            outline: none; /* Draw it on the card instead */
        }
    }
    
    &:has(a.card-link:focus-visible) {
        /* Focus ring */
    }

    &:has(a.card-link:hover) {
        /* Hover styles */
    }
}

Schede delle scelte

Per le schede che rappresentano scelte predefinite, utilizza <label class="card"> con una casella di controllo o un pulsante di opzione come elemento secondario diretto.

Applica lo stile alla scheda selezionata con :has(:checked). Non modificare mai le proprietà che influiscono sul layout, come border-width, padding o font-weight, al momento della selezione, perché la scheda e gli elementi adiacenti saltano; enfatizza con outline, box-shadow o un bordo trasparente che cambia solo colore:

.card {
  border: 2px solid transparent;

  &:has(> :checked) {
    border-color: var(--accent);
  }
}

La casella di controllo o il pulsante di opzione visibile è di per sé un indicatore di selezione non basato sul colore, quindi la sola modifica del colore è sufficiente. Se il controllo è nascosto visivamente (mantienilo attivabile e nell'albero di accessibilità, mai display: none), aggiungi un indicatore non cromatico che non influisca sul layout, ad esempio un'icona di spunta o un outline più spesso.

Quando le scelte appartengono a un selettore a discesa le cui opzioni sono disposte come schede, utilizza un elemento <select> nativo con appearance: base-select e applica uno stile agli elementi ::picker(select) e <option> anziché sostituire la selezione con schede <div>; per ulteriori dettagli e opzioni di riserva, consulta Layout dei selettori personalizzati.