Banner de autenticitate

Prezentare

Indică natura oficială a serviciului și domeniul corect, ca primă informație de pe pagină — o ancoră de încredere înaintea oricărui alt conținut.

Când se folosește

• ca prima secțiune vizibilă a fiecărei pagini publice, deasupra header-ului instituțional;
• ori de câte ori identitatea și autenticitatea domeniului trebuie confirmate explicit, nu presupuse.

Când nu se folosește

• pentru alerte sau situații critice — acelea folosesc `major-alert`, nu bannerul de autenticitate;
• de mai multe ori pe aceeași pagină — rămâne un singur banner, o singură dată.

Anatomie

Un `<section class="sd-official-banner">` cu `.sd-official-banner__inner` (flex), o marcă circulară decorativă `.sd-official-banner__mark` și un `<p>` cu textul despre domeniul oficial.

Variante

• implicit — o singură variantă

Stări

• nu are stări interactive proprii

Comportament

Element static, fără JavaScript; textul rămâne singura sursă de adevăr pentru domeniul oficial — marca circulară e strict decorativă.

Reguli de conținut

• afirmă direct domeniul oficial, fără ambiguitate — conform aceluiași principiu folosit în footer-ul public al sistem.digital.

Responsabilitățile implementatorului

• marca circulară (`__mark`) rămâne `aria-hidden`, dacă textul propriu-zis exprimă deja complet informația.

Cercetare

• https://github.com/ciprian-rus/sistem.digital/pull/50 (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/navigation.css';

<section class="sd-official-banner" aria-label="Informație despre autenticitate — exemplu navigation-official-banner"><div class="sd-official-banner__inner"><span class="sd-official-banner__mark" aria-hidden="true">RO</span><p>Domeniul oficial este <a href="#">institutie.ro</a>.</p></div></section>

Contract și surse

• Documentația familiei Navigație
• 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).