Block link cards

Cards are used in multiple places. Although the visual appearance may vary, they share two general patterns:

1. Simple cards with a distinct link that can be selected
2. Block link cards (covered here) where JavaScript is used to make the entire surface area act as a link

For both types of card, it is important to check that the heading level used fits in with the card's location in the page content hierarchy.

A simple card is enhanced into a block link card by adding the data attribute data-component="card". When this is present, JavaScript will make the whole card act as a block link.

Do not wrap the contents of a card inside a singular a element. This can result in a very verbose experience for screen reader users where the entire contents of the card are announced.

For arranging groups of cards you can use the switcher layout helper or shelves component depending on your requirements.

Considerations

Block links work because the JavaScript looks for a link with the class card__link. We add this link to the card__heading text, to make sure that the link text is descriptive. If the design calls for a visually distinctive CTA, use a simple div to hold the text content and aria-hidden to hide it from assistive technology.

The preceding example shows that it is possible for a block link card to have one link as the main link while also allowing other specific links (in this case a list of tags) to different destinations. JavaScript targets the link with the class card__link and identifies this as the main link for the card.

Neat cards

If the design calls for a row of cards of equal height, irrespective of the amount of text content, you can add the card--neat modifier class to the cards. This forces the card to take up 100% of the height of the parent container. It will also push the last child element in the text region to the bottom edge. You can see this in action on the Amplify home page.