LinkCard
Uma porta para outra área: título, uma frase e a seta. O cartão inteiro é o link.
Nesta página
Playground
Fundo
<div style="inline-size: min(100%, 22rem)"><a class="feitio-link-card" href="#playground"><strong>Design<svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-chevron-right"></use></svg></strong><span>O conceito, os fundamentos e os padrões.</span></a></div>Quando usar
- Para apresentar poucos caminhos possíveis, lado a lado: as áreas de um site, os dois caminhos de um começo.
Quando não usar
- Para uma lista de itens (agendamentos, tarefas): use Table ou TaskList.
- Para uma ação: use Button.
- Para mais de seis portas: vira uma grade de cartões iguais; use uma lista de links.
Exemplos
Portas lado a lado
Num Grid, cada cartão com título, uma frase e a seta. Com o mouse por cima, o papel levanta.
Mostrar código
<div class="feitio-grid" data-gap="4" style="--feitio-grid-min: 12rem">
<a class="feitio-link-card" href="/design">
<strong>Design<svg class="feitio-icon" aria-hidden="true">…</svg></strong>
<span>O porquê de cada escolha.</span>
</a>
…
</div>Anatomia
- Cartão: o link inteiro, em papel; levanta com o mouse por cima.
- Título: o destino, em uma ou duas palavras.
- Seta: diz que leva a outro lugar.
- Frase: o que tem do outro lado.
Estados
- Mouse por cima: vira papel sobreposto, com a sombra dura.
- Foco: o contorno laranja em volta do cartão inteiro.
Bons e maus padrões
Faça assim
Um título que é o destino, e uma frase que diz o que tem lá.
Não faça
"Saiba mais" não diz o destino, e um link dentro do cartão-link confunde o clique.
Acessibilidade
- O cartão inteiro é um só
<a>: nada clicável dentro dele. - O título vem primeiro no código, para o leitor de tela ler o destino antes da frase.
Atributos
| Atributo | Valores | Para quê |
|---|---|---|
class="feitio-link-card" | no <a> | O cartão-link, com o papel que levanta. |
<strong> | o título, com a seta | O destino, em uma ou duas palavras. |
<span> | a frase | O que tem do outro lado. |