Card

The Card component provides a flexible UI element for displaying content within a card layout. It is composed of several subcomponents such as Card.Header, Card.Footer, Card.Title, Card.Description, and Card.Content to offer a structured and customizable interface.

Usage

import { Card } from '@harnessio/ui/components'

return (
    <Card.Root variant="default" width="md">
      <Card.Header>
        <Card.Title as="h1">Card Title H1</Card.Title>
        <Card.Description>This is the card description.</Card.Description>
      </Card.Header>
      <Card.Content>
        Card content goes here.
      </Card.Content>
      <Card.Footer>
        Footer text goes here.
      </Card.Footer>
    </Card.Root>
)

Anatomy

All parts of the Card component can be imported and composed as required.

<Card.Root>
  <Card.Header>
    <Card.Title>Card Title</Card.Title>
    <Card.Description>This is the card description.</Card.Description>
  </Card.Header>
  <Card.Content>
    Card content goes here.
  </Card.Content>
  <Card.Footer>
    Footer text goes here.
  </Card.Footer>
</Card.Root>

API Reference

Root

The Root component serves as the main container for all card elements.

Prop	Required	Default	Type
children	true		ReactNode
className	false		string
variant	false	default	'default' | 'plain'
width	false	auto	'auto' | 'full' | 'screen' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | string

Header

The Header component is used to define the header section of the card.

<Card.Header>
  <Card.Title>Card Title</Card.Title>
  <Card.Description>This is the card description.</Card.Description>
</Card.Header>

Prop	Required	Default	Type
children	true		ReactNode
className	false		string

Title

The Title component displays the title of the card.

<Card.Title>Card Title</Card.Title>

Prop	Required	Default	Type
children	true		ReactNode
className	false		string
as	false	h3	'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'

Description

The Description component displays the description of the card.

<Card.Description>This is the card description.</Card.Description>

Prop	Required	Default	Type
children	true		ReactNode
className	false		string

Content

The Content component defines the main content area of the card.

<Card.Content>
  Card content goes here.
</Card.Content>

Prop	Required	Default	Type
children	true		ReactNode
className	false		string

Footer

The Footer component is used to define the footer section of the card.

<Card.Footer>
  Footer text goes here.
</Card.Footer>

Prop	Required	Default	Type
children	true		ReactNode
className	false		string