chrome

<tc-card>

Surface container with optional title/subtitle and named slots for media, header, and footer.

import "@ra9/tan-compose-kit/card"

Props

Name	Type	Default	Description
`title`	`string`	`""`	Header title text. Used by the default header slot when no `header` slot is provided.
`subtitle`	`string`	`""`	Header subtitle text shown below the title.
`padded`	`boolean`	`true`	Whether to apply internal padding. Set to false for full-bleed layouts.
`bordered`	`boolean`	`true`	Outline border around the card.
`elevated`	`boolean`	`false`	Apply a soft drop shadow.

Slots

Slot	Description
`media`	Image or visual at the top, rendered full-bleed (no padding).
`header`	Custom header content; overrides the title/subtitle props when provided.
`(default)`	Body content.
`footer`	Bottom bar — typically action buttons. Renders a divider above when present.

CSS variables

Variable	Default	Description
`--tc-card-surface`	`var(--tc-color-surface, #ffffff)`	Card background.
`--tc-card-ink`	`var(--tc-color-ink, #14171f)`	Body text color.
`--tc-card-soft`	`var(--tc-color-ink-soft, #5a6072)`	Subtitle color.
`--tc-card-rule`	`var(--tc-color-rule, #ece5d3)`	Border + divider color.
`--tc-card-radius`	`var(--tc-radius-lg, 12px)`	Corner radius.
`--tc-card-shadow`	`var(--tc-shadow-md, …)`	Shadow when `elevated`.
`--tc-card-font`	`var(--tc-font-sans, …)`	Font family.
`--tc-card-padding-x`	`var(--tc-space-5, 20px)`	Horizontal padding.
`--tc-card-padding-y`	`var(--tc-space-5, 20px)`	Vertical padding.
`--tc-card-gap`	`var(--tc-space-3, 12px)`	Internal spacing between header / body / footer.

Examples

Basic usage

The migration is at 78%. Two services still need to be cut over before the end of the quarter.

<tc-card title="Project Hyperion" subtitle="Updated 2 hours ago"> The migration is at 78%. Two services still need to be cut over before the end of the quarter. </tc-card>

With actions

Use the footer slot for action buttons. The card automatically draws a divider above the footer when slotted content is present.

<tc-card title="Delete this project?" subtitle="This action is permanent."> All data will be removed in 30 days. <div slot="footer"> <tc-button variant="ghost">Cancel</tc-button> <tc-button variant="danger">Delete</tc-button> </div> </tc-card>

Custom header

Replace the default title/subtitle with your own layout using the header slot.

<tc-card> <div slot="header" style="display:flex; gap:12px; align-items:center;"> <img src="/avatars/carlos.jpg" width="36" height="36" style="border-radius:50%;" alt="" /> <div> <div style="font-weight:600;">Carlos Nah</div> <div style="color:#6b7280; font-size:0.85rem;">2 hours ago</div> </div> </div> Working through the kit's accessibility audit today. </tc-card>

Media

The media slot is full-bleed — no horizontal padding.

<tc-card title="The new dashboard"> <img slot="media" src="/screenshots/dashboard.png" alt="Dashboard preview" /> Coming next week. </tc-card>

Variants

Bordered, no shadow.

Has a soft drop shadow.

Borderless and clean.

Theming

<tc-card style="--tc-card-radius: 4px; --tc-card-padding-x: 28px;" title="Tighter corners, wider padding" >…</tc-card>

Accessibility

The card itself is a <div> — no inherent role. If your card is the only target for a click, wrap it in a real link or button.
The title is plain text, not a heading. If your card needs to land in a document outline, drop a real <h2>/<h3> into the header slot instead.
The media slot does not auto-add alt text — the caller is responsible for accessible images.

← All components