LinkCard
A door to another area: a title, a sentence and the arrow. The whole card is the link.
Sur cette page
Playground
Fond
<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>Le concept, les fondements et les modèles.</span></a></div>Quand l'utiliser
- To present a few possible paths, side by side: a site's areas, the two paths of a getting-started page.
Quand ne pas l'utiliser
- For a list of items (schedules, tasks): use Table or TaskList.
- For an action: use Button.
- For more than six doors: it becomes a grid of identical cards; use a list of links.
Exemples
Portes côte à côté
Dans un Grille, chaque carte avec un titre, une phrase et la flèche. Au survol, le papier se soulève.
Afficher le code
<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>Anatomie
- Carte : le lien entier, sur papier ; il se soulève au survol.
- Titre : la destination, en un ou deux mots.
- Flèche : dit qu'elle mène ailleurs.
- Phrase : ce qui se trouve de l'autre côté.
États
- Survol : devient papier soulevé, avec l'ombre dure.
- Focalisation : le contour orange autour de toute la carte.
Faire et ne pas faire
Do
Un titre qui est la destination, et une phrase disant ce qu'il y a.
Don’t
"En savoir plus" ne dit pas la destination, et un lien dans la carte de lien trouble le clic.
Accessibilité
- La toute carte est un seul
<a>: rien n'est cliquable à l'intérieur. - Le titre vient en premier dans le code, donc les lecteurs d'écran lisent la destination avant la phrase.
Attributs
| Attribut | Valeurs | Pour quoi |
|---|---|---|
class="feitio-link-card" | sur le <a> | La carte de lien, avec la feuille qui se soulève. |
<strong> | le titre, avec la flèche | La destination, en un ou deux mots. |
<span> | la phrase | Ce qui se trouve de l'autre côté. |