EVENT CARD: Left-border-accent tw-card for events, appointments, and calendar items
VARIANTS: Default (primary) | Confirmed (green) | Pending (orange) | Cancelled (red, dimmed) | Compact (.event-card-sm)
Used in record sidebars and drawer panels to display upcoming events.
Left border colour indicates event status. Cancelled events are visually dimmed with a strikethrough title.
Uses semantic <time> element for dates. Pairs with existing badge component for status labels.
Base: Primary left-border accent. Contains a <time> date,
event title, and meta line (clock icon + time range + optional status badge).
Card has hover and focus-visible states for interactivity.
<div class="tw-event-card"><time class="tw-event-card-date" datetime="2025-02-24">...</time><div class="tw-event-card-title">...</div><div class="tw-event-card-meta">...</div></div>
Status: Add a status modifier class to change the left border colour and date text colour.
Cancelled events are dimmed and title gets a strikethrough.
Pair with .badge for inline status labels in the meta area.
<div class="tw-event-card tw-event-card-confirmed">...</div>
Actions: Place an .event-card-actions container inside
.event-card-meta for inline action buttons. Actions push to the right via ml-auto.
<div class="tw-event-card-meta">...<div class="tw-event-card-actions"><button class="tw-btn tw-btn-secondary tw-btn-sm">View</button></div></div>
Compact: Tighter spacing and smaller text for drawer panels.
Add .event-card-sm alongside .event-card.
<div class="tw-event-card tw-event-card-sm tw-event-card-confirmed">...</div>
Example: Typical usage inside a record sidebar with a section header and multiple event cards.
Empty: When no upcoming events exist, show a helpful message with an optional action.
No upcoming events scheduled