Card

A container component for grouping related content. Supports titles, borders, loading states, and hover effects.

Live Example

Loading component...

Try It

Edit the code below to experiment with the component:

Live Editor

function Demo() {
  return (
    <Card title="Dashboard Overview" bordered>
      This card displays a summary of your dashboard metrics and recent activity.
    </Card>
  );
}

Result

Loading...

Card States

Live Editor

function CardStates() {
  return (
    <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
      <Card title="Default" bordered style={{ width: 250 }}>
        Default card content.
      </Card>
      <Card title="Hoverable" bordered hoverable style={{ width: 250 }}>
        Hover over this card.
      </Card>
      <Card title="Loading" bordered loading style={{ width: 250 }}>
        This content is hidden while loading.
      </Card>
      <Card title="No Border" style={{ width: 250 }}>
        Borderless card.
      </Card>
    </div>
  );
}

Result

Loading...

Props

Prop	Type	Default	Description
padded	boolean	true	Whether the card content has padding.
title	string	"Dashboard Overview"	Title text displayed at the top of the card.
children	string	"This card displays a summary of your dashboard metrics and recent activity."	The content inside the card.
bordered	boolean	true	Whether to show a border around the card.
loading	boolean	false	Whether to show a loading skeleton.
hoverable	boolean	false	Whether the card lifts on hover.

Import

import { Card } from '@superset/components';

---

Improve this page

This documentation is auto-generated from the component's Storybook story. Help improve it by editing the story file.