Card

Cards provide designers a place to organize text and/or images into sections that can be easily scanned.

Users can use Tab to navigate through interactive elements.

Confirm or activate any interactive element within the card with Enter or Space.

Users can use the arrows to navigate between interactive elements.

Provide good contrast

Adequate contrast between the card and background helps denote a card's functionality.

Use unordered lists and list items. Use a ul for a card group and an li for each card. This formatting allows screen readers to enumerate the items in the card group and allows shortcuts between list items.

Use the appropriate heading level for your page. Update heading level based on the content of your page to make sure card headings are in the correct, logical outline order.

Use CSS to order the media element. Logically, the media element should follow the header element. Don’t re-organize the markup to reverse their order.