Card

Import
import { Card } from "reshaped";
import type { CardProps } from "reshaped";
Related components
Storybook
Works with any type of content
Supports custom padding values
Can be used as a navigation link
Can display selected state for a group of elements


Usage

Cards are empty containers with basic styling applied to them, and they are perfect for the composition of components.

Cards are often used as actionable elements, so it supports both href and onClick properties. It will automatically use a correct HTML tag for the Card root element to keep it accessible for screen readers.

Card supports selected state when used for group selection. For example, it can be used with Checkbox or Radio to highlight their selected state.

Composition

Card has a default 4x padding, which you can change to any other multiplier of the base unit token.

In the same way, you can altogether remove the padding from the Card and let the content take its entire width. Compare it with the previous example to see the difference.

After the padding is removed, you can combine full-width content with the Frame utility to get the padding back for some parts of the content. That is handy when you're combining media elements with text content.

You can compose multiple card sections together with the Divider component to make it look like a group of cards.

Bleed

There is an opportunity to save space on mobile viewports by making the Card full width. Card supports bleed property to avoid layout complexities that remove side borders and apply the negative margin multiplier you pass to it. Like most other layout properties, the bleed property is responsive, so you can easily control how your Card behaves on every viewport size.

For example, the second Card here uses x4 bleed on small and medium screens but renders normally for large and extra-large screens.

Previous