Link card

A card that links to one page. The whole card is the link. The button at the bottom is a visual cue: it is not a second control, so the card has one tab stop. The button is filled like the primary button.

Card title

One short line about the page.

View HTML

<a class="link-card" href="#" aria-labelledby="demo-card-title">
  <h3 class="link-card__title type-h3" id="demo-card-title">Card title</h3>
  <p class="link-card__text type-body">One short line about the page.</p>
  <span class="button type-button button--primary link-card__button" aria-hidden="true">
    <span class="button__label">View the page</span>
  </span>
</a>

A link card with placeholder text

States

Hover, press and tab to the card above to see each state.

State	Border	Button
Default	1px, neutral default	Primary default fill
Hover	1px, neutral strong	Primary hover fill
Pressed	1px, neutral emphasis	Primary pressed fill
Focus	Neutral default, with a 4px focus ring and a 2px gap	Primary default fill

Size

The card sits on the raised surface with a 1px border. The padding is 16px on mobile and 24px from 768px up. The title uses the H3 style and the text uses the Body style, so both step down on mobile. In a row of cards, every card is the same height and the buttons line up at the bottom.

Using the link card

Do

Make the card the link, and name the link with the card title (aria-labelledby pointing at the title).
Hide the button from screen readers (aria-hidden="true"). It is a look, not a control.
Keep the text to one short line about the page.

Don't

Put a real button or another link inside the card. A link cannot hold another control.
Point one card at more than one page.

The HTML

<a class="link-card" href="/page/" aria-labelledby="card-title">
  <h3 class="link-card__title type-h3" id="card-title">Card title</h3>
  <p class="link-card__text type-body">One short line about the page.</p>
  <span class="button type-button button--primary link-card__button" aria-hidden="true">
    <span class="button__label">View the page</span>
  </span>
</a>

Up next

CTA band

The full-width blue band that closes a page and offers the next step.

Continue to CTA band

Back to List row