Event
EventCard
Product card for event/ticket products with date overlay, venue, and ticket CTA.
EventCard
Displays an event product with a hero image, date overlay (month + day), virtual badge, event metadata (time, venue, capacity), price, and "Get Tickets" CTA.
Preview
MAR15
Tech Conference 2025
9:00 AM
Convention Center, San Francisco
500 spots available
$149.00
Usage
<CEventCard :product="eventProduct" @get-tickets="handleGetTickets" />
Props
| Prop | Type | Default | Description |
|---|---|---|---|
product | Product | required | Product data |
event | EventProductMeta | — | Override event meta (reads product.event by default) |
ui | Partial<{...}> | — | Per-instance theme overrides |
Events
| Event | Payload | Description |
|---|---|---|
get-tickets | Product | Get tickets button clicked |
Slots
| Slot | Scoped Props | Description |
|---|---|---|
title | { name } | Custom title |
Features
- Date overlay: Month abbreviation + day number badge on the image
- Virtual badge: Blue "Online" badge for virtual events
- Event metadata: Displays time, venue/location, and spots available
- Image aspect: 16:9 hero aspect ratio by default
- Integrated pricing: Renders
CProductPriceinline with the CTA