Card

Cards are used to group similar concepts and tasks together to make it easier for users to scan, read, and get things done.

Examples

Basic Example

Card with href prop

Cards can render as a link, which will give it a hover effect and make it keyboard focusable.

Selected Card

Cards can also render in a "selected" state.

Card with an image

A common use-case is to render an image inside a card

Props - Card