Card
Structured content surfaces with semantic sections, elevation, and padding density.
Contract
| Axis | Values | Default |
|---|---|---|
variant | default, outlined, elevated | default |
padding | none, sm, md, lg | md |
| parts | Root, Header, Title, Description, Content, Footer | compound API |
Install
pnpm add @tinyrack/uiScroll inside the code area to read long lines.
Styles
@import '@tinyrack/ui/components/card.css';Scroll inside the code area to read long lines.
Imports
import { TRCard } from '@tinyrack/ui/components/card';Scroll inside the code area to read long lines.
Playground
Usage
Examples
Interior spacing permalink
Choose padding for content density. Use none only when a child must reach the card edge.
Edge-to-edge media permalink
Use padding none for the outer card and put spacing on semantic sections when media must meet the card boundary.
Semantic article and heading permalink
The render prop replaces the default elements without inserting wrapper nodes. Keep heading levels aligned with the surrounding page.
API
| Part | Default element | Notable props |
|---|---|---|
TRCard.Root | div | variant, padding, render |
TRCard.Header | header | native header props |
TRCard.Title | h2 | render for the contextual heading level |
TRCard.Description | p | native paragraph props |
TRCard.Content | div | native div props |
TRCard.Footer | footer | native footer props |
TRCard.Root and TRCard.Title support Base UI's additive render contract without wrapper nodes. Every part merges className, forwards native props and ref, and accepts consumer styles. Keep headings in document order when composing cards; use padding="none" only when a child must reach the card edge.