Header instituțional

Prezentare

Prezintă împreună identitatea instituției și numele serviciului, ca element de branding constant în fruntea fiecărei pagini.

Când se folosește

• o singură dată per pagină, ca element cel mai de sus după bannerele de autenticitate/alertă.

Când nu se folosește

• pentru conținut secundar sau de marketing — header-ul rămâne strict identitate și acces la instrumentele principale (căutare, navigație).

Anatomie

Un `<header class="sd-header">` cu `.sd-header__identity-row` (flex) care conține `.sd-identity` (link, cu `__mark` decorativ și `__text` — `__name` + `__service`) și `.sd-header__tools`, pentru căutare sau alte instrumente.

Variante

• implicit — o singură variantă

Stări

• nu are stări interactive proprii, dincolo de cele ale copiilor focusabili (link, căutare)

Comportament

Fără JavaScript: layout complet funcțional. Sub 48rem lățime, `__identity-row` și `__tools` trec din flex orizontal în coloană verticală, printr-un media query, nu prin JavaScript.

Reguli de conținut

• numele instituției apare înaintea numelui serviciului — ambele reale, niciodată text de tip „Instituția exemplu" în producție.

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';

<header class="sd-header"><div class="sd-header__identity-row"><a class="sd-identity" href="#"><span class="sd-identity__mark" aria-hidden="true">SD</span><span class="sd-identity__text"><span class="sd-identity__name">Instituția exemplu</span><span class="sd-identity__service">Serviciu digital</span></span></a></div></header>

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).