Card

Storybook

A card contains summary content and actions about a single subject. It can be used by itself or within a list, and is generally interactive.

Preview

Usage

Cards are surfaces that display content and actions on a single topic. They should be easy to scan for relevant and actionable information. Elements, like text and images, should be placed on them in a way that clearly indicates hierarchy.

Do

To display content and actions on a single topic.

Don’t

Add too many call-to-action elements to the same card. A card should only contain a single primary action.
Inform users about important changes.

Best Practices

It should only contain a single idea that may feature a call-to-action, or the option to navigate to more detailed content.
The content of a card should be concise and offer only a preview of detailed content.
The headings should set clear expectations about the card’s purpose.

Variants and Examples

Base

With Header

With Footer

Content Only

With Header, Footer and Scrollable Content

Vue API

Slots

Name	Description
content	slot for main content
footer	slot for footer content
header	slot for header content

Props

Name	Description	Default
containerClass	class for card container. Type: string\|array\|object	''
contentClass	class for card content. Type: string\|array\|object	''
footerClass	class for card footer. Type: string\|array\|object	''
headerClass	class for card header. Type: string\|array\|object	''
maxHeight	The maximum height of the card content. If given, makes content area scrollable. Type: string	null

Classes

At minimum, card contains body of content. It could also have header with buttons, and footer with buttons/text.

Class	Applies to	Description

Preview

Usage #

Do

Don’t

Best Practices #

Variants and Examples #

Base #

With Header #

With Footer #

Content Only #

With Header, Footer and Scrollable Content #

Vue API #