Event Card
BlockBasic Usage
Loading...
Installation
pnpm add @corew500/uiUsage
import { EventCard } from "@corew500/ui/blocks/event-card"
<EventCard>Content</EventCard>API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title* | string | — | Event title |
| description | string | — | Event description |
| status | enum | — | Event status |
| image | { src: string; alt: string; } | — | Optional hero image (simple img tag) |
| imageSlot | enum | — | Custom image slot for framework-specific images (e.g., Next.js Image) Takes precedence over `image` prop when provided |
| fallbackIcon | enum | — | Fallback icon component to show when no image is provided |
| metadata | EventMetadata | — | Event metadata (date, time, location) |
| format | EventFormat | — | Event format/type (e.g., "Webinar", "In-Person") |
| speakers | EventSpeaker[] | — | List of speakers |
| action | EventAction | — | Primary action button |
| secondaryAction | EventAction | — | Secondary action button |
| customBadge | enum | — | Custom badge content (ReactNode or object with animated option) |
| translations | EventCardTranslations | — | i18n translations object |
| statusLabels | Partial<Record<EventStatus, string>> | — | @deprecated Use translations.status instead i18n labels for status badges |
| variant | enum | default | — |
| orientation | enum | vertical | — |
| layout | enum | stack | — |
Accessibility
Screen Readers
- - Metadata icons use aria-hidden="true" as they are decorative
- Format icon uses aria-hidden="true" when present
Additional
- Action buttons render as proper anchor elements when href provided
- Card structure uses semantic heading for title
- Status badges convey meaning through text, not just color
Localization
Translatable Content
- - Component accepts pre-resolved translated strings
- All user-facing text is customizable via props:
- `title`, `description` - Event header text
- `action.label`, `secondaryAction.label` - Button text
- `translations.status` - Status badge labels
- `translations.metadata` - Metadata field labels
- `translations.speakers` - Speaker section labels and conjunctions
- Deprecated `statusLabels` prop maintained for backward compatibility
Locale-Specific Formatting
- `metadata` - Date/time/location values
- `speakers[].name`, `speakers[].title` - Speaker information
- `format.label` - Event format label