Card

1const DefaultCard = () => (
2  <Card padding="md">Default card with md padding</Card>
3);
4
5render(<DefaultCard />);

1const NoPaddingCard = () => (
2  <Card padding="none">Card with no padding</Card>
3);
4
5render(<NoPaddingCard />);

1const SmallPaddingCard = () => (
2  <Card padding="sm">Card with sm padding</Card>
3);
4
5render(<SmallPaddingCard />);

1const LargePaddingCard = () => (
2  <Card padding="lg">Card with lg padding</Card>
3);
4
5render(<LargePaddingCard />);

1const CardWithHeader = () => (
2  <Card title="Settings" padding="md">
3    Card body content
4  </Card>
5);
6
7render(<CardWithHeader />);

1const CardWithIconAndAction = () => (
2  <Card
3    icon="🧩"
4    title="Block"
5    action={<button onClick={() => {}}>✕</button>}
6    padding="md"
7  >
8    Card body content
9  </Card>
10);
11
12render(<CardWithIconAndAction />);

1const InteractiveCard = () => (
2  <Card padding="md" onSelect={() => {}}>
3    <span>🧩</span>
4    <span>Click me</span>
5  </Card>
6);
7
8render(<InteractiveCard />);

1const CardAsPageLevelSection = () => (
2  <Card title="Settings" headingLevel={2} padding="md">
3    Used directly under a page&rsquo;s h1, with no intervening section — its
4    title takes the h2 slot instead of the h3 default.
5  </Card>
6);
7
8render(<CardAsPageLevelSection />);