components
link
Navegação inline em texto, ou standalone como CTA secundário. Sempre sublinhado pra acessibilidade.
overview
Inline: leia mais sobre tokens de cor e tipografia.
ver documentação completavariantes
estados
modifiers · api
| prop | tipo | default | descrição |
|---|---|---|---|
| .link | class | — | link inline (sublinhado verde) |
| .link--standalone | class | — | CTA com seta, sem sublinhado |
quando usar
use
não use
acessibilidade
- Sempre <a href="...">, não JS-only div
- Texto descritivo ("ler artigo", não "clique")
- target="_blank" sempre com rel="noopener noreferrer"
- Foco visível 2px solid focus
- External link sinalizado (↗) quando relevante
código
<!-- inline -->
<p>Leia mais sobre <a class="link" href="/color">cor</a>.</p>
<!-- standalone -->
<a class="link link--standalone" href="/next">próximo passo</a>
<!-- externo -->
<a class="link" href="https://x.com" target="_blank" rel="noopener">site externo ↗</a>