Card is used to highlight content in grids. It visually shows that children elements belong together and can highlight the items on hover.

also known as Tile, Panel

Figma:

Web:

iOS:

Android:

A11y:

Props

Component props
Name
Type
Default
active
?boolean
-

Used to force the "active" hover state visually.

children
React.Node
-
image
React.Node
-

An optional Image to be displayed at the top of the layout.

onMouseEnter
({| event: SyntheticMouseEvent<HTMLDivElement> |}) => void
-

Optional callback fired when the user mouses over Card.

onMouseLeave
({| event: SyntheticMouseEvent<HTMLDivElement> |}) => void
-

Optional callback fired when the user away from Card.

Usage guidelines

When to use
  • Highlighting content in a grid format.
  • Displaying related content in a way that is easy to scan, read, and act upon.
When not to use
  • Displaying an unrelated group of information.

Accessibility

Variant

Example

Using Card is as easy as it can be, simply wrap your component(s) with it. Ideally all of the children should be clickable and cover 100% of the area

Component quality checklist

Component quality checklist
Quality item
Status
Status description
Figma Library
Component is not currently available in Figma.
Responsive Web
Ready
Component is available in code for web and mobile web.
iOS
Component is not currently available in code for iOS.
Android
Component is not currently available in code for Android.