HERO: Consumer landing hero surfaces
VARIANTS: Search | Wash

Consolidated entry for the hero patterns. Search is the rounded-pill multi-segment search bar; Wash is the sky-to-white gradient hero background.

PATTERN: Hero Search (consumer-only)
COMPOSES: (standalone — pill built from hero-search-* classes)

56px rounded-pill search bar with N field segments and a circular sky-blue submit button. Supports 5 search verticals: Providers (placeholder), Providers (filled), Courses, Events, Careers. Below the pill: Advanced Filters toggle link + result-count meta row.

Providers — default (placeholder type)

Vertical: Providers. Type of school shows a chevron + placeholder. Where/What/Near/Within show values and tags. Meta row: no active-filter badge.

Type of school
(e.g., Sixth Form School)
Where to study
Greenford High School
What to study
Mathematics A-Level × Further… ×
Near to
KA30 8LD
Search within
Within 10 miles
Advanced Filters 245 potential results · Add filters to refine
<div class="hero-search"><div class="hero-search-pill">...</div><div class="hero-search-meta">...</div></div>

Providers — filled (type has chips)

Vertical: Providers filled. Type of school shows 2 chips (no chevron). Active-filter badge shows count of 3 on the toggle.

Type of school
Sixth Form & Colleges × Secondary ×
Where to study
Greenford High School
What to study
Mathematics A-Level × Further… ×
Near to
KA30 8LD
Search within
Within 10 miles
Advanced Filters 48 potential results
<span class="hero-search-toggle-badge">3</span> — badge appears only when activeFiltersCount > 0

Courses vertical

Vertical: Courses. Type (chips) / What to study (chips) / Where to study (placeholder) / Near to (value) / Search within (value + chevron).

Type of school
Sixth Form & Colleges × Secondary ×
What to study
Mathematics A-Level × Further… ×
Where to study
Search by school name
Near to
KA30 8LD
Search within
Any distance
Advanced Filters 1,204 courses found

Events vertical

Vertical: Events. Type (chips) / What Event (large placeholder) / Near (placeholder) / Search within (value). Four segments only — the "What Event" field spans proportionally wider.

Type of school
Sixth Form & Colleges × Secondary ×
What Event to Join
Search event by provider’s name or key words
Near to
Enter postcode
Search within
Any distance
Advanced Filters 87 upcoming events

Careers vertical

Vertical: Careers. Single field spanning the full pill width (flex 5). Large placeholder. No segmented dividers.

What career interests you
Search by job title or keyword (e.g., doctor)
Advanced Filters 2,400+ career pathways
<div class="hero-search-field tw:flex-[5]"> — single field spans full pill; last child border-right auto-removed.

PATTERN: Consumer Hero Wash (consumer-only)
COMPOSES: Nothing — pure background treatment.

Sky-to-white linear gradient for the hero section of consumer pages. Drop on any container without affecting its sizing or padding.

Default — 240px tall demonstration

Container with .consumer-hero-wash background only — no padding or sizing applied by the pattern.

<div class="consumer-hero-wash">...</div>

Paired with R3c TopNav — chrome-to-content transition

Visualizes the seam where the TopNav strip ends and the wash begins. The wash starts at --tw-color-secondary-100 (the same sky family as the TopNav's #F1FAFE bg) and fades to white at 60%.

Search. Compare. Apply.