Card

The Card component provides a flexible UI element for displaying content within a card layout. It supports various configurations such as sizes, orientations, and the position of the image relative to the content.

Usage

import { Card } from '@harnessio/ui'

// ...

return (
  <Card.Root orientation="vertical" position="start">
    <Card.Image src="/card-image.png" />
    <Card.Title>Card Title</Card.Title>
    <Card.Content>
      Card content goes here
    </Card.Content>
  </Card.Root>
)

Sizes

The Card component supports three sizes: sm, default, and md. The size prop does not actually change the size of the card, but rather the padding and border radius.

Orientation

The Card component supports two orientations: vertical and horizontal. The orientation determines how the card’s content is laid out.

Image Position

The position prop controls where the image is placed within the card layout. It supports two values: start and end.

States

The Card component supports selected and disabled states:

API Reference

Root

The root component for the card.

<Card.Root
  orientation="vertical"              // [OPTIONAL] Orientation of the card
  position="start"                    // [OPTIONAL] Position of the image
  size="default"                      // [OPTIONAL] Size of the card
  selected={false}                    // [OPTIONAL] Whether the card is selected
  disabled={false}                    // [OPTIONAL] Whether the card is disabled
  className="custom-class"            // [OPTIONAL] Custom class name
>
  {/* Card content */}
</Card.Root>

Prop	Required	Default	Type
orientation	false	'vertical'	'vertical' | 'horizontal'
position	false	'start'	'start' | 'end'
size	false	'default'	'sm' | 'default' | 'lg'
selected	false	false	boolean
disabled	false	false	boolean
className	false		string

Image

The image component for the card.

<Card.Image
  src="/path/to/image.jpg"
  alt="Image description"
  width={300}              // [OPTIONAL] Image width
  height={200}             // [OPTIONAL] Image height
  className="custom-class" // [OPTIONAL] Custom class name
/>

Prop	Required	Default	Type
width	false		number | string
height	false		number | string
className	false		string

Title

The title component for the card.

<Card.Title
  as="h3"                  // [OPTIONAL] Heading level (h1-h6)
  className="custom-class" // [OPTIONAL] Custom class name
>
  Card Title
</Card.Title>

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

Content

The content component for the card.

<Card.Content
  className="custom-class" // [OPTIONAL] Custom class name
>
  {/* Card content */}
</Card.Content>

Prop	Required	Default	Type
className	false		string