Card

A container component that groups related content and actions.

Example

Card Title

Card description.

Content

Anatomy

<Card.Root>
  <Card.Header>
    <Card.Title />
    <Card.Description />
  </Card.Header>
  <Card.Content />
  <Card.Footer />
</Card.Root>

Usage

import { Card } from '@ivaldi/ui'
<Card.Root>
  <Card.Header>
    <Card.Title>Card Title</Card.Title>
    <Card.Description>Optional card description</Card.Description>
  </Card.Header>
  <Card.Content>
    <p>Main content area</p>
  </Card.Content>
  <Card.Footer>
    <Button>Action</Button>
  </Card.Footer>
</Card.Root>

Card.Root Props

Root component for the Card system Provides container styles and layout for card content

PropTypeDefault

Card.Content Props

Main content area of the Card Contains the primary content

PropTypeDefault
classNamestring—
childrenReactNode—

Card.Description Props

Description component for the Card Renders secondary text below the title

PropTypeDefault
classNamestring—
childrenReactNode—

Card.Title Props

Title component for the Card Renders as an h3 heading by default

PropTypeDefault