Components · Events

Event card

The single event "chip" rendered across listings, grids, and dashboard rails. The standard variant leads with a cover band (an accent-gradient fallback when there's no photo), then a body of Major / type badges, the title, a viewer-local date + location line, an optional capacity meter, and a footer that holds a delegated RSVP control. Shown in its three lifecycle states.

EventCard variant="standard" · upcoming / full / past

The 1st card is pinned :hover (shadow + border lift) and its title :hover (accent); hover the others live. Cover uses the accent-gradient fallback (no coverPhotoUrl). The RSVP footer is a delegated slot — kept outside the title link so its buttons stay independently clickable.

variant
featured · standard (shown) · compact · row. The standard card stacks a cover band over a body: badges → title → meta → footer.
cover
The coverPhotoUrl image, or the indigo→accent gradient band (--accent → --accent-strong) so a photo-less event still leads with a real header.
badges
Major (outline accent) · the type chip (icon + label, tone from eventTypeMeta) · an optional status / "Past" chip. Tones resolve to DS Badge good|warn|bad|neutral|accent.
meta
Calendar + viewer-local date range ("Sep 12 – Sep 14, 2026") and a MapPin + truncating location. Same-day ranges collapse to one date.
rsvp slot
Footer child (alias children), divided off by a --color-rule hairline, right-aligned. Presentational — the parent owns the mutation.

Source · ds/events/EventCard.tsx (variant="standard", Cover, EventBadges, EventMeta) · event-meta.ts (type/status tones) · CapacityMeter.tsx · WaitlistBadge.tsx.