Card

Storybook Source

Container for related content, metadata, and actions.

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 

import { DtCard } from '@dialpad/dialtone-vue';

Slots

Name
Type
content

slot for main content

footer

slot for footer content

header

slot for header content

Props

Name
Default
Type
contentClass
''
string|array|object

class for card content.

footerClass
''
string|array|object

class for card footer.

headerClass
''
string|array|object

class for card header.

maxHeight
null
string

The maximum height of the card content. If given, makes content area scrollable.

Classes

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

Class
Applies to
Description

Card documentation last updated Friday, September 4, 2026

fix/popover-modal-zindex-scope