When to Use

Use Hero when: Top of landing pages, app homepages, or marketing pages. Provides the primary call-to-action and value proposition.

Don't use when: Interior/detail pages — use Section Header instead. For smaller page intros, use a simple heading + description.

Full Example

Hero with badge, title + accent, subtitle, buttons, and stats.

Workshop Facilitation Platform

Facilitate better
workshops & sprints.

The all-in-one platform for planning, running, and reflecting on remote workshops.

Browse Library Plan a Workshop

50+ Workshops

120+ Exercises

40+ Icebreakers

<?= ws_hero('Facilitate better', 'workshops & sprints.', [
    'badge' => 'Workshop Facilitation Platform',
    'badgeIcon' => 'view_kanban',
    'subtitle' => 'The all-in-one platform for planning, running, and reflecting on remote workshops.',
    'buttons' => [
        ws_button('Browse Library', ['variant' => 'primary', 'icon' => 'explore', 'href' => '/library/workshops/']),
        ws_button('Plan a Workshop', ['variant' => 'secondary', 'icon' => 'calendar_month', 'href' => '/planner/']),
    ],
    'stats' => [
        ['value' => '50+', 'label' => 'Workshops'],
        ['value' => '120+', 'label' => 'Exercises'],
        ['value' => '40+', 'label' => 'Icebreakers'],
    ],
]) ?>

Minimal

Just title + subtitle, no badge or stats.

Welcome to the Coach

Your AI-powered facilitation assistant for live workshop sessions.

Start Session

<?= ws_hero('Welcome to the Coach', '', [
    'subtitle' => 'Your AI-powered facilitation assistant for live workshop sessions.',
    'buttons' => [
        ws_button('Start Session', ['variant' => 'primary', 'icon' => 'play_arrow', 'href' => '#']),
    ],
]) ?>

Title + Accent

The accent text renders in italic with the brand underline.

Exercise Library

Browse our curated
exercise library.

Find the perfect activity for any workshop moment.

Parameters

Parameter	Type	Default	Description
`$title`	string	—	Primary heading text (displayed as `<strong>`)
`$accent`	string	`''`	Italic accent line (brand color + underline)
`badge`	string	`''`	Small label above heading
`badgeIcon`	string	`''`	Material icon in badge
`subtitle`	string	`''`	Description paragraph
`buttons`	array	`[]`	Array of button HTML strings
`stats`	array	`[]`	Array of `['value', 'label']` pairs
`statColor`	string	`#E54D4D`	Color for stat values
`image`	string	`''`	Image URL for hero visual
`imageAlt`	string	`''`	Alt text for image

Anatomy

.hero-badge — Icon + uppercase label

.hero-title + .hero-title-accent — Heading with italic accent

.hero-subtitle — Description paragraph

.hero-actions — Primary + secondary buttons

.hero-stats — Stat values with dividers

.hero-visual — Optional image/illustration

CSS Classes

Hero styles are defined in css/styles.css. The component outputs standard hero classes.

Class	Purpose
`.hero`	Outer wrapper
`.hero-bg-pattern`	Dot pattern overlay
`.hero-container`	Inner flex container (max-width 1120px)
`.hero-content`	Text content column
`.hero-visual`	Image column

Files

File	Purpose
`includes/components/helpers.php`	`ws_hero()` helper function
`includes/components/hero.php`	Hero template
`css/styles.css`	Hero CSS (lines ~1879–2095)