Data display

Card

A box that groups the content and actions about one topic, such as a product or an article.

2 days · from $240

Temples in the morning, tea houses in the afternoon.

How to recognize it

A rectangle with rounded corners and a border or shadow, often with an image at the top, then a title, short text, and buttons.

Cards are usually laid out in a grid so the user can scan and compare them.
If the whole card is a link, it should contain no other buttons or links; this demo has a button, so only the button is interactive.
Each card is an <article> named by its heading.

Key	Action
`Tab`	Moves to the buttons or links in the card.
`Enter / Space`	Uses the focused button.

If the whole card is clickable, do not put links or buttons inside it.
Separate cards with an outline of at least 3:1 contrast instead of relying on a shadow alone.

List: Cards give each item room for an image and actions; a list stacks items compactly in rows.