Card

Container for grouped content

UI PrimitiveLayout

Overview

Card is a compound component made up of seven named sub-components. Compose them freely to build content cards, settings panels, stat blocks, or any container that benefits from structured sections. All sub-components extend the native <div> element and accept className for overrides.

Usage

import { Card } from "@leanicon/web-builder-library";

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

Variants

Basic card

Plan overview
Your current subscription details.

Pro — $49 / month

Card with action in header

CardAction anchors to the top-right corner of CardHeader using CSS grid. Use it for a button, badge, or dropdown trigger.

Team members
Manage access for your organization.

Member list goes here.

Delete account
This action is permanent and cannot be undone.

All your data will be removed within 30 days.

Minimal — content only

A simple card with no header or footer.

Sub-component summary

Component

Role

Card

Root container — rounded border, shadow, vertical flex gap

Card.Header

Top region with CSS grid layout supporting an optional action

Card.Title

Semibold heading inside the header

Card.Description

Muted subtitle beneath the title

Card.Action

Top-right slot inside Card.Header (grid-positioned)

Card.Content

Main content area with horizontal padding

Card.Footer

Bottom region — flex row, useful for action buttons

Notes

  • Card.Action only positions correctly when placed as a direct child of Card.Header. Do not nest it deeper.
  • Dark mode is supported automatically through bg-card and text-card-foreground tokens.
  • Add border-b to CardHeader or border-t to CardFooter to get auto-padded dividers ([.border-b]:pb-6 / [.border-t]:pt-6 are built in).