Card Heading
A header row for cards and panels. Combines a title, optional description, leading slot (avatar/icon), and trailing actions.
Molecule
Card · Avatar · Button · Dropdown Menu
When To Use
- Use Card Heading 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
- Maintain heading order and region labels so the surrounding layout stays understandable when styles are stripped away.
- Avoid using visual grouping alone to explain hierarchy; expose the structure semantically as well.
- Make sure drag, resize, and reorder interactions have keyboard alternatives when they are part of the core task.
Key Props / API
Props
title, description, actions, children, className
Example Code
import { CardHeading } from "@hilum/ui"
<div className="rounded-xl border border-ground-100">
<CardHeading title="Job Postings" />
<div className="p-5">{/* card content */}</div>
</div>Card Heading · Basic
Title only
Used as a card's top border section
Job Postings
Card content goes here.
Card Heading · With action
Title + description + CTA
Full heading with an action button
Job Postings
View and manage your current openings.
Card content goes here.
Card Heading · With avatar
Avatar + name + email
Profile card header
TC
Tom Cook
tom@example.com
Card content.
Avatar + dropdown
Card header with contextual menu
TC
Tom Cook
Account manager
Card content.