Components

Card

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.

Properties

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

Recipes

Asset card

This example shows a card representing an asset (in this case, a user).

JS
Joe Smith
Some descriptive text about this particular user.

Notification

This example shows a card representing a notification.

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