CARD SYSTEM: Production card component with elevation hierarchy
FEATURES: 3 Elevation Levels | Semantic Variants | Interactive States | Selection Patterns | Media Support
Cards are flexible containers for grouping related content. The production system emphasizes elevation hierarchy (shadow depth) over colored backgrounds. Use elevation to express content priority, semantic colors for feedback, and interactive states for user engagement.
1. Elevation Hierarchy
3-Tier System: Cards use shadow depth to express visual hierarchy. Base cards for inline content, elevated for featured content, prominent for primary actions.
Level 0: Flat
Flat card with no shadow.
Level 1: Base
Default card with subtle shadow. Use for inline content, standard layouts, and default containers.
Level 2: Elevated
Medium shadow for featured content. Use to highlight important sections or secondary emphasis.
Level 3: Prominent
Strong shadow for primary actions. Use for wizard cards, critical decisions, and high-priority content.
<div class="card">...</div><div class="card card-elevated">...</div><div class="card card-prominent">...</div>
2. High-Priority Accent
Left Accent Border: 3px primary-colored accent for urgent or high-priority content. Combines with any elevation level.
Flat + Accent
No shadow with priority accent. Subtle emphasis for important items in dense layouts.
Base + Accent
Standard elevation with priority accent for important notices.
Elevated + Accent
Featured content with priority indicator. Common for actionable items.
Prominent + Accent
Maximum emphasis for critical decisions requiring immediate attention.
<div class="card card-flat card-high-priority">...</div><div class="card card-high-priority">...</div><div class="card card-elevated card-high-priority">...</div>
3. Semantic Background Variants
Feedback Colors: Subtle tinted backgrounds for semantic meaning. Positive (success), Negative (error), Caution (warning). Combine with any elevation level. Box-shadow borders automatically match the semantic color.
With Flat (No Shadow)
Positive Flat
Success feedback with no shadow. Use in dense layouts or nested cards where elevation would be excessive.
Negative Flat
Error feedback with no shadow. Subtle error indication for inline validation or list items.
Caution Flat
Warning feedback with no shadow. Low-emphasis warnings that don't require strong visual separation.
With Base Elevation
Positive Feedback
Success messages, confirmations, completed tasks. Green tint with matching border.
Negative Feedback
Error messages, destructive warnings, failed validations. Red tint with matching border.
Caution Feedback
Warnings, pending states, attention required. Orange tint with matching border.
With Elevated Shadow
Positive + Elevated
Featured success content with medium shadow depth.
Negative + Elevated
Featured error content with medium shadow depth.
Caution + Elevated
Featured warning content with medium shadow depth.
With Prominent Shadow
Positive + Prominent
High-priority success message with strong shadow.
Negative + Prominent
Critical error requiring immediate attention.
Caution + Prominent
High-priority warning with strong emphasis.
<div class="card card-positive card-flat">...</div><div class="card card-positive">...</div><div class="card card-negative card-elevated">...</div><div class="card card-caution card-prominent">...</div>
4. Card Structure & Sections
Flexible Sections: Cards can contain header, body, and footer sections. Use header for titles/actions, body for main content, footer for metadata.
Body Only
Simplest card structure. Just content, no header or footer. Use for standalone content blocks.
Header + Body
Header provides context or section label. Body contains the main content.
Full Structure
Complete card with all sections. Footer shows metadata or secondary actions.
<div class="card"> <div class="card-header">...</div> <div class="card-body">...</div> <div class="card-footer">...</div></div>
5. Typography Variants
Title Sizes: Three title size variants using heading tokens. Small (h4), Default (h3), Large (h2). Choose based on card prominence and hierarchy.
Small Title (H4)
Optional subtitle text
Uses h4 typography tokens. Best for compact cards or secondary information.
Default Title (H3)
Optional subtitle text
Uses h3 typography tokens. Standard title size for most card use cases.
Large Title (H2)
Optional subtitle text
Uses h2 typography tokens. Best for hero cards, wizards, or prominent actions.
<h3 class="card-title-sm">Small Title</h3><h3 class="card-title">Default Title</h3><h2 class="card-title-lg">Large Title</h2><p class="card-subtitle">Subtitle</p>
6. Size Variant
Compact Padding: Use .card-sm for tighter spacing. Reduces padding in all sections while maintaining proportions.
Standard Padding
Header/footer: px-4 py-3. Body: p-4. Default comfortable spacing for most use cases.
Compact Padding
Header/footer: px-3 py-2.5. Body: p-3. Tighter spacing for dense layouts or sidebar cards.
<div class="card card-sm">...</div>
7. Interactive Cards (Clickable)
Hover & Focus States: Add .card-interactive for clickable cards. Base cards elevate on hover, elevated/prominent cards increase shadow strength. Focus ring uses neutral color (not primary).
Interactive Flat
Hover to add subtle shadow. Click or tab to focus. Flat cards elevate to base level on hover.
Interactive Base
Hover to elevate. Click or tab to focus. Base cards lift to elevated shadow level on hover.
Interactive Elevated
Already elevated. Hover increases shadow strength (opacity). Focus adds neutral ring.
Interactive Prominent
Highest elevation. Hover strengthens shadow. Use for primary action cards in wizards.
<div class="card card-flat card-interactive" tabindex="0">...</div><div class="card card-interactive" tabindex="0">...</div>Add tabindex="0" to make cards keyboard-accessible
8. Selectable Cards (Checkbox & Radio)
Selection Patterns: Cards with integrated checkboxes or radio buttons. Control positioned top-left when no header, or prepended to header content. Selection is indicated by control state only (no background change).
Checkbox Selection
Option 1
Checkbox floats in top-left corner when no header is present. Click anywhere to select.
Checkbox prepends to header content using flexbox. Label and control aligned horizontally.
Radio Selection
Choice A
Radio button floats in top-left corner. Use for mutually exclusive options.
Radio button prepended to header. Common pattern for plan selection or configuration choices.
Selection Hitbox
Bigger Hitbox
Checkbox floats in top-left corner when no header is present. Click anywhere to select.
Checkbox prepends to header content using flexbox. Label and control aligned horizontally.
<div class="card card-selectable-checkbox"> <input type="checkbox" id="..."> <label for="..." class="card-selectable-hitbox-full"></label> <div class="card-body">...</div></div>
9. Image Cards (Cover Photos)
Media Component: Full-width cover images using .card-cover. Natural image dimensions (no enforced aspect ratio). Border-radius automatically inherited based on position (first child, last child, or only child).
Melbourne Campus
Beautiful waterfront location with modern facilities and easy transport access.
Sydney Campus
Historic building in the heart of the city. Close to parks, libraries, and cultural venues.
<img src="..." class="card-cover" alt="...">Border-radius inheritance: first-child (top), last-child (bottom), only-child (all corners)
10. Table Card (Tight Body)
Flush Content: Use .card-body.tight for zero-padding body. Perfect for tables or lists that extend to card edges. Automatically adds minimal top/bottom padding when header/footer are absent.
| Name | Status | Date |
|---|---|---|
| Sarah Johnson | Submitted | 2026-01-15 |
| Michael Chen | Under Review | 2026-01-14 |
| Emma Wilson | Approved | 2026-01-13 |
<div class="card-body tight"> <table>...</table></div>
11. Production Example: Wizard Card
Real-World Pattern: Combines prominent elevation, high-priority accent, and large title. Common for multi-step processes, important decisions, or primary action cards.
Start Your Application
Complete your enrollment in three simple steps. We'll guide you through each stage of the process.
<div class="card card-prominent card-high-priority"> <div class="card-body"> <h2 class="card-title-lg">...</h2> ...content... </div></div>
Quick Reference
Base & Elevation: .card-flat | .card | .card-elevated | .card-prominent | .card-high-priority
Sections: .card-header | .card-body | .card-body.tight | .card-footer
Size: .card-sm
Semantic: .card-positive | .card-negative | .card-caution
Typography: .card-title-sm | .card-title | .card-title-lg | .card-subtitle
Interactive: .card-interactive | .card-selectable-checkbox | .card-selectable-radio
Media: .card-cover