Design System/Molecules/Titled Card

Titled Card

Responsive card wrapper with title, subtitle, actions, and mobile-flattened layout.

When To Use

Use Titled Card when you need a reusable molecules pattern instead of rebuilding the structure from primitives.
Start from the simplest example that fits the task, then add decoration only when it clarifies meaning or hierarchy.
Review the examples below to understand the tradeoffs between density, emphasis, and behavior.

When Not To Use

Do not use Titled Card just because it already exists in the catalog; choose the pattern that matches the task, not the most decorative option.
Do not keep layering options onto the pattern when a simpler component or section would be easier to understand and maintain.

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, subtitle, children, actionButtons, icon, contentPadding

Key exports

TitledCard, type TitledCardProps

Example Code

import { Button, TitledCard } from "@hilum/ui"
import { BarChart3, Plus } from "lucide-react"

<TitledCard
  title="Campaign performance"
  subtitle="Live metrics from active acquisition campaigns."
  icon={BarChart3}
  actionButtons={<Button size="sm"><Plus /> New report</Button>}
>
  <div>Card content</div>
</TitledCard>

Panel

Header with actions

Use when a panel needs a consistent title area and responsive action row.

Campaign performance

Live metrics from active acquisition campaigns.

Revenue

$84.2k

Conversion

7.8%

State

Active

Simple

Content card

When there are no actions, TitledCard uses the lighter CardHeading treatment.

Publishing checklist

Required before launch.

SEO metadata completed
Redirects confirmed
Preview approved by the brand team