The Card component is a low-level primitive used to create clickable regions of content.

In its most basic form, a Card is simply a clickable, bordered box with a hover interaction. Similarly to the component, Card is a primitive that can be used to create a wide variety of experiences and UIs. See the recipes section of this page for examples.

This is a card. You can click on it. Cards can contain as well.
import { Card } from '@sproutsocial/racine'

Note that you should provide a descriptive label of the action that will be performed when the user clicks the card via the prop. Avoid generic terms such as “Click here” etc.


onClick() => void
Label describing the action that will be performed when the user interacts with the card
buttonProps{ ...TypeButtonProps, children?: void | null, }{}



Use elevation level 100 on cards in a functional setting or a setting with limited space.


Use elevation level 300 on cards in an expressive brand setting where space is plentiful.


Vertical layout

This example shows a card with a vertical layout.

Joe Smith
Some descriptive text about this particular user.

Horizontal layout

This example shows a card with a horizontal layout.

Joe Smith requires your approval
Sprout Coffee Co. • Oct 21, 2019

If a link and card have separate actions, the Link gets underlined only when hovering directly on it. If a link does the same thing as the card, hovering anywhere on the Card underlines the Link.

My card and I are one and the same.