Home / Snippets / UI Components /

Event card

Split layout: saturated date column, title block, hybrid tags, RSVP + calendar link.

Apr 24 Sat

CSS Layers & Scope — Berlin meetup

18:30 · Radial Hall · doors 18:00 · talks + hallway track

In personLive captioning

Add to calendar

Widely Supported

uino-js

Quick implementation

.event-card-card {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.ev-date {
  background: linear-gradient(180deg, var(--accent), oklch(0.45 0.12 280));
  color: oklch(0.99 0 0);
}

Prompt this to your LLM

Date column has aria-label for full date string.

Design an event card.

Use .event-card-demo and .event-card-card.
article with .ev-date badge column (month/day/weekday), .ev-main with title, meta line, tags, footer with RSVP button + calendar link.

Return HTML + CSS.

Why this matters in 2026

Community events returned hybrid; cards must encode modality chips without cluttering the title.

The logic

Fixed-width date rail anchors scanning in calendar views; overflow hidden keeps gradient crisp on radius.

Accessibility & performance

Machine-readable dates belong in time elements server-side; the badge is visual shorthand.