LinkCard
A door to another area: a title, a sentence and the arrow. The whole card is the link.
On this page
Playground
Background
<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>The concept, the foundations and the patterns.</span></a></div>When to use
- To present a few possible paths, side by side: a site’s areas, the two paths of a getting-started page.
When not to use
- 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.
Examples
Doors side by side
In a Grid, each card with a title, a sentence and the arrow. On hover, the paper lifts.
Show 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>Anatomy
- Card: the whole link, on paper; it lifts on hover.
- Title: the destination, in one or two words.
- Arrow: says it goes somewhere else.
- Sentence: what is on the other side.
States
- Hover: becomes lifted paper, with the hard shadow.
- Focus: the orange outline around the whole card.
Do and don’t
Do
A title that is the destination, and a sentence saying what is there.
Don’t
"Learn more" does not say the destination, and a link inside the link card muddles the click.
Accessibility
- The whole card is a single
<a>: nothing clickable inside it. - The title comes first in the code, so screen readers read the destination before the sentence.
Attributes
| Attribute | Values | What for |
|---|---|---|
class="feitio-link-card" | on the <a> | The link card, with the lifting paper. |
<strong> | the title, with the arrow | The destination, in one or two words. |
<span> | the sentence | What is on the other side. |