Skip to content
Mizen UI
Docs

IntroductionInstallationCLIStylingFoundationsThemingCompositionIntegrationsAccessibilityFor agents

useCopyToClipboard

AccordionAspect RatioCardCollapsibleFrameGridGroupInlineScroll AreaSectionSeparatorSpacerStack

BlockquoteCitationCodeHeadingKbdLabelLinkTextVisually Hidden

ButtonButton GroupToggleToggle groupToolbar

CalendarCheckboxCheckbox groupComboboxDate pickerDate range pickerDate-Time InputFieldFieldsetFile UploadFormInputInput groupNumber fieldOTP FieldRadio groupSelectSliderSwitchTextareaTime Input

BreadcrumbMenubarNavigation MenuPaginationSegmented ControlStepperTabs

Alert dialogCommandContext MenuDialogDrawerMenuPopoverPreview CardSheetTooltip

AlertBadgeEmptyError StateMeterProgressSkeletonSpinnerStatus dotToast

Activity FeedAvatarAvatar GroupData TableListMetricOverflow ListProperty ListTableTokenTree

Area ChartBar ListCalendar HeatmapCategory ComparisonChart FrameChart LegendChart TooltipDistributionFunnelHeatmapMetric TrendPart-to-WholeProgress RingsRadar ChartRadial BarsSankey ChartScatter ChartScore GaugeTime Series

Diagram

AttachmentCarouselCode BlockLightboxMarkdownThumbnailTimestamp

Agent ThinkingApproval CardComposerConversationInline CitationMessageMessage ScrollerQuestion CardSourcesStreaming TextSuggestionTask ListTerminalTool Call

On this page

  • Preview
  • Usage
  • Anatomy
  • Examples
  • Release health
  • Clickable navigation
  • Recommendations
  • Usage boundaries
  • API reference

Layout

Card

Groups related content and actions in a bordered surface with structural, native-link, and dedicated form-selection compositions.

idle

Usage

import {
	Card,
	CardAction,
	CardContent,
	CardDescription,
	CardFooter,
	CardHeader,
	CardTitle,
} from "@mizen-labs/ui";

Anatomy

The parts and how they nest, taken from the preview above.

<Card>
	<CardHeader>
		<CardTitle />
		<CardDescription />
		<CardAction />
	</CardHeader>
	<CardContent />
	<CardFooter />
</Card>

Examples

Release health

Review production status and the checks required for a release.

Clickable navigation

Render Card as a native anchor when the entire surface navigates to a destination.

Recommendations

GuidancePractice
Do

Use a card for one meaningful resource or task. Keep its title, content, and actions in a clear reading order.

Usage boundaries

GuidanceBoundary
Scope

Spacing can group ordinary content without another card. Keep independent actions outside a card-wide link.

API reference

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

PropTypeDefaultDescription
CardCardProps"div"Root surface for related content. Use render with a native anchor for a navigational card.
CardHeaderCardHeaderProps—Header slot for title, description, and an optional action.
CardTitleCardTitleProps—Primary card heading with system-owned typography.
CardDescriptionCardDescriptionProps—Supporting card copy with secondary content color.
CardActionCardActionProps—Top-end slot for a compact action or status control.
CardPanelCardPanelProps—Main content slot with system-owned card padding.
CardContentCardContentProps—Alias of CardPanel for content-oriented compositions.
CardFooterCardFooterProps—Footer slot for actions and supporting metadata.
PreviousAspect RatioNextCollapsible

Pro plan

$24 per seat, billed monthly
Active

8 of 10 seats used · Renews Nov 30

Deployment pipeline

Production release status and health checks.

Active

Automated integration suites and security scans passed successfully.

Component documentation

Explore design tokens, composition rules, and accessible primitives.

Read zero-choice defaults and slot styling across the system.