Pular para o conteúdo
Faculdade PhorteDesign System

Link

Em andamento

O link de texto — num parágrafo, numa lista de referências, no pé de um cartão —, sempre sublinhado. Interno vai pelo roteador do Next; externo, mailto: e tel:, por <a>. Com novaAba, avisa que abre em outra aba. Com previa (E155), mostra um cartão com o destino no ponteiro e no foco.

Função
Navegação e estrutura
Também chamado de
link, hiperlink, âncora, link de texto, hover preview, prévia de link, cartão de prévia
Mora em
app/components/atoms/Link.tsx
Última mudança
2026-10-01
Ver como Markdown(abre em outra aba)Ficha no Storybook(abre em outra aba)

Prévia

A peça ao vivo, vinda da ficha, na largura escolhida. Em larguras fixas, ela roda num quadro do tamanho de uma tela de verdade.

Na largura da página: 0px

Pular a prévia
Variante Padrão, ao vivo — vem da ficha.Abrir sozinha(abre em outra aba)

Variantes na ficha

Lidas da ficha no build, na ordem do palco. Cada uma abre sozinha, sem o styleguide em volta — é o endereço que o palco carrega.

  1. Padrão
  2. No texto
  3. Nova aba
  4. Inverso
  5. Com prévia

Quando usar

Para **navegar** a partir de um texto: o edital no meio de um parágrafo, o e-mail da secretaria, "Ver todos os cursos" no fim de uma lista.

Faça

  • Escreva o destino no texto do link: "o edital completo", nunca "clique aqui".
  • Use novaAba só para fora do site, e com parcimônia: sair da aba é decisão de quem lê.
  • Use variant="inverso" sobre fundo escuro, e sutil em texto corrido cinza.
  • Use previa={{ titulo, descricao, imagem }} (E155) quando o destino não é óbvio pelo texto — um curso citado num parágrafo, um documento externo. O título e a descrição dizem o que há do outro lado; a imagem é decorativa.
  • Escreva a prévia como o destino se apresenta (E155b): o título é o nome da página de destino, como ela o mostra; a descrição é uma frase, de até ~160 caracteres, dizendo o que a pessoa encontra lá. O cartão tem formato fixo — a descrição para em 3 linhas —, e o texto passa inteiro para o leitor de tela.

Evite

  • Tirar o sublinhado: no meio do texto, a cor sozinha não separa o link para quem não distingue o vermelho (WCAG 1.4.1).
  • Link sem destino (href="#") para disparar ação: aí é Button.
  • Dois links seguidos para o mesmo lugar.
  • Pôr na prévia o que a pessoa precisa saber para decidir: no celular não há ponteiro, e ela só aparece no foco. O essencial vai no texto do link.
  • Prévia em todo link de um texto: vira ruído. Uma ou duas por bloco, nos destinos que pedem.
  • Esperar que a prévia se preencha sozinha a partir do destino: ela não lê a página do outro lado (decisão do Marcelo, 2026-10-01, E155b) — buscar o Open Graph pelo servidor abria risco de segurança (SSRF), de página ou build travados por destino lento ou fora do ar, e de texto e imagem que ninguém revisou.

Quando não usar. Para agir no lugar (enviar, abrir, fechar), use o Button. Para um link com cara de botão ("Inscrever-se"), o Button com href. Para o caminho de páginas, o Breadcrumb.

Anatomia

As partes, na ordem em que o olho — e o teclado — passam.

  1. Texto — Peso médio, sublinhado de 1px afastado 4px, na cor da variante.
  2. Ícone de nova aba — Com `novaAba`: `ExternalLink` de 12px, decorativo, e "(abre em nova aba)" só para o leitor.
  3. Prévia — Com `previa` (E155): cartão `--card` de 288px (até a largura da tela menos 32px), borda e sombra, embaixo do link: a imagem 16:9 (decorativa, `alt=""`), o título, a descrição e, para link de fora, o endereço.

Estados

Os estados que a peça tem no código, e o que muda em cada um.

Estados da peça e o que muda em cada um
EstadoO que muda
Padrãopadrao: --primary; sutil: --ink; inverso: --ink-inverse.
HoverO sublinhado engrossa para 2px, e a cor escurece (ou, no sutil, fica vermelha).
FocoO anel de foco (anel-de-foco; no inverso, o inverso), só no teclado.
Prévia abertaO cartão embaixo do link (em cima, se embaixo não couber; empurrado para dentro da tela, se passaria da borda). Abre no ponteiro depois de 400ms e no foco na hora. Formato fixo (E155b): imagem 16:9, título que quebra linha sem corte, descrição em até 3 linhas — testado na ficha com texto longo.

Comportamento

Como a peça reage em cada situação
SituaçãoO que acontece
Endereço interno (`/cursos`)Vai pelo next/link: pré-carrega e não recarrega a página.
Externo, `mailto:` ou `tel:`Um <a> comum.
Com `novaAba`target="_blank" e rel="noopener noreferrer", e o aviso para quem ouve — conferido no teste da ficha.
Ponteiro do link para a préviaA prévia continua aberta enquanto o ponteiro vai do link ao cartão, e fecha quando ele deixa a região do link e do cartão — medido com o mouse no navegador, a 1280 e a 320px (E155, SC 1.4.13).
Prévia com imagemA imagem só carrega quando a prévia abre: nada vem de outro site antes de a pessoa pedir.
Aviso fora do LinkO pedaço AvisoDeNovaAba (ícone e "(abre em nova aba)") é exportado para links que não usam o Link — o Footer e os menus da Navbar (E71).

Relacionados