LinkCard
Una puerta a otra área: un título, una frase y la flecha. Toda la tarjeta es el enlace.
En esta página
Playground
Fondo
<div style="inline-size: min(100%, 22rem)"><a class="feitio-link-card" href="#playground"><strong>Diseño<svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-chevron-right"></use></svg></strong><span>El concepto, los fundamentos y los patrones.</span></a></div>Cuándo usarlo
- Para presentar algunas rutas posibles, lado a lado: áreas de un sitio, las dos rutas de una página de inicio.
Cuándo no usarlo
- Para una lista de elementos (calendarios, tareas): use Table o TaskList.
- Para una acción: use Button.
- Para más de seis puertas: se convierte en una cuadrícula de tarjetas idénticas; use una lista de enlaces.
Ejemplos
Puertas lado a lado
En una cuadrícula, cada tarjeta con un título, una frase y la flecha. Al pasar el cursor, el papel se eleva.
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>Anatomía
- Tarjeta: todo el enlace, en papel; se eleva al pasar el cursor.
- Título: el destino, en una o dos palabras.
- Flecha: dice que va a otro lado.
- Frase: lo que hay al otro lado.
Estados
- Pasar el cursor: se convierte en papel elevado, con la sombra dura.
- Enfoque: el borde naranja alrededor de toda la tarjeta.
Hacer y no hacer
Do
Un título que es el destino y una frase que dice qué hay allí.
Don’t
"Más información" no dice el destino, y un enlace dentro de la tarjeta de enlace confunde el clic.
Accesibilidad
- La tarjeta entera es un único
<a>: nada clicable dentro de ella. - El título viene primero en el código, por lo que los lectores de pantalla leen el destino antes que la frase.
Atributos
| Atributo | Valores | Para qué sirve |
|---|---|---|
class="feitio-link-card" | sobre el <a> | La tarjeta de enlace, con el papel elevándose. |
<strong> | el título, con la flecha | El destino, en una o dos palabras. |
<span> | la oración | Lo que hay al otro lado. |