Family
Events
The Events family — the repeating units of an event listing. The components in the family, each opening its own spec; a live schematic per component, rendered by the WDS schematic engine at its native container span.
01
The Events family
Building outThe Events family, in three groups — each built for the container it sits in. Open a group to browse its variants in light and dark.
Headers & Heros 12C
Full-width page headers and hero blocks — including Event Series heros.
Featured Cards 6C
Media-led cards — a feature image behind a tint, with optional speakers and sponsors.
Simple n' Sidebar 4C
Compact, text-led cards for tight columns, sidebars and dense listings.
02
Modelling notes
- The Live vs Replay badge is a state, not a variant — it doesn't add a concept. Composition (feature image, copy stack, badge, more) is shared across the family; the groups differ by container and emphasis.
- Naming follows the convention: Component | Events / Featured / —, machine id event-card__featured.
- Session Cards (Basic, and a Basic Replay gap) are a sibling family — they get their own page rather than sitting here.
- Each per-card preview is rendered live by the WDS schematic engine — a page schematic with the component highlighted in context (focus + context), shown at its native container span (12C / 6C / 4C) as it typically slots into a page. Generated rather than screenshot, theme-aware. First-pass templates — tune them and the schematic regenerates.
Events — Family Reference
The Events family roster. Each component opens its own spec page; Featured is the worked handoff. Preview containers render live page schematics from the WDS schematic engine — each component highlighted in the context of a page at its native container span (focus + context; first-pass templates).
The Events family roster. Each component opens its own spec page; Featured is the worked handoff. Preview containers render live page schematics from the WDS schematic engine — each component highlighted in the context of a page at its native container span (focus + context; first-pass templates).