Card

Prezentare

Grupează conținut asociat (titlu, descriere, metadate) și păstrează o singură acțiune principală neambiguă.

Când se folosește

• pentru a prezenta un obiect (serviciu, componentă, resursă) cu titlu, descriere și, opțional, acțiuni, într-un `sd-card-grid`.

Când nu se folosește

• pentru text simplu, fără un obiect clar sau o acțiune de reprezentat — un card fără scop practic e doar decor.

Anatomie

Un `<article class="sd-card">` cu `__heading` (conținând `__link`, a cărui zonă clicabilă acoperă tot cardul prin `::after`), `__description`, opțional `__metadata` și `__actions`.

Variante

• implicit — zonă clicabilă completă
• `sd-card--actions` — dezactivează zona clicabilă completă când cardul are acțiuni suplimentare

Stări

• implicit
• :hover (bordură mai închisă)
• focus pe link, propagat vizual la tot cardul prin `:has()`

Comportament

Fără JavaScript: zona clicabilă extinsă e un singur `<a>` cu `::after` acoperind tot cardul — restul textului rămâne text simplu, nu linkuri suplimentare care ar crea ținte ambigue.

Reguli de conținut

• un singur link clar per card — mai multe ținte concurente confuzează scopul cardului.

Responsabilitățile implementatorului

• când cardul are `__actions` (butoane suplimentare), adaugă `sd-card--actions` ca să elimini zona clicabilă completă — altfel acțiunile devin inaccesibile sub link-ul care acoperă tot cardul.

Cercetare

• https://github.com/ciprian-rus/sistem.digital/pull/51 (site extern)

Istoric

Structura completă a acestei secțiuni urmează șablonul canonic al paginii unei componente. Accesibilitatea (semantică, tastatură, focus) rămâne documentată separat, conform șablonului de accesibilitate.

Preview și markup canonic

Previzualizarea de mai jos redă exact șirul HTML afișat în exemplul de cod. Nu există o implementare paralelă pentru documentație.

Instalare și importuri

pnpm add @sistem-digital/tokens @sistem-digital/components

@import '@sistem-digital/components/content.css';

<article class="sd-card"><span class="sd-tag sd-tag--success">Activ</span><h3 class="sd-card__heading"><a class="sd-card__link" href="#">Serviciu digital</a></h3><p class="sd-card__description">Depune cererea integral online.</p></article>

Contract și surse

• Documentația familiei Conținut și date
• Codul sursă (site extern)
• Changelog (site extern)

Schimbarea claselor publice, a markup-ului canonic sau a comportamentului helperelor necesită versionare și instrucțiuni de migrare.

Matricea design–cod

Disponibilitatea reală a acestei componente, calculată din pachetele publicate, conform schemei matricei design–cod. Rândurile Figma, testare cu tastatura și testare cu cititor de ecran rămân „Indisponibil” până la dovezi publicate separat (kit Figma, respectiv auditul manual de accesibilitate).