Card

Card is a general-purpose container component with a compound component API (Card.Root, Card.Header, Card.Content). It provides consistent surface styling (background, border, border-radius, shadow) for grouping related content.

Import

import { Card } from "@tailor-platform/app-shell";

Basic Usage

<Card.Root>
  <Card.Header title="Order Details" description="Summary of order #1234" />
  <Card.Content>
    <p>Content goes here</p>
  </Card.Content>
</Card.Root>

Parts

Part	Description
Card.Root	Outer container. Renders a <div> with surface styling applied.
Card.Header	Top section with an optional title and description.
Card.Content	Body section with consistent horizontal and bottom padding.

Card.Root Props

Card.Root accepts all standard HTML <div> props.

Prop	Type	Default	Description
className	string	-	Additional CSS classes
children	React.ReactNode	-	Card parts and content

Card.Header Props

Prop	Type	Default	Description
title	React.ReactNode	-	Card title rendered in a <h3>.
description	React.ReactNode	-	Supplementary text rendered below the title.
children	React.ReactNode	-	Additional header content rendered after title/description.
className	string	-	Additional CSS classes.

Card.Content Props

Card.Content accepts all standard HTML <div> props.

Prop	Type	Default	Description
className	string	-	Additional CSS classes
children	React.ReactNode	-	Card body content

Examples

Header only

<Card.Root>
  <Card.Header title="Summary" description="Key metrics for this period" />
</Card.Root>

Content only

<Card.Root>
  <Card.Content>
    <p>No header needed for this card.</p>
  </Card.Content>
</Card.Root>

Custom header content

<Card.Root>
  <Card.Header title="Recent Orders">
    <Button size="sm" variant="outline">
      View all
    </Button>
  </Card.Header>
  <Card.Content>
    <Table>{/* ... */}</Table>
  </Card.Content>
</Card.Root>

Related

• MetricCard — Card variant for KPI / dashboard metric display.
• DescriptionCard — Card variant for structured key-value data.
• ActivityCard — Card variant for timeline activity feeds.