Layout

Card

A world-class container component with multiple variants and semantic element support. Designed for grouping related healthcare content like patient information and clinical records.

Variants

Choose the appropriate variant based on content importance and visual hierarchy.

Default

Standard card for general content.

Elevated

Primary background for emphasis.

Outlined

Transparent with border emphasis.

Glass

Frosted glass effect for modern UIs.

Accent

Left border accent for status indication.

Accent Colors

Use accent variant with semantic colors to indicate status in healthcare workflows.

Coverage Verified

Insurance eligibility confirmed for services.

Pending Review

Prior authorization awaiting approval.

Action Required

Missing documentation for claim submission.

With Header and Footer

Use slots for structured card layouts like patient records.

Sarah Johnson

MRN: 2024-001234

Active

DOB: March 15, 1985 (39 years)

(555) 123-4567

Primary: Blue Cross Blue Shield

Interactive Cards

Use for clickable items like selecting patients or appointments. Includes keyboard navigation support.

Dr. Michael Chen

Cardiology • Available Today

Dr. Emily Rodriguez

Family Medicine • Next: Mon 2pm

Padding Options

Adjust padding based on content density and card purpose.

none

Semantic Elements

Use semantic HTML elements for better accessibility and SEO.

as="div"

Default generic container.

as="article"

Self-contained content like patient profiles.

as="section"

Thematic groupings of content.

Props

Prop	Type	Default	Description
`variant`	`'default' \| 'elevated' \| 'outlined' \| 'glass' \| 'accent'`	'default'	Visual style variant
`padding`	`'none' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	'md'	Internal padding
`accentColor`	`'primary' \| 'success' \| 'warning' \| 'error' \| 'info'`	'primary'	Accent color for accent variant
`interactive`	`boolean`	false	Enables hover effects and keyboard navigation
`asButton`	`boolean`	false	Renders as button element
`as`	`'div' \| 'article' \| 'section'`	'div'	Semantic HTML element
`id`	`string`	—	Optional ID for the card
`ariaLabelledby`	`string`	—	ID of labelling element for accessibility
`header`	`Snippet`	—	Header slot content
`footer`	`Snippet`	—	Footer slot content
`onclick`	`(event) => void`	—	Click handler

Healthcare Best Practices

Consistent Layouts: Use the same card structure for patient summaries across the application.
Status Indication: Use accent variants with semantic colors to show eligibility, approval, or alert status.
Keyboard Navigation: Interactive cards include proper focus states and keyboard support.
Semantic Structure: Use as="article" for self-contained patient records.
Accessibility: Use ariaLabelledby to link cards to their titles for screen readers.

Accessibility Notes

Focus Indicators: Interactive cards have visible focus rings for keyboard navigation.
Semantic HTML: Use as prop to render appropriate elements.
Button Role: Interactive cards have role="button" and tabindex="0".
Reduced Motion: Hover animations respect prefers-reduced-motion preference.