# LinkCard
A door to another area: a title, a sentence and the arrow. The whole card is the link.
## Playground
```html
```
## 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
```html
```
## Anatomy
1. **Card:** the whole link, on paper; it lifts on hover.
2. **Title:** the destination, in one or two words.
3. **Arrow:** says it goes somewhere else.
4. **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
[**Get started**From zero to a page in a few steps.](#padroes)
A title that is the destination, and a sentence saying what is there.
Don’t
[**Learn more**Read](#padroes)
"Learn more" does not say the destination, and a link inside the link card muddles the click.
## Accessibility
- The whole card is a single ``: 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 ``
The link card, with the lifting paper.
``
the title, with the arrow
The destination, in one or two words.
``
the sentence
What is on the other side.