Linkuri
Consultă componentele pentru formulare sau deschide repository-ul GitHub (site extern).
Notă: nu solicita un document dacă informația poate fi verificată direct la sursă.
Componente · M2
Conținut clar și date care își păstrează sensul.
Componentele pornesc de la HTML semantic. Aspectul ajută citirea, dar titlurile, listele, statusurile, relațiile dintre date și ordinea informației rămân inteligibile fără CSS sau JavaScript.
Linkuri și mesaje
Destinația și consecința sunt explicite.
Un link descrie destinația. Linkurile externe includ un semnal vizual și un text pentru tehnologii asistive; notificările folosesc titlu, text și simbol, nu doar culoare.
Carduri și statusuri
Cardul grupează conținutul, nu ascunde mai multe acțiuni.
Când întregul card este clicabil, există o singură destinație principală. Pentru mai multe acțiuni se folosește varianta explicită, fără overlay peste card.
ActivServiciu online
Situația cererilor digitale
Date agregate despre cererile primite, soluționate și valoarea plăților procesate.
Necesită verificare
Date de contact instituționale
Ultima confirmare a fost făcută în urmă cu mai mult de 12 luni.
Spinner, chip și avatar
O operație în curs, o selecție activă și o identitate — trei stări diferite.
Spinner-ul are role="status" și text pentru cititoare de ecran, nu doar animație. Chip-ul se elimină printr-un link real, nu doar prin JavaScript. Avatar-ul cu inițiale rămâne lizibil fără imagine.
Tabel responsive
Relațiile dintre coloane rămân explicite.
Tabelul este folosit doar pentru date tabulare. La ecrane înguste, overflow-ul este local, iar regiunea poate primi focus pentru derulare cu tastatura.
| Instituție | Cereri primite | Soluționate | Plăți procesate |
|---|---|---|---|
| Primăria Alba Iulia | 1.248 | 1.183 | 246.500 RON |
| Primăria Brașov | 2.314 | 2.207 | 418.200 RON |
| Primăria Cluj-Napoca | 3.986 | 3.814 | 756.900 RON |
Numerele folosesc formatul românesc și cifre tabulare; valorile monetare includ moneda.
Summary list și metadate
O relație cheie–valoare este reprezentată prin description list.
Ultima actualizare:
Details și conținut lung
Conținutul suplimentar rămâne disponibil fără JavaScript.
Ce înseamnă „date verificate”?
Înseamnă că instituția responsabilă a confirmat valorile, sursa și data ultimei actualizări. Componenta nu garantează singură calitatea datelor; procesul de guvernanță trebuie documentat separat.
Când nu folosim un tabel?
Nu folosim tabel pentru layout, pentru o listă simplă de carduri sau când fiecare element are atribute diferite. În aceste situații sunt mai potrivite lista, cardul ori summary list.
Exemplu de conținut lung
Un serviciu public trebuie să explice scopul operațiunii înainte de a solicita date. Informația esențială apare prima, este scrisă în propoziții scurte și folosește termenii cunoscuți de utilizator. Detaliile juridice sau tehnice pot urma, dar nu înlocuiesc explicația practică.
Paragrafele lungi sunt limitate la o măsură de lectură confortabilă. Listele sunt folosite numai când elementele sunt cu adevărat paralele. Titlurile descriu conținutul secțiunii și păstrează o ierarhie logică, fără niveluri alese pentru aspect.
Pagination
Fiecare pagină are un URL stabil și pagina curentă este textuală.
Markup de referință
Semantica este contractul, clasele oferă prezentarea oficială.
<dl class="sd-summary-list">
<div class="sd-summary-list__row">
<dt class="sd-summary-list__key">Cod fiscal</dt>
<dd class="sd-summary-list__value">12345678</dd>
<dd class="sd-summary-list__actions">
<a href="/modifica">Modifică <span class="sd-visually-hidden">codul fiscal</span></a>
</dd>
</div>
</dl>