Detail Card

Expandable cards for displaying detailed information with collapsible sections. Perfect for showing additional context, settings, or grouped information.

Basic Example

Meeting Details

With Subtitle

Project Alpha

Software Development

Default Expanded

Important Notice

This card starts expanded by default, making the content immediately visible. Users can still collapse it if they want.

Non-Collapsible

System Status

This card cannot be collapsed. The content is always visible. Use this for critical information that should always be shown.

With Header Badge

Task: Implement Login

Completed

With Footer

Budget Report

October 2025

Multiple Cards

Today's Events

3 events scheduled

Completed Tasks

5 tasks done today

Props

Name	Type	Default	Description
`title`	`string`	`-`	Card title displayed in the header
`subtitle`	`string`	`undefined`	Optional subtitle text below the title
`defaultExpanded`	`boolean`	`false`	Whether the card starts in expanded state
`collapsible`	`boolean`	`true`	Whether the card can be collapsed/expanded
`header`	`ReactNode`	`undefined`	Custom content in the header (badges, icons, etc.)
`footer`	`ReactNode`	`undefined`	Footer content shown when card is expanded
`children`	`ReactNode`	`-`	Main content of the card body

Usage Guidelines

When to use

•Grouped Information: Display related information that can be collapsed to save space
•Progressive Disclosure: Show summary in header, details in body
•Settings Sections: Organize settings into logical, collapsible groups
•List Items with Details: Show item overview with expandable details

Best practices

•Clear Titles: Use descriptive titles that summarize the card content
•Useful Subtitles: Provide context or metadata in the subtitle
•Start Collapsed: Keep cards collapsed by default unless content is critical
•Header Badges: Use header slot for status indicators or metadata
•Footer Actions: Place actions in footer when content is expanded
•Non-Collapsible Sparingly: Only disable collapsing for critical information

Accessibility

•Header is keyboard accessible (Tab, Enter, Space)
•Proper ARIA attributes for expanded/collapsed state
•Chevron icon indicates collapsible state visually
•Focus indicator on header when using keyboard navigation

Do's and Don'ts

✓ Do

•Use descriptive titles that clearly explain the card content
•Start cards collapsed by default to reduce visual clutter
•Use badges in the header slot for status indicators
•Place actions in the footer when card is expanded

Monthly Budget