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.

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, }{}

Elevations

Functional

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

Expressive

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

Recipes

Vertical layout

This example shows a card with a vertical layout.

Horizontal layout

This example shows a card with a horizontal layout.

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.