The Card component is meant to highlight content in grids. It visually shows that items belong together and highlights the items on hover.

Props

Name
Type
Default
active
?boolean
false
children
React.Node
-
image
React.Node
-
onMouseEnter
({ event: SyntheticMouseEvent<HTMLDivElement> })
-
onMouseLeave
({ event: SyntheticMouseEvent<HTMLDivElement> })
-

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.

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