Catalog · Conținut și date
Link
Descrie destinația prin text și păstrează comportamentul nativ.
Prezentare
Descrie destinația printr-un text clar și păstrează comportamentul nativ al unei ancore.
Când se folosește
- pentru orice navigare internă către altă pagină sau resursă — alegerea implicită pentru navigare;
Când nu se folosește
- pentru declanșarea unei acțiuni care nu navighează — acolo se folosește `button`, nu un link stilizat ca acțiune;
- decorat vizual ca buton fără să funcționeze ca unul — confuzia de rol induce în eroare tehnologiile asistive.
Anatomie
Un `<a class="sd-link">`, cu stiluri de subliniere reglate independent (`text-decoration-thickness`, `text-underline-offset`).
Variante
- implicit
- `sd-link--external` — adaugă simbolul „↗" prin `::after`, decorativ
Stări
- implicit
- :visited
- :hover (subliniere mai groasă)
- :active
Comportament
Element `<a>` HTML nativ; stilul de subliniere e generat prin CSS, textul rămâne complet funcțional fără el.
Reguli de conținut
- textul descrie destinația („Vezi condițiile de eligibilitate"), niciodată „click aici" sau „aici".
Cercetare
Istoric
| Versiune | Dată | Modificare |
|---|---|---|
| 0.1.0-alpha.0 | Publicare inițială în @sistem-digital/components, ca parte a componentelor de conținut și afișare a datelor (PR #51). |
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';<a class="sd-link" href="#catalog-destination">Vezi condițiile de eligibilitate</a>Contract și surse
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).
| Canal | Disponibilitate |
|---|---|
| Figma | Indisponibil |
| HTML/CSS | Disponibil |
| Web Components | Indisponibil |
| React | Indisponibil |
| Documentație | Disponibil |
| Teste automate | Disponibil |
| Testare cu tastatura | Indisponibil |
| Testare cu cititor de ecran | Indisponibil |
A fost utilă această pagină?
Linkul deschide un formular GitHub precompletat. Nu transmitem nimic până când alegi să publici feedback-ul și îți recomandăm să nu incluzi date personale.