<div class="p-6 max-w-7xl mx-auto space-y-8"> <!-- Header / Introduction --> <div class="callout"> <p class="mb-1 text-sm font-mono"> <strong>CARD SYSTEM:</strong> Production card component with elevation hierarchy<br> <strong>FEATURES:</strong> 3 Elevation Levels | Semantic Variants | Interactive States | Selection Patterns | Media Support </p> <p class="mb-0 text-sm"> Cards are flexible containers for grouping related content. The production system emphasizes <strong>elevation hierarchy</strong> (shadow depth) over colored backgrounds. Use elevation to express content priority, semantic colors for feedback, and interactive states for user engagement. </p> </div> <!-- Section 1: Elevation Levels --> <div class="border-t pt-6"> <h2 class="h4 mb-4">1. Elevation Hierarchy</h2> <div class="callout mb-4"> <p class="mb-0 text-sm"> <strong>3-Tier System:</strong> Cards use shadow depth to express visual hierarchy. Base cards for inline content, elevated for featured content, prominent for primary actions. </p> </div> <div class="grid grid-cols-1 md:grid-cols-4 gap-6"> <!-- Level 0: Flat --> <div class="card card-flat"> <div class="card-body"> <h3 class="card-title">Level 0: Flat</h3> <p class="mb-0">Flat card with no shadow.</p> </div> </div> <!-- Level 1: Base --> <div class="card"> <div class="card-body"> <h3 class="card-title">Level 1: Base</h3> <p class="mb-0">Default card with subtle shadow. Use for inline content, standard layouts, and default containers.</p> </div> </div> <!-- Level 2: Elevated --> <div class="card card-elevated"> <div class="card-body"> <h3 class="card-title">Level 2: Elevated</h3> <p class="mb-0">Medium shadow for featured content. Use to highlight important sections or secondary emphasis.</p> </div> </div> <!-- Level 3: Prominent --> <div class="card card-prominent"> <div class="card-body"> <h3 class="card-title">Level 3: Prominent</h3> <p class="mb-0">Strong shadow for primary actions. Use for wizard cards, critical decisions, and high-priority content.</p> </div> </div> </div> <div class="mt-4 text-sm text-neutral-600"> <code>&lt;div class="card"&gt;...&lt;/div&gt;</code><br> <code>&lt;div class="card card-elevated"&gt;...&lt;/div&gt;</code><br> <code>&lt;div class="card card-prominent"&gt;...&lt;/div&gt;</code> </div> </div> <!-- Section 2: High-Priority Accent --> <div class="border-t pt-6"> <h2 class="h4 mb-4">2. High-Priority Accent</h2> <div class="callout mb-4"> <p class="mb-0 text-sm"> <strong>Left Accent Border:</strong> 3px primary-colored accent for urgent or high-priority content. Combines with any elevation level. </p> </div> <div class="grid grid-cols-1 md:grid-cols-4 gap-6"> <!-- Flat + Accent --> <div class="card card-flat card-high-priority"> <div class="card-body"> <h3 class="card-title">Flat + Accent</h3> <p class="mb-0">No shadow with priority accent. Subtle emphasis for important items in dense layouts.</p> </div> </div> <!-- Base + Accent --> <div class="card card-high-priority"> <div class="card-body"> <h3 class="card-title">Base + Accent</h3> <p class="mb-0">Standard elevation with priority accent for important notices.</p> </div> </div> <!-- Elevated + Accent --> <div class="card card-elevated card-high-priority"> <div class="card-body"> <h3 class="card-title">Elevated + Accent</h3> <p class="mb-0">Featured content with priority indicator. Common for actionable items.</p> </div> </div> <!-- Prominent + Accent --> <div class="card card-prominent card-high-priority"> <div class="card-body"> <h3 class="card-title">Prominent + Accent</h3> <p class="mb-0">Maximum emphasis for critical decisions requiring immediate attention.</p> </div> </div> </div> <div class="mt-4 text-sm text-neutral-600"> <code>&lt;div class="card card-flat card-high-priority"&gt;...&lt;/div&gt;</code><br> <code>&lt;div class="card card-high-priority"&gt;...&lt;/div&gt;</code><br> <code>&lt;div class="card card-elevated card-high-priority"&gt;...&lt;/div&gt;</code> </div> </div> <!-- Section 3: Semantic Variants --> <div class="border-t pt-6"> <h2 class="h4 mb-4">3. Semantic Background Variants</h2> <div class="callout mb-4"> <p class="mb-0 text-sm"> <strong>Feedback Colors:</strong> 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. </p> </div> <!-- Flat Semantic (No Shadow) --> <h3 class="h5 mb-3 mt-4">With Flat (No Shadow)</h3> <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6"> <div class="card card-positive card-flat"> <div class="card-body"> <h3 class="card-title">Positive Flat</h3> <p class="mb-0">Success feedback with no shadow. Use in dense layouts or nested cards where elevation would be excessive.</p> </div> </div> <div class="card card-negative card-flat"> <div class="card-body"> <h3 class="card-title">Negative Flat</h3> <p class="mb-0">Error feedback with no shadow. Subtle error indication for inline validation or list items.</p> </div> </div> <div class="card card-caution card-flat"> <div class="card-body"> <h3 class="card-title">Caution Flat</h3> <p class="mb-0">Warning feedback with no shadow. Low-emphasis warnings that don't require strong visual separation.</p> </div> </div> </div> <!-- Base Elevation Semantic --> <h3 class="h5 mb-3 mt-4">With Base Elevation</h3> <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6"> <div class="card card-positive"> <div class="card-body"> <h3 class="card-title">Positive Feedback</h3> <p class="mb-0">Success messages, confirmations, completed tasks. Green tint with matching border.</p> </div> </div> <div class="card card-negative"> <div class="card-body"> <h3 class="card-title">Negative Feedback</h3> <p class="mb-0">Error messages, destructive warnings, failed validations. Red tint with matching border.</p> </div> </div> <div class="card card-caution"> <div class="card-body"> <h3 class="card-title">Caution Feedback</h3> <p class="mb-0">Warnings, pending states, attention required. Orange tint with matching border.</p> </div> </div> </div> <!-- Elevated Semantic --> <h3 class="h5 mb-3 mt-6">With Elevated Shadow</h3> <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6"> <div class="card card-positive card-elevated"> <div class="card-body"> <h3 class="card-title">Positive + Elevated</h3> <p class="mb-0">Featured success content with medium shadow depth.</p> </div> </div> <div class="card card-negative card-elevated"> <div class="card-body"> <h3 class="card-title">Negative + Elevated</h3> <p class="mb-0">Featured error content with medium shadow depth.</p> </div> </div> <div class="card card-caution card-elevated"> <div class="card-body"> <h3 class="card-title">Caution + Elevated</h3> <p class="mb-0">Featured warning content with medium shadow depth.</p> </div> </div> </div> <!-- Prominent Semantic --> <h3 class="h5 mb-3 mt-6">With Prominent Shadow</h3> <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> <div class="card card-positive card-prominent"> <div class="card-body"> <h3 class="card-title">Positive + Prominent</h3> <p class="mb-0">High-priority success message with strong shadow.</p> </div> </div> <div class="card card-negative card-prominent"> <div class="card-body"> <h3 class="card-title">Negative + Prominent</h3> <p class="mb-0">Critical error requiring immediate attention.</p> </div> </div> <div class="card card-caution card-prominent"> <div class="card-body"> <h3 class="card-title">Caution + Prominent</h3> <p class="mb-0">High-priority warning with strong emphasis.</p> </div> </div> </div> <div class="mt-4 text-sm text-neutral-600"> <code>&lt;div class="card card-positive card-flat"&gt;...&lt;/div&gt;</code><br> <code>&lt;div class="card card-positive"&gt;...&lt;/div&gt;</code><br> <code>&lt;div class="card card-negative card-elevated"&gt;...&lt;/div&gt;</code><br> <code>&lt;div class="card card-caution card-prominent"&gt;...&lt;/div&gt;</code> </div> </div> <!-- Section 4: Card Structure --> <div class="border-t pt-6"> <h2 class="h4 mb-4">4. Card Structure & Sections</h2> <div class="callout mb-4"> <p class="mb-0 text-sm"> <strong>Flexible Sections:</strong> Cards can contain header, body, and footer sections. Use header for titles/actions, body for main content, footer for metadata. </p> </div> <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> <!-- Body Only --> <div class="card"> <div class="card-body"> <h3 class="card-title">Body Only</h3> <p class="mb-0">Simplest card structure. Just content, no header or footer. Use for standalone content blocks.</p> </div> </div> <!-- Header + Body --> <div class="card"> <div class="card-header">Card Header</div> <div class="card-body"> <h3 class="card-title">Header + Body</h3> <p class="mb-0">Header provides context or section label. Body contains the main content.</p> </div> </div> <!-- Header + Body + Footer --> <div class="card"> <div class="card-header">Card Header</div> <div class="card-body"> <h3 class="card-title">Full Structure</h3> <p class="mb-0">Complete card with all sections. Footer shows metadata or secondary actions.</p> </div> <div class="card-footer"> Last updated 2 hours ago </div> </div> </div> <div class="mt-4 text-sm text-neutral-600"> <code>&lt;div class="card"&gt;</code><br> <code>&nbsp;&nbsp;&lt;div class="card-header"&gt;...&lt;/div&gt;</code><br> <code>&nbsp;&nbsp;&lt;div class="card-body"&gt;...&lt;/div&gt;</code><br> <code>&nbsp;&nbsp;&lt;div class="card-footer"&gt;...&lt;/div&gt;</code><br> <code>&lt;/div&gt;</code> </div> </div> <!-- Section 5: Typography Variants --> <div class="border-t pt-6"> <h2 class="h4 mb-4">5. Typography Variants</h2> <div class="callout mb-4"> <p class="mb-0 text-sm"> <strong>Title Sizes:</strong> Three title size variants using heading tokens. Small (h4), Default (h3), Large (h2). Choose based on card prominence and hierarchy. </p> </div> <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> <!-- Small Title --> <div class="card"> <div class="card-body"> <h3 class="card-title-sm">Small Title (H4)</h3> <p class="card-subtitle">Optional subtitle text</p> <p class="mb-0">Uses h4 typography tokens. Best for compact cards or secondary information.</p> </div> </div> <!-- Default Title --> <div class="card"> <div class="card-body"> <h3 class="card-title">Default Title (H3)</h3> <p class="card-subtitle">Optional subtitle text</p> <p class="mb-0">Uses h3 typography tokens. Standard title size for most card use cases.</p> </div> </div> <!-- Large Title --> <div class="card"> <div class="card-body"> <h2 class="card-title-lg">Large Title (H2)</h2> <p class="card-subtitle">Optional subtitle text</p> <p class="mb-0">Uses h2 typography tokens. Best for hero cards, wizards, or prominent actions.</p> </div> </div> </div> <div class="mt-4 text-sm text-neutral-600"> <code>&lt;h3 class="card-title-sm"&gt;Small Title&lt;/h3&gt;</code><br> <code>&lt;h3 class="card-title"&gt;Default Title&lt;/h3&gt;</code><br> <code>&lt;h2 class="card-title-lg"&gt;Large Title&lt;/h2&gt;</code><br> <code>&lt;p class="card-subtitle"&gt;Subtitle&lt;/p&gt;</code> </div> </div> <!-- Section 6: Size Variant --> <div class="border-t pt-6"> <h2 class="h4 mb-4">6. Size Variant</h2> <div class="callout mb-4"> <p class="mb-0 text-sm"> <strong>Compact Padding:</strong> Use <code>.card-sm</code> for tighter spacing. Reduces padding in all sections while maintaining proportions. </p> </div> <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <!-- Default Size --> <div class="card"> <div class="card-header">Default Size Card</div> <div class="card-body"> <h3 class="card-title">Standard Padding</h3> <p class="mb-0">Header/footer: px-4 py-3. Body: p-4. Default comfortable spacing for most use cases.</p> </div> <div class="card-footer"> Footer text </div> </div> <!-- Small Size --> <div class="card card-sm"> <div class="card-header">Small Size Card</div> <div class="card-body"> <h3 class="card-title">Compact Padding</h3> <p class="mb-0">Header/footer: px-3 py-2.5. Body: p-3. Tighter spacing for dense layouts or sidebar cards.</p> </div> <div class="card-footer"> Footer text </div> </div> </div> <div class="mt-4 text-sm text-neutral-600"> <code>&lt;div class="card card-sm"&gt;...&lt;/div&gt;</code> </div> </div> <!-- Section 7: Interactive Cards --> <div class="border-t pt-6"> <h2 class="h4 mb-4">7. Interactive Cards (Clickable)</h2> <div class="callout mb-4"> <p class="mb-0 text-sm"> <strong>Hover & Focus States:</strong> Add <code>.card-interactive</code> for clickable cards. Base cards elevate on hover, elevated/prominent cards increase shadow strength. Focus ring uses neutral color (not primary). </p> </div> <div class="grid grid-cols-1 md:grid-cols-4 gap-6"> <!-- Interactive Flat --> <div class="card card-flat card-interactive" tabindex="0"> <div class="card-body"> <h3 class="card-title">Interactive Flat</h3> <p class="mb-0">Hover to add subtle shadow. Click or tab to focus. Flat cards elevate to base level on hover.</p> </div> </div> <!-- Interactive Base --> <div class="card card-interactive" tabindex="0"> <div class="card-body"> <h3 class="card-title">Interactive Base</h3> <p class="mb-0">Hover to elevate. Click or tab to focus. Base cards lift to elevated shadow level on hover.</p> </div> </div> <!-- Interactive Elevated --> <div class="card card-elevated card-interactive" tabindex="0"> <div class="card-body"> <h3 class="card-title">Interactive Elevated</h3> <p class="mb-0">Already elevated. Hover increases shadow strength (opacity). Focus adds neutral ring.</p> </div> </div> <!-- Interactive Prominent --> <div class="card card-prominent card-interactive" tabindex="0"> <div class="card-body"> <h3 class="card-title">Interactive Prominent</h3> <p class="mb-0">Highest elevation. Hover strengthens shadow. Use for primary action cards in wizards.</p> </div> </div> </div> <div class="mt-4 text-sm text-neutral-600"> <code>&lt;div class="card card-flat card-interactive" tabindex="0"&gt;...&lt;/div&gt;</code><br> <code>&lt;div class="card card-interactive" tabindex="0"&gt;...&lt;/div&gt;</code><br> <small class="text-muted">Add tabindex="0" to make cards keyboard-accessible</small> </div> </div> <!-- Section 8: Selectable Cards --> <div class="border-t pt-6"> <h2 class="h4 mb-4">8. Selectable Cards (Checkbox & Radio)</h2> <div class="callout mb-4"> <p class="mb-0 text-sm"> <strong>Selection Patterns:</strong> 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). </p> </div> <!-- Checkbox Selection --> <h3 class="h5 mb-3 mt-4">Checkbox Selection</h3> <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> <!-- No Header --> <div class="card card-selectable-checkbox"> <input type="checkbox" id="check1"> <div class="card-body"> <h3 class="card-title">Option 1</h3> <p class="mb-0">Checkbox floats in top-left corner when no header is present. Click anywhere to select.</p> </div> </div> <!-- With Header --> <div class="card card-selectable-checkbox"> <div class="card-header"> <input type="checkbox" id="check2"> <span>Featured Option</span> </div> <div class="card-body"> <p class="mb-0">Checkbox prepends to header content using flexbox. Label and control aligned horizontally.</p> </div> </div> </div> <!-- Radio Selection --> <h3 class="h5 mb-3 mt-6">Radio Selection</h3> <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> <!-- No Header --> <div class="card card-selectable-radio"> <input type="radio" name="radioGroup" id="radio1"> <div class="card-body"> <h3 class="card-title">Choice A</h3> <p class="mb-0">Radio button floats in top-left corner. Use for mutually exclusive options.</p> </div> </div> <!-- With Header --> <div class="card card-selectable-radio"> <div class="card-header"> <input type="radio" name="radioGroup" id="radio2"> <span>Choice B</span> </div> <div class="card-body"> <p class="mb-0">Radio button prepended to header. Common pattern for plan selection or configuration choices.</p> </div> </div> </div> <!-- Selection Hitbox --> <h3 class="h5 mb-3 mt-6">Selection Hitbox</h3> <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> <!-- No Header --> <div class="card card-selectable-checkbox"> <input type="checkbox" id="fullcheck1"> <label for="fullcheck1" class="card-selectable-hitbox"></label> <div class="card-body"> <h3 class="card-title">Bigger Hitbox</h3> <p class="mb-0">Checkbox floats in top-left corner when no header is present. Click anywhere to select.</p> </div> </div> <!-- With Header --> <div class="card card-selectable-checkbox"> <div class="card-header"> <input type="checkbox" id="fullcheck2"> <label for="fullcheck2" class="card-selectable-hitbox-full"></label> <span>Full Card Hitbox</span> </div> <div class="card-body"> <p class="mb-0">Checkbox prepends to header content using flexbox. Label and control aligned horizontally.</p> </div> </div> </div> <div class="mt-4 text-sm text-neutral-600"> <code>&lt;div class="card card-selectable-checkbox"&gt;</code><br> <code>&nbsp;&nbsp;&lt;input type="checkbox" id="..."&gt;</code><br> <code>&nbsp;&nbsp;&lt;label for="..." class="card-selectable-hitbox-full"&gt;&lt;/label&gt;</code><br> <code>&nbsp;&nbsp;&lt;div class="card-body"&gt;...&lt;/div&gt;</code><br> <code>&lt;/div&gt;</code> </div> </div> <!-- Section 9: Image Cards --> <div class="border-t pt-6"> <h2 class="h4 mb-4">9. Image Cards (Cover Photos)</h2> <div class="callout mb-4"> <p class="mb-0 text-sm"> <strong>Media Component:</strong> Full-width cover images using <code>.card-cover</code>. Natural image dimensions (no enforced aspect ratio). Border-radius automatically inherited based on position (first child, last child, or only child). </p> </div> <div class="flex flex-col md:flex-row items-start gap-6"> <!-- Image Top --> <div class="card"> <img src="https://images.unsplash.com/photo-1754573061125-b43b1637b541?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTV8fE1lbGJvdXJuZSUyMENhbXB1c3xlbnwwfHwwfHx8MA%3D%3D" alt="Location photo" class="card-cover"> <div class="card-body"> <h3 class="card-title">Melbourne Campus</h3> <p class="mb-3">Beautiful waterfront location with modern facilities and easy transport access.</p> <button class="btn btn-primary btn-sm" type="button">View Details</button> </div> </div> <!-- Image Bottom --> <div class="card"> <div class="card-body"> <h3 class="card-title">Sydney Campus</h3> <p class="mb-3">Historic building in the heart of the city. Close to parks, libraries, and cultural venues.</p> <button class="btn btn-primary btn-sm" type="button">View Details</button> </div> <img src="https://images.unsplash.com/photo-1728206348193-9b5ae74a7d32?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8U3lkbmV5JTIwQ2FtcHVzfGVufDB8fDB8fHww" alt="Location photo" class="card-cover"> </div> <!-- Image Only --> <div class="card"> <img src="https://plus.unsplash.com/premium_photo-1718674393856-760140722005?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OTF8fGFkbWlzc2lvbnxlbnwwfHwwfHx8MA%3D%3D" alt="Full card photo" class="card-cover"> </div> </div> <div class="mt-4 text-sm text-neutral-600"> <code>&lt;img src="..." class="card-cover" alt="..."&gt;</code><br> <small class="text-muted">Border-radius inheritance: first-child (top), last-child (bottom), only-child (all corners)</small> </div> </div> <!-- Section 10: Table Card --> <div class="border-t pt-6"> <h2 class="h4 mb-4">10. Table Card (Tight Body)</h2> <div class="callout mb-4"> <p class="mb-0 text-sm"> <strong>Flush Content:</strong> Use <code>.card-body.tight</code> 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. </p> </div> <div class="card" style="max-width: 600px;"> <div class="card-header"> <div class="flex items-center justify-between"> <span>Recent Applications</span> <button class="btn btn-sm btn-outline-primary" type="button">Export</button> </div> </div> <div class="card-body tight"> <table class="w-full"> <thead class="bg-neutral-100"> <tr> <th class="px-4 py-2 text-left text-sm font-semibold">Name</th> <th class="px-4 py-2 text-left text-sm font-semibold">Status</th> <th class="px-4 py-2 text-left text-sm font-semibold">Date</th> </tr> </thead> <tbody> <tr class="border-t border-neutral-200"> <td class="px-4 py-3 text-sm">Sarah Johnson</td> <td class="px-4 py-3 text-sm">Submitted</td> <td class="px-4 py-3 text-sm">2026-01-15</td> </tr> <tr class="border-t border-neutral-200"> <td class="px-4 py-3 text-sm">Michael Chen</td> <td class="px-4 py-3 text-sm">Under Review</td> <td class="px-4 py-3 text-sm">2026-01-14</td> </tr> <tr class="border-t border-neutral-200"> <td class="px-4 py-3 text-sm">Emma Wilson</td> <td class="px-4 py-3 text-sm">Approved</td> <td class="px-4 py-3 text-sm">2026-01-13</td> </tr> </tbody> </table> </div> </div> <div class="mt-4 text-sm text-neutral-600"> <code>&lt;div class="card-body tight"&gt;</code><br> <code>&nbsp;&nbsp;&lt;table&gt;...&lt;/table&gt;</code><br> <code>&lt;/div&gt;</code> </div> </div> <!-- Section 11: Production Example (Wizard Card) --> <div class="border-t pt-6"> <h2 class="h4 mb-4">11. Production Example: Wizard Card</h2> <div class="callout mb-4"> <p class="mb-0 text-sm"> <strong>Real-World Pattern:</strong> Combines prominent elevation, high-priority accent, and large title. Common for multi-step processes, important decisions, or primary action cards. </p> </div> <div class="card card-prominent card-high-priority" style="max-width: 600px;"> <div class="card-body"> <h2 class="card-title-lg">Start Your Application</h2> <p class="mb-4">Complete your enrollment in three simple steps. We'll guide you through each stage of the process.</p> <div class="space-y-2 mb-4"> <div class="flex items-center gap-2"> <svg class="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <span class="text-sm">Personal information</span> </div> <div class="flex items-center gap-2"> <svg class="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <span class="text-sm">Academic history</span> </div> <div class="flex items-center gap-2"> <div class="w-5 h-5 rounded-full border-2 border-neutral-300"></div> <span class="text-sm text-muted">Supporting documents</span> </div> </div> <div class="flex gap-3"> <button class="btn btn-primary" type="button">Continue Application</button> <button class="btn btn-outline-secondary" type="button">Save for Later</button> </div> </div> </div> <div class="mt-4 text-sm text-neutral-600"> <code>&lt;div class="card card-prominent card-high-priority"&gt;</code><br> <code>&nbsp;&nbsp;&lt;div class="card-body"&gt;</code><br> <code>&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2 class="card-title-lg"&gt;...&lt;/h2&gt;</code><br> <code>&nbsp;&nbsp;&nbsp;&nbsp;...content...</code><br> <code>&nbsp;&nbsp;&lt;/div&gt;</code><br> <code>&lt;/div&gt;</code> </div> </div> <!-- Quick Reference Footer --> <div class="border-t pt-6 mt-8"> <div class="callout"> <p class="mb-1 text-sm font-semibold">Quick Reference</p> <p class="mb-0 text-xs text-neutral-600 font-mono"> <strong>Base & Elevation:</strong> .card-flat | .card | .card-elevated | .card-prominent | .card-high-priority<br> <strong>Sections:</strong> .card-header | .card-body | .card-body.tight | .card-footer<br> <strong>Size:</strong> .card-sm<br> <strong>Semantic:</strong> .card-positive | .card-negative | .card-caution<br> <strong>Typography:</strong> .card-title-sm | .card-title | .card-title-lg | .card-subtitle<br> <strong>Interactive:</strong> .card-interactive | .card-selectable-checkbox | .card-selectable-radio<br> <strong>Media:</strong> .card-cover </p> </div> </div> </div>