Scheda

Cos'è

Un contenitore elevato che raggruppa le informazioni su un solo oggetto: una gita, un rifugio, un articolo.

Quando usarla

• Per elementi di una lista o di una griglia, tutti dello stesso tipo, che si possono aprire.
• Per isolare un blocco di contenuto dalla pagina.

Quando non usarla

• Per liste dense di righe (impostazioni, risultati testuali): bastano righe separate da un bordo.
• Una scheda dentro un'altra scheda: mai.

Codice

<article class="grigna-card">
  <div class="grigna-card__media"><img src="…" alt="Descrizione della foto"></div>
  <div class="grigna-card__body">…</div>
</article>

Scheda cliccabile su tutta la superficie:

<article class="grigna-card grigna-card--interactive">
  <div class="grigna-card__media"><img src="…" alt="…"></div>
  <div class="grigna-card__body">
    <h3><a class="grigna-card__link" href="/gite/…">Titolo</a></h3>
    …
  </div>
</article>

C'è un solo link, sul titolo. La classe grigna-card__link lo estende a tutta la scheda, così chi usa uno screen reader sente un link con un nome chiaro e non "link, link, link".

Varianti e stati

Token

--grigna-card-bg, -border, -radius, -padding, -gap, -shadow, -shadow-hover (tutti con prefisso --grigna-card).

Accessibilità

• Ogni immagine ha un alt che descrive la foto. Se è solo decorativa, alt="".
• Nella scheda cliccabile non vanno altri link o bottoni, perché sarebbero coperti dal link principale.

Per gli agenti

Sempre

• <article class="grigna-card"> per un oggetto, con __media e __body.
• Se è cliccabile: --interactive e un solo grigna-card__link sul titolo.

Mai

• Mai schede annidate.
• Mai più link o bottoni dentro una scheda --interactive.
• Mai cambiare ombra, raggio o bordo della scheda: se serve una variante, si aggiunge al sistema.