Generic Card

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>

2b. Pinned Accent

Left Accent Gradient: 3px gradient accent (blue → primary) marking a pinned or special card in a list. Use to differentiate one card from the rest of a grid (e.g. a built-in form pinned at the top). Mutually exclusive with .card-high-priority — both occupy the same ::before accent slot.

Flat + Pinned

No shadow with pinned accent. Use in dense grids where the pinned card sits alongside flat campaign cards.

Base + Pinned

Standard elevation with the pinned indicator. Matches the chrome of surrounding base cards while signalling specialness.

Elevated + Pinned

Featured pinned content. Less commonly used since the pin already differentiates the card.

<div class="card card-flat card-pinned">...</div>
<div class="card card-pinned">...</div>
<div class="card card-elevated card-pinned">...</div>

3. Semantic Background Variants

Feedback Colors: Subtle tinted backgrounds for semantic meaning. Positive (success), Negative (error), Caution (warning), Highlight (info). 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.

Highlight Flat

Informational highlight with no shadow. Use for selected items or featured content in dense layouts.

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.

Highlight Feedback

Informational highlights, selected items, featured content. Blue 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.

Highlight + Elevated

Featured informational 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.

Highlight + Prominent

High-priority informational highlight 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>
<div class="card card-highlight">...</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="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.

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="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.

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="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.

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="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="card card-prominent card-high-priority">
  <div class="card-body">
    <h2 class="card-title-lg">...</h2>
    ...content...
  </div>
</div>

Quick Reference

School Card

COMPONENT: School Card (consumer-only)
COMPOSES: internal metrics grid (.school-card-metric*) + badge course chips + verified check + ApplicaaOne wordmark + optional school-photo

Provider listing card. Identity (initials + name + wordmark + address) sits beside a divided 3-up metrics grid (Rating / Recommended / Status), above a "Top Available Courses" chip row. Omit .school-photo for initials-only contexts; add .school-card-header-stack in tight columns where the metrics should wrap.

Default — results list card (910px)

Photo thumbnail + initials chip, name with verified check, ApplicaaOne wordmark, divided 3-up metrics (Rating / Recommended / Status), and a "Top Available Courses" chip row.

Hills Road Sixth Form College

Hills Road, Cambridge CB2 8PE

4.8 Rating 94% Recommended Accepting Now Until Aug 23rd, 2025

Top Available Courses

Further Maths A-Level Physics A-Level Economics A-Level Computer Science A-Level +18 more

Without photo — initials only

Omit .school-photo when no cover image is available (e.g. the map results column). The initials chip carries the identity; an optional status badge can ride alongside the wordmark.

Birchfield College

Online Provider

Online · enrolling UK-wide

4.5 Rating 89% Recommended Accepting Soon From Aug 23rd, 2025

Top Available Courses

Accounting A-Level Business A-Level Law A-Level +23 more

Narrow column — wrap variant

Add .school-card-header-stack in tight columns (e.g. map + filter-rail + results): the metrics wrap below the identity and the row top-aligns.

Cedar Grove Secondary School

Lady Margaret Rd, Southall UB1 2GU

4.2 Rating 86% Recommended Applications Closed (Ended Aug 23rd)

Top Available Courses

Biology A-Level Chemistry A-Level +12 more

Results list — cards stacked

The most common use: multiple cards listed under the results toolbar, separated by a 12px gap.

Greenford High School

Lady Margaret Rd, Southall UB1 2GU

4.5 Rating 89% Recommended Accepting Now Until Aug 23rd, 2025

Top Available Courses

Accounting A-Level Mathematics A-Level Chemistry A-Level +23 more

Maplewood Academy

Lady Margaret Rd, Southall UB1 2GU

4.1 Rating 82% Recommended Applications Closed (Ended Aug 23rd)

Top Available Courses

English Literature A-Level History A-Level +15 more

Course Card

COMPONENT: Course Card (consumer-only)
COMPOSES: ofsted-tag (footer) + badge-eligibility (top-right) + card-divider

Provider course listing card. Default horizontal layout (910×108) for results lists; .course-card-compact (343×185) for narrow grids. Eligibility pill floats top-right (horizontal) or top-left (compact).

Default horizontal — 910px container

HR

A-Level Further Mathematics

Hills Road Sixth Form College · Cambridge CB2 · 2 years

Outstanding Ofsted

Sept 2026 entry EDEXCEL

Eligible

Compact — 343px container

Stacked layout. Eligibility pill at top-left, logo + title row, meta line, footer row at bottom.

Eligible

HR

A-Level Further Mathematics

Hills Road Sixth Form College

Sept 2026 · EDEXCEL · 2 years

Outstanding Ofsted

All Ofsted ratings

HR

A-Level Further Mathematics

Hills Road Sixth Form College · Cambridge CB2 · 2 years

Outstanding Ofsted

Eligible

GS

A-Level Computer Science

Greenford Sixth Form · London W5 · 2 years

Good Ofsted

Eligible

KC

A-Level Physics

Kings College London Maths School · London SE1 · 2 years

Requires Improvement Ofsted

Check eligibility

All eligibility states

HR

A-Level English Literature

Hills Road Sixth Form College · Cambridge CB2 · 2 years

Outstanding Ofsted

Eligible

HR

A-Level Chemistry

Hills Road Sixth Form College · Cambridge CB2 · 2 years

Outstanding Ofsted

Not eligible

HR

A-Level Biology

Hills Road Sixth Form College · Cambridge CB2 · 2 years

Outstanding Ofsted

Check eligibility

Event Listing Card

COMPONENT: Event Listing Card (consumer-only)
COMPOSES: ofsted-tag (footer) + card-divider

Consumer event listing card. Default horizontal (910×198) has a 166×166 image on the right; compact (343×358) uses an 80px cover band at the top

Default horizontal — 910px container

Sat 12 Apr 2026 9:00 – 13:00 In person

Sixth Form Open Day

Hills Road Sixth Form College · Hills Road, Cambridge CB2 8PE

Year 11 students + parents Booking open Free parking

Outstanding Ofsted

HR

Compact — 343px container

Stacked layout. 80px cover band at top; content below.

HR

Sat 12 Apr 9:00 – 13:00

Sixth Form Open Day

Hills Road, Cambridge CB2 8PE

Year 11 + parents Booking open Free parking

Outstanding Ofsted

All Ofsted ratings (horizontal layout)

Sat 12 Apr 2026 9:00 – 13:00

Sixth Form Open Day

Hills Road Sixth Form College · Cambridge CB2 8PE

Year 11 + parents

Outstanding Ofsted

HR

Wed 16 Apr 2026 17:00 – 19:00 Online

Virtual Information Evening

Greenford Sixth Form · Zoom

Year 10 + parents Registration required

Good Ofsted

GS

Career Card

COMPONENT: Career Card (consumer-only)
COMPOSES: industry-tag (title row) + badge-status (bottom row) + caller's avatar/icon

Career listing card. Default horizontal layout (910×108) for results lists; .career-card-compact (343×185) for narrow grids. Career signals (salary, demand, tariff) ride on .badge-status from R3j.

Default horizontal — 910px container

Architect

STEM

Construction & Built Environment · 7-year qualification path · UK-wide

£28K starting / £52K avg Strong demand UCAS Tariff 120-144

Compact — 343px container

Stacked layout. Avatar 48×48; smaller title and meta; pills limited to 2.

Registered Nurse

Healthcare

BSc Nursing or apprenticeship

£27K – £42K (Band 5) Strong demand

All industry sectors

One card per sector — STEM / Healthcare / Arts / Finance / Trades.

Architect

STEM

Construction & Built Environment · 7-year qualification path

£28K starting Strong demand

Registered Nurse

Healthcare

BSc Nursing or 4-year apprenticeship · NHS, hospital, community

£27K – £42K (Band 5) Strong demand Shift work

Graphic Designer

Arts

BA Graphic Design or portfolio-based entry · Agencies, in-house, freelance

£22K starting / £38K avg UCAS Tariff 96-120

Chartered Accountant

Finance

ACA / ACCA training contract (3 years) · Big-4 + mid-tier firms

£30K trainee / £60K qualified Strong demand

Electrician

Trades

Level 3 apprenticeship (4 years) · Domestic, commercial, industrial

£18K apprentice / £40K qualified Strong demand Apprenticeship route

Review Card

COMPONENT: Review Card (consumer-only)
VARIANTS: Default (with initials avatar) + with image avatar

Community review card used in the Search page "Recent Reviews" section and the Detail page school reviews tab. Displays reviewer identity, a recommendation indicator, review body text, and a 2-column stat grid with star ratings. Composes .stars for rating display.

Two-column grid (typical usage)

Layout: Use a 2-column grid (tw:grid tw:grid-cols-2 tw:gap-4) to present pairs of reviews. Avatar can be initials fallback (no <img>) or a real photo.

Y13

Year 13 Student, 2024 3 days ago

Recommended

Greenford High School

Absolutely love this school! The teachers genuinely care about your success and go above and beyond to help. The science department is incredible — we have amazing lab facilities and teachers who encourage independent thinking and research.

Teaching Quality

Student Support

Facilities & Resources

Opportunities & Enrichment

Y12

Year 12 Student, 2024 5 days ago

Recommended

Hills Road Sixth Form College

An exceptional sixth form with outstanding A-level results. The breadth of subjects on offer is remarkable and the pastoral support system is second to none. Uni guidance here is truly world-class — most of my friends got into their first-choice universities.

Teaching Quality

Student Support

Facilities & Resources

Opportunities & Enrichment

<article class="review-card"> ... </article>

Shortlist Slot

COMPONENT: Shortlist Slot (consumer-only)
VARIANTS: shortlist-slot-filled | shortlist-slot-empty

Fixed slot in the "Compare Your Top Choices" sidebar. Filled state shows a school logo, name, and address with a circular × remove button overlapping the top-right corner. Empty state shows a 72px dashed placeholder.

1. Filled state

Filled: White card, 1px line-card border, 8px radius. Logo (48×48) + name (14px bold) + address (12px neutral-500). Circular × button (22×22) overlaps top-right.

Greenford High School Lady Margaret Rd, Southall UB1 2GU

Cedar Grove Secondary School Cedar Road, Ealing W5 3AL

<div class="shortlist-slot"><div class="shortlist-slot-filled"> … </div><button class="shortlist-slot-remove"> × </button></div>

2. Empty state

Empty: 72px height, 8px radius, 2px dashed line-card border, surface-muted bg, neutral-300 medium text label.

Provider 3

<div class="shortlist-slot"><div class="shortlist-slot-empty">Provider 3</div></div>

3. Full "Compare Your Top Choices" sidebar — 2 filled + 3 empty

Composed view: 5-slot column matching the ShortlistSidebar design. Caller wraps slots in a flex-col gap-3.5 layout and adds the heading + CTA button.

Compare Your Top Choices

Ready to decide? Choose up to 5 favourite schools to compare them all in one place.

Greenford High School Lady Margaret Rd

Cedar Grove Secondary Cedar Road, Ealing W5

Provider 3

Provider 4

Provider 5

Clear All Providers

AI Result Card

COMPONENT: AI Result Card (consumer-only)
COMPOSES: card / card-interactive / card-body / card-footer + badge-eligibility + form-check + btn
STATES: Likely eligible · Within reach · Eligible—enquire · Saved · Selected to compare · Culture tags · Compact

The ranked-match card for AI Search results. Built on the generic card (shell + interactive hover + body/footer), it adds the eligibility-led meta row, the ✦ "why it matches" recap, and a footer action bar (Add to compare · Quick Apply). Every card is treated identically — the system explains why each result matches, it does not rank a "best" for the user, so there is no top-match treatment. Save sits as a corner icon. The whole card links to the provider profile.

Default — results list card

Ealing Independent College

Likely eligible 4.6 Outstanding 0.6 mi Outcomes85% A*–B

Matches all three of your subjects — Maths, Physics & Economics — as one clash-free block, and it’s the closest to you in W5.

Add to compare

View profile

<article class="card card-interactive ai-result-card"> … <div class="card-body ai-result-card-body"> … <div class="card-footer ai-result-card-footer">

States — saved · selected to compare · enquire · culture tags

Greenford High School

Likely eligible 4.5 Outstanding 1.2 mi Outcomes82% A*–B

All three subjects in its sixth-form science block, with a dedicated further-maths set.

Add to compare

View profile

Twyford C of E Academy

Within reach 4.3 Good 2.4 mi Outcomes74% A*–B

Offers the full combination; Physics entry asks a grade 6 — a slight stretch on your predicted grades, so worth an enquiry.

Add to compare

View profile

Capel Manor College

Eligible — enquire 4.5 Outstanding 12 mi Entry varies

Requirements vary by course and aren’t all published — a quick enquiry will confirm your options.

Add to compare

View profile

Ealing Independent College

Likely eligible 4.6 Outstanding 0.6 mi Cohort480 students

Small cohort 1:1 tutoring SEND specialist

Smallest year group nearby with named tutors — closest match to “small and supportive”.

Add to compare

View profile

Compact — narrow column (343px)

Footer wraps full-width; meta tightens. Add .ai-result-card-compact.

Greenford High School

Likely 4.5 1.2 mi

All three subjects in its science block.

Compare