Event card variants
Mock data for design iteration. Each variant takes a single EventDTO and reuses shared sub-components for date, venue, category, and save interactions. Press d to toggle dark mode.
Featured hero
Use for a single prominent event at the top of a page. Stacks on mobile; image-left + content-right on desktop.
Live Music at Amigos
Sat, May 9 · 8:00 PM
Weekly live music night at Saskatoon's most beloved cantina, featuring local indie and folk acts. Doors at 8pm, $10 cover.
Default — vertical grid
The general-purpose card. Drops into responsive grids: 1 col → 2 col → 3 col.
Sat, May 9 · 8:00 PM
Weekly live music night at Saskatoon's most beloved cantina, featuring local indie and folk acts. Doors at 8pm, $10 cover.
Wed, May 6 · 8:30 PM
Local comics test their newest material every Wednesday. Sign up at the door from 7:30pm; show starts at 8:30pm.
Sat, May 9 · 9:00 AM
Vendors from across Saskatchewan with seasonal produce, baked goods, and crafts. Rain or shine, every Saturday morning.
Thu, May 7 · 7:00 AM
Free outdoor flow class led by certified instructors. Bring a mat or borrow one of our loaners. Meet at the bandshell.
Sat, May 16 · 10:00 AM
A full day of family fun at the zoo: face painting, petting zoo, food trucks, and live performances on the main lawn. Free admission.
Compact rows
Use in search results, sidebars, or related-events lists. Date pill on the left, thumbnail on the right of it (hidden on the smallest widths).
- MAY9
Live Music at Amigos
8:00 PMMusicAmigos Cantina · 806 Dufferin Ave - MAY6
Open Mic Comedy at The Bassment
8:30 PMComedyThe Bassment · 202 4 Ave N - MAY9
Riversdale Farmers' Market
9:00 AMMarketRiversdale Square · 200 block 20th St W - MAY10
Beginner Pottery Workshop
1:00 PMArtsHandmade House Studio · 710 Broadway Ave
Agenda — events on a single day
Use under a date header to show what's happening on a specific day. Time-prominent, no image.
Loading states
Skeleton variants for each card. Use while fetching.
Featured
Default grid
Compact row + Agenda