takeoff-card

name

takeoff-card

description

Build a Card surface that groups related content and actions with consistent spacing, typography, and theming. This is the Card from @takeoff-ui/react-spar (Takeoff UI / Spar React), a compound component with Card.Header, Card.Title, Card.Description, Card.Body, and Card.Footer parts. Use this skill WHENEVER building, adding, importing, styling, or fixing a Card, content card, panel, tile, summary card, info box, or boxed/bordered content container in a React app that uses @takeoff-ui/react-spar / Takeoff / Spar. Trigger contexts: card layout, header/footer/body sections, card title, dashboard tiles, product/summary cards.

Card — @takeoff-ui/react-spar

Card groups related content and actions in a flexible surface, with compound parts for consistent spacing, typography, and theming.

When to use: Reach for Card whenever you need a bordered surface that bundles a heading, body content, and an optional action footer. Build the structure from its compound parts rather than nesting raw divs.

Setup

Requires the Takeoff provider + token CSS mounted once at the app root (see the takeoff-ui skill or the installation docs). Then import:

import { Card } from '@takeoff-ui/react-spar';

Compound parts

• Card — root surface wrapper.
• Card.Header — top region; styled via headerType.
• Card.Title — heading inside the header; controls semantic level.
• Card.Description — muted descriptive text.
• Card.Body — main content region.
• Card.Footer — bottom region for actions; styled via footerType.

Basic usage

<Card className="w-full max-w-120">
  <Card.Header>
    <Card.Title>Flight Summary</Card.Title>
  </Card.Header>
  <Card.Body>
    <Card.Description>IST to LHR · 18 Jun 2026</Card.Description>
  </Card.Body>
  <Card.Footer>
    <Button appearance="text">Details</Button>
    <Button>Check in</Button>
  </Card.Footer>
</Card>

Button is also exported from @takeoff-ui/react-spar.

Examples

Header types

headerType accepts 'basic' | 'divided' | 'light' | 'dark' | 'primary'.

<Card>
  <Card.Header headerType="divided">
    <Card.Title>Payment</Card.Title>
  </Card.Header>
  <Card.Body>
    <Card.Description>Card ending in 4242</Card.Description>
  </Card.Body>
</Card>

Footer types

footerType accepts 'basic' | 'divided' | 'light'.

import { Button } from '@takeoff-ui/react-spar';

<Card>
  <Card.Header>
    <Card.Title>Delete project?</Card.Title>
  </Card.Header>
  <Card.Body>
    <Card.Description>This action cannot be undone.</Card.Description>
  </Card.Body>
  <Card.Footer footerType="divided">
    <Button variant="neutral" appearance="text">
      Cancel
    </Button>
    <Button>Confirm</Button>
  </Card.Footer>
</Card>;

Title heading level

Card.Title renders a semantic heading; set level (1–6, default 5) for document outline correctness.

<Card>
  <Card.Header>
    <Card.Title level={2}>Account overview</Card.Title>
  </Card.Header>
  <Card.Body>
    <Card.Description>Manage your subscription and billing.</Card.Description>
  </Card.Body>
</Card>

Card with action and badge

import { Badge, Button } from '@takeoff-ui/react-spar';

<Card className="w-full max-w-120">
  <Card.Header>
    <Card.Title>Flight Summary</Card.Title>
  </Card.Header>
  <Card.Body>
    <Card.Description>IST to LHR · 18 Jun 2026</Card.Description>
    <div className="flex items-center justify-between gap-4">
      <div>
        <div className="text-sm text-neutral-500">Departure</div>
        <div className="text-lg font-medium">09:40</div>
      </div>
      <Badge variant="success" appearance="filledLight">
        On time
      </Badge>
    </div>
  </Card.Body>
  <Card.Footer>
    <Button appearance="text">Details</Button>
    <Button>Check in</Button>
  </Card.Footer>
</Card>;

Key props

Prop	Type	Default	Notes
headerType (Card.Header)	'basic' | 'divided' | 'light' | 'dark' | 'primary'	'basic'	Visual style of the header region.
footerType (Card.Footer)	'basic' | 'divided' | 'light'	'basic'	Visual style of the footer region.
level (Card.Title)	1 | 2 | 3 | 4 | 5 | 6	5	Semantic heading level when as is not provided.
classNames (parts)	Partial<Record<"root", string>>	–	Per-slot extra classes.
slotProps (parts)	Partial<Record<"root", React.HTMLAttributes<HTMLElement>>>	–	Per-slot HTML-attribute overrides.
className (Card)	string	–	Classes on the root surface.

Full props, events, data attributes & type definitions: see references/full-docs.md.

Accessibility

• Card renders a neutral <div> by default; it does not create an article, section, landmark, or clickable surface automatically.
• Use Card.Title level={…} to keep the document heading outline correct.
• If the whole card represents a semantic article or section, use the polymorphic as prop and provide an accessible label relationship where appropriate.
• Keep actions as real Button or link elements inside the card. Do not add a click handler to the neutral card root as a substitute for keyboard-accessible controls.

Reference

• Full component docs (Copy page): references/full-docs.md
• Live docs: https://takeoff-v2.app.turkishtechlab.com/docs/components/card
• Source: packages/react-spar/src/components/card/