Design System Preview

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="tw-card">...</div>
<div class="tw-card tw-card-elevated">...</div>
<div class="tw-card tw-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="tw-card tw-card-flat tw-card-high-priority">...</div>
<div class="tw-card tw-card-high-priority">...</div>
<div class="tw-card tw-card-elevated tw-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="tw-card tw-card-positive tw-card-flat">...</div>
<div class="tw-card tw-card-positive">...</div>
<div class="tw-card tw-card-negative tw-card-elevated">...</div>
<div class="tw-card tw-card-caution tw-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.

Card Header

Header + Body

Header provides context or section label. Body contains the main content.

Card Header

Full Structure

Complete card with all sections. Footer shows metadata or secondary actions.

Last updated 2 hours ago

<div class="tw-card">
  <div class="tw-card-header">...</div>
  <div class="tw-card-body">...</div>
  <div class="tw-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="tw-card-title-sm">Small Title</h3>
<h3 class="tw-card-title">Default Title</h3>
<h2 class="tw-card-title-lg">Large Title</h2>
<p class="tw-card-subtitle">Subtitle</p>

6. Size Variant

Compact Padding: Use .tw-card-sm for tighter spacing. Reduces padding in all sections while maintaining proportions.

Default Size Card

Standard Padding

Header/footer: px-4 py-3. Body: p-4. Default comfortable spacing for most use cases.

Footer text

Small Size Card

Compact Padding

Header/footer: px-3 py-2.5. Body: p-3. Tighter spacing for dense layouts or sidebar cards.

Footer text

<div class="tw-card tw-card-sm">...</div>

7. Interactive Cards (Clickable)

Hover & Focus States: Add .tw-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="tw-card tw-card-flat tw-card-interactive" tabindex="0">...</div>
<div class="tw-card tw-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.

Featured Option

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.

Choice B

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.

Full Card Hitbox

Checkbox prepends to header content using flexbox. Label and control aligned horizontally.

<div class="tw-card tw-card-selectable-checkbox">
  <input type="checkbox" id="...">
  <label for="..." class="tw-card-selectable-hitbox-full"></label>
  <div class="tw-card-body">...</div>
</div>

9. Image Cards (Cover Photos)

Media Component: Full-width cover images using .tw-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="tw-card-cover" alt="...">
Border-radius inheritance: first-child (top), last-child (bottom), only-child (all corners)

10. Table Card (Tight Body)

Flush Content: Use .tw-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.

Recent Applications

Name	Status	Date
Sarah Johnson	Submitted	2026-01-15
Michael Chen	Under Review	2026-01-14
Emma Wilson	Approved	2026-01-13

<div class="tw-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.

Personal information

Academic history

Supporting documents

<div class="tw-card tw-card-prominent tw-card-high-priority">
  <div class="tw-card-body">
    <h2 class="tw-card-title-lg">...</h2>
    ...content...
  </div>
</div>

Quick Reference