Design System/Atoms/Card

Card

Contained surface for grouping related content. Supports media, stats, and article layouts.

When To Use

  • Use Card when information needs to be scanned quickly and compared across multiple rows, cards, or values.
  • Choose the example that best matches whether the user is browsing, monitoring, or drilling into structured data.
  • Lean on these patterns when you want consistent spacing and hierarchy before tuning the visual treatment.

When Not To Use

  • Do not use a dense data pattern when the primary task is storytelling, onboarding, or one-off explanation.
  • Do not flatten nuanced data into a compact summary card if the user still needs the underlying structure to make a decision.

Accessibility Notes

  • Preserve table semantics for tabular data and avoid flattening structured information into generic divs.
  • Use clear headings, summaries, and labels so assistive technologies can announce the data in context.
  • Do not rely on color alone to communicate trend, status, or state in charts and metric cards.

Key Props / API

Variant props

variant

Key exports

Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter

Example Code

import {
  Card, CardContent, CardDescription,
  CardHeader, CardTitle,
} from "@hilum/ui"
import { Avatar, AvatarFallback } from "@hilum/ui"

<Card className="w-72">
  <CardHeader>
    <CardTitle>Student Profile</CardTitle>
    <CardDescription>
      Manage student information and track progress.
    </CardDescription>
  </CardHeader>
  <CardContent>
    <div className="flex items-center gap-3">
      <Avatar>
        <AvatarFallback className="bg-brand-primary text-white font-semibold">
          SP
// ...trimmed for docs

Card

Default

Card with header, title, description, and content

Student Profile

Manage student information and track progress across all enrolled courses.

SP

Sarah Parker

Grade 10 · Class A

Feature

variant=muted — icon block, category label, body text

Voices

Clone a replica of your own voice, design one from a prompt, or explore 1000s of voices from the library.

Illustration

variant=muted — centered artwork, CardTitle + CardDescription

Provenance

We believe that you should know if audio is AI-generated.

Stats

variant=muted outer + default Card inner panel with mini chart

Success rate

61.5%

87.23%63.04%

Analytics

Easily measure success rates and CX metrics, optimizing flows over time.

Media cover

Card + CardMedia — full-bleed gradient, overlay content via CardContent

ElevenLabs showcases multilingual AI voice technology with NVIDIA ACE at Computex

Article

Card + CardMedia header with badge overlay, CardContent below

Jan 2026

Introducing Scribe v2

Blog

variant=ghost — CardMedia square header, CardTitle + meta in CardContent

Expressive mode

Introducing Expressive Mode for ElevenAgents

ProductFeb 10, 2026