Pattern Library
51 production components organized by the problem they solve. Every entry links to a live demo with variants, options, accessibility notes, and code. New entries follow templates/component-page.php.
Quick Start
<?php // In your page file require_once 'includes/components/helpers.php'; // In header.php, add the CSS <link rel="stylesheet" href="/includes/components/components.css">
Jump to: Forms & Input · Feedback & Status · Navigation & Overlays · Content & Display · Live Session & Planner
Forms & Input (12)
Collecting decisions and data: fields, selectors, and the actions that submit them.
Actions, links, form submissions
Text, email, password, textarea fields
Dropdown select fields
Field wrapper with label, helper, error
Email/tag input with add/remove chips
Card-style single-choice grid
Toggle switch list with icons
Switch control for boolean settings
Inline choice chips for AI prompts
Search, dropdown filters, active chips
ws_icon_button — square icon-only action
ws_audio_recorder — voice note capture
Feedback & Status (11)
Telling the user what happened, what is happening, and what state things are in.
Banners, warnings, status messages
Transient notification feedback
Contextual info on hover/focus
Progress bars and loading states
Loading placeholders
Animated outcome panel
Labels, status, categories, counts
Full-width announcements
Placeholders that invite the first action
Workshop Record strip: Designed → Delivered → Synthesized
ws_status — dot + label state indicator
Content & Display (15)
Presenting information: cards, heroes, metrics, and metadata.
Content containers with variants
Content library card for listings
Icon + title + description cards
Full-width hero with title, actions, stats
Page/section titles with subtitles
Bottom-of-page conversion panel
Numbered "How It Works" step grid
Metric displays and stat groups
Icon-prefixed feature lists
User images with initials fallback
Read-only tags for difficulty, topic, metadata
Cross-app promotion card grid
Workshop energy visualization
ws_category — colored category chip
ws_duration — time badge
Live Session & Planner (7)
Domain patterns for building and running workshops: the planner rails and the live-facilitation surfaces.
Type-colored badge (exercise/icebreaker/break)
Activity recommendation with add button
Agenda item card for the planner canvas
Planner left rail: exercise palette
Planner right rail: workshop overview
Right rail: selected-activity detail
ws_audio_player — voice note playback
Documented App Patterns
Compositions that live in app CSS today — the promotion queue for future ws_* components. Each is specified in the linked doc.
| Pattern | Lives in | Documented in |
|---|---|---|
| Poll result card (leader emphasis, LIVE/FINAL chips) | facilitator/css/facilitator.css, css/facilitator/participant.css | motion-system.md (progress, live-pulse) |
| Reaction bubble with data-driven pulse | facilitator/css/facilitator.css | motion-system.md (pop) |
| Confirm dialog (icon tile → title → actions) | facilitator/css/facilitator.css (.confirm-card) | design-system changelog v2.8.10 |
| Coach-mark tour (spotlight + tip) | facilitator/js/modules/onboarding.js | changelog v2.42.0 |
| First-run welcome overlay | facilitator/js/modules/onboarding.js | changelog v2.42.0 |
| Intervention / rescue card | facilitator/css/facilitator.css | Facilitator PRD §4.2E |
File Reference
| File | Purpose |
|---|---|
includes/components/helpers.php | All ws_* helper functions |
includes/components/components.css | All component styles |
includes/components/components.js | Modal focus trap + interactive component JS |
design-system/templates/ | Documentation templates for new entries |