Card

Container for grouped content with header, body, and footer sections.

Basic Card

Simple card with content

This is a basic card with some content inside. Cards are used to group related information together.

Variants

Different card variants

Default

Surface background

Outlined

With border

Elevated

With shadow

With Header

Card with title and subtitle

Card Title

This is a subtitle

Card content goes here. The header provides context for the card content.

With Header Action

Card with action button in header

Settings

Manage your preferences

Configure your application settings and preferences here.

With Footer

Card with footer actions

Confirm Action

Are you sure you want to proceed with this action? This cannot be undone.

Hoverable & Clickable

Interactive card

Hoverable

Hover to see effect

Clickable

Click me

User Profile Card

Example of a complete card

JD
John Doe
@johndoe

Product designer and developer. Building beautiful interfaces and experiences.

1,234 followers567 following
PropTypeDefaultDescription
variant'default' | 'outlined' | 'elevated''default'Card variant
padding'none' | 'small' | 'medium' | 'large''medium'Card padding size
hoverablebooleanfalseWhether the card is hoverable
clickablebooleanfalseWhether the card is clickable (adds cursor pointer)

CardHeader Props

PropTypeDefaultDescription
titleReact.ReactNodeundefinedTitle text
subtitleReact.ReactNodeundefinedSubtitle text
actionReact.ReactNodeundefinedRight side action/content

check_circleWhen to use

  • Use to group related content together
  • Use elevated variant for content that needs emphasis
  • Use hoverable/clickable for interactive cards

cancelWhen not to use

  • Don't nest cards within cards
  • Don't use cards for single pieces of information
  • Don't mix different card variants in the same section