Card

A composable container for grouped content. Three variants cover static display, interactive surfaces, and highlighted featured content.

Card title

A brief description of the card content.

Main content goes here.

Installation

npm install @bloomkit/react

Usage

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from "@bloomkit/react";
 
<Card variant="default">
  <CardHeader>
    <CardTitle>Getting started</CardTitle>
    <CardDescription>Follow these steps to set up your project.</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Your main content area.</p>
  </CardContent>
  <CardFooter>
    <Button variant="primary">Continue</Button>
  </CardFooter>
</Card>

Sub-components

CardHeader — top padding section, wraps title and description
CardTitle — display-font heading inside the header
CardDescription — secondary caption below the title
CardContent — main padded body area
CardFooter — bottom row with flex alignment for actions

Variants

{/* Static surface */}
<Card variant="default">...</Card>
 
{/* Lifts on hover — use for clickable cards */}
<Card variant="interactive">...</Card>
 
{/* Accent border — use to highlight key content */}
<Card variant="featured">...</Card>

Props

Prop	Type	Default	Description
variant	"default" \| "interactive" \| "featured"	"default"	Visual style of the card surface
className	string	""	Additional Tailwind classes (merged via tailwind-merge)
children	ReactNode	—	Card anatomy sub-components and content