Card

A Card is a styled container that groups related content and actions.

Import#

import Card from '@volue/wave-react';

Card is a compound component that consists of multiple parts to help you create different kinds of card template:

Card: The wrapper that contains all the parts of a card.
Card.Header: The header of the the card.
Card.Body: The wrapper containing the card's main content.
Card.Footer: The footer that is proper place to put card actions.

Examples#

Basic#

Card is a specifically-styled and flexible container that does not require specific components inside of it.

Elevated#

Often Card component is showed with elevation expressing z-axis distance to surface. Use elevated property to add the elevation.

Card with title, body and footer#

One of the most common use cases for a Card is to combine a title (Card.Header), supporting body copy (Card.Body), and footer (Card.Footer) with action(s) together.

Note that components Card.Header, Card.Body and Card.Footer are based on slots mechanism. It means, that their order in code won't affect the place where they are rendered, because it is predetermined.

Sizes#

Cards can be displayed in medium and small sizes. Use the size prop to control the size.

With action buttons#

With text link#

Interactive card#

Use interactive property to add interactive state to the whole card surface indicated through a change in border. This is useful for clickable cards, where you want to render card as a link or a button with the use of as prop.

Adjusting spacing#

Card and it's subcomponents support customizing padding values for the content displayed. Use the padding property to adjust the spacing within a card.

You can also specify spacing values at different breakpoints since padding prop supports responsive syntax.

Adjusting rounded corners#

Card supports adjusting corners rounding with the borderRadius property. Rounding may be applied responsively, which enables edges of wide card surfaces to be softened on larger screens.

Card with media#

Cards can contain media such as image or video. It is recommended that the media span the full width of the card. You can remove the padding from the card via padding prop and let the media take its entire width. After the padding is removed, you can get it back for some parts of the content by utilizing subcomponents like Card.Body or any other layout component that offers spacing capabilities such as Box.

If padding is needed, then placing inside of the Card.Body will add the proper padding.

Overflowing content#

When a card has some height constraints and the content within Card.Body overflows the available space, the Card.Body becomes scrollable. In that case, you may optionally add a divider to the CardHeader using withDivider prop to make the scrollable area visually more distinctive.

It is recommended to only add Card.Header divider when the card content has overflow. You should use useHasOverflow hook for that purpose.

import { useHasOverflow } from '@volue/wave-react';

API Reference#

Card#

In addition to the props below, you can pass Box props to control the spacing.

Prop	Type	Default
`as`	`enum`	`div`
`css`	`StitchesCss`	No default value
`size`	`enum`	`"medium"`
`borderRadius`	`BorderRadiusToken`	`"m"`
`elevated`	`boolean`	No default value
`interactive`	`boolean`	No default value

Card.Header#

In addition to the props below, you can pass Heading props.

Prop	Type	Default
`as`	`enum`	`h3`
`css`	`StitchesCss`	No default value
`withDivider`	`boolean`	`false`

Card.Body#

In addition to the props below, you can pass Box props to control the spacing.

Prop	Type	Default
`css`	`StitchesCss`	No default value

Card.Footer#

In addition to the props below, you can pass Box props to control the spacing.

Prop	Type	Default
`as`	`enum`	`div`
`css`	`StitchesCss`	No default value
`variant`	`enum`	`"withDivider"`