Card

Playground

Installation

pnpm add @tessinaui/ui

Usage

import {
  Card,
  CardMedia,
  CardHeader,
  CardTitle,
  CardDescription,
  CardAction,
  CardContent,
  CardFooter,
  CardDivider,
} from "@tessinaui/ui";

{/* Basic card */}
<Card>
  <CardHeader>
    <CardTitle>Title</CardTitle>
    <CardDescription>Description</CardDescription>
  </CardHeader>
  <CardContent>Content</CardContent>
  <CardFooter>
    <Button variant="primary">Action</Button>
  </CardFooter>
</Card>

{/* Outlined with intent */}
<Card variant="outlined" intent="success">
  <CardHeader>
    <CardTitle>Success</CardTitle>
  </CardHeader>
</Card>

{/* Card with media */}
<Card rounded="lg" className="overflow-hidden w-72">
  <CardMedia src="/image.jpg" alt="Cover" aspectRatio="video" position="top" />
  <CardHeader>
    <CardTitle>Article title</CardTitle>
  </CardHeader>
</Card>

{/* Interactive card */}
<Card interactive onClick={() => navigate('/details')}>
  <CardContent>Click me</CardContent>
</Card>

{/* Horizontal layout — CardBody supplies the column's vertical rhythm.
    Start/end media width defaults to the size-scaled --card-media-w
    (capped at 40% so the text column never starves); override with any
    w-* class. */}
<Card horizontal className="max-w-lg overflow-hidden">
  <CardMedia position="start" className="bg-secondary" />
  <CardBody>
    <CardHeader>
      <CardTitle>Horizontal card</CardTitle>
    </CardHeader>
    <CardContent>Content beside media</CardContent>
  </CardBody>
</Card>

{/* RTL */}
<Card dir="rtl" variant="outlined">
  <CardHeader>
    <CardTitle>عنوان البطاقة</CardTitle>
  </CardHeader>
</Card>

Header action

CardAction claims the trailing slot of the header grid — top-aligned with the title, flipped to the start edge in RTL. Use it for link buttons, badges, or a dismiss IconButton.

<Card>
  <CardHeader>
    <CardTitle>Team members</CardTitle>
    <CardDescription>Invite and manage collaborators.</CardDescription>
    <CardAction>
      <Button variant="ghost" size="xs">View all</Button>
    </CardAction>
  </CardHeader>
  <CardContent>…</CardContent>
</Card>

Edge-to-edge content

The root owns the spacing model — it sets --card-p (edge padding) and --card-gap (section rhythm) per size, while sections pad horizontally only — so any child can bleed to the card edge with -mx-(--card-p) at every size.

<Card>
  <CardHeader>
    <CardTitle>Monthly report</CardTitle>
  </CardHeader>
  <CardContent>
    <div className="-mx-(--card-p) border-y border-border">
      {/* full-bleed table, chart, or list rows */}
    </div>
  </CardContent>
</Card>

Examples

Default

A basic card with header, content, and footer sections.

Variants

Four surface styles — elevated, outlined, filled, and ghost.

Intents

Semantic intent colors applied to the card surface.

Sizes

The size prop scales the card's --card-p / --card-gap spacing rhythm.

With Media

A CardMedia block rounds its top corners to sit flush with the card edge.

Loading

Use CardSkeleton to show a placeholder while content loads.

API Reference

Card Props

CardMedia Props

CardHeader Props

CardAction

A plain div with no extra props — the trailing header slot. Render it inside CardHeader alongside CardTitle / CardDescription; the header grid places it in the end column, top-aligned with the title. Logical grid placement means it lands on the left automatically in RTL.

CardBody

A plain div with no extra props — the content column of a horizontal card (flex min-w-0 flex-1 flex-col gap-(--card-gap)). Wrap CardHeader / CardContent / CardFooter in it next to a start/end CardMedia; it reuses the inherited --card-gap so the column's rhythm matches a vertical card exactly.

CardFooter Props

Variants

Notes

• Spacing model — the root owns two CSS variables per size: --card-p (edge padding, applied as the root's vertical padding) and --card-gap (the flex gap between sections). Sections apply horizontal padding only (px-(--card-p)), so the space between any two sections is always exactly --card-gap — no double padding. Any child can bleed edge-to-edge with -mx-(--card-p), and CardMedia cancels the root's vertical padding the same way. lg / xl automatically tighten --card-p on mobile (max-md) so large cards stay comfortable on phones.
• Machine-readable anatomy — every part exposes a data-slot attribute (card, card-media, card-header, card-title, card-description, card-action, card-content, card-footer, card-divider) for styling hooks and tooling.
• Accessible naming — interactive cards get role="button" and are automatically labelled by their CardTitle via aria-labelledby, so assistive tech announces the card by its visible title.
• CardMedia rounding — use position to control which corners are rounded on the media figure. Set position="start" for the left edge of horizontal cards; it uses logical CSS properties so it flips automatically in RTL.
• Interactive cards — when interactive is set and the card contains nested buttons or links, prefer the stretched-link pattern (absolute-positioned <a>) rather than onClick on the card root to avoid nested interactive element accessibility issues.
• Horizontal layout — set horizontal on the Card root, then use CardMedia with position="start" (or "end") and wrap the remaining sections in CardBody, which restores the card's vertical rhythm inside the column (the root's gap only separates its direct children). Start/end media stretches the card's full height (aspectRatio="auto" default) and its width defaults to the size-scaled --card-media-w (5–12rem from xs to xl, capped at 40% of the card) so it grows proportionally with size — override with any w-* class.
• Width — narrow and wide include w-full with a max-w cap, so they engage even when the card is a flex item; default sizes to context.
• RTL — dir="rtl" is applied to the root and propagates to all children. Logical CSS properties (rounded-s-*, rounded-e-*) ensure media rounding flips correctly.