Event Card

Calendar event cards with category color bar, time display, location, attendees avatar stack, and RSVP status. Supports compact, all-day, glass, past, and cancelled variants.

Basic Event Card

Preview

Team Standup

Daily sync with the engineering team to review progress and blockers.

Meeting

9:00 AM - 9:30 AM Conference Room A

30 min

Going

<div class="event-card" style="max-width: 360px;">
  <div class="event-card-header">
    <div class="event-card-header-content">
      <h3 class="event-card-title">Team Standup</h3>
      <p class="event-card-description">Daily sync with the engineering team to review progress and blockers.</p>
    </div>
    <div class="event-card-header-actions">
      <span class="event-card-category">Meeting</span>
    </div>
  </div>
  <div class="event-card-content">
    <div class="event-card-meta">
      <span class="event-card-meta-item">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /></svg>
        <span>9:00 AM - 9:30 AM</span>
      </span>
      <span class="event-card-meta-item">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z" /></svg>
        <span>Conference Room A</span>
      </span>
    </div>
  </div>
  <div class="event-card-footer">
    <div class="event-card-footer-start">
      <span class="event-card-duration">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /></svg>
        30 min
      </span>
    </div>
    <div class="event-card-footer-end">
      <span class="event-card-rsvp event-card-rsvp-going">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>
        Going
      </span>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="relative flex flex-col overflow-hidden bg-base-100 rounded-box shadow-sm hover:shadow-md transition" style="max-width: 360px;">
  <div class="absolute left-0 top-0 bottom-0 w-1 bg-primary rounded-l-box"></div>
  <div class="flex items-start justify-between gap-2 pt-3 pr-4 pb-2" style="padding-left: calc(1rem + 8px);">
    <div class="flex-1 min-w-0">
      <h3 class="text-sm font-semibold m-0 truncate">Team Standup</h3>
      <p class="text-xs mt-1 text-base-content/60 line-clamp-2">Daily sync with the engineering team to review progress and blockers.</p>
    </div>
    <span class="inline-flex items-center gap-1 text-xs font-medium rounded-full px-2 py-0.5 bg-primary/12 text-primary">
      <span class="w-1.5 h-1.5 rounded-full bg-primary"></span>
      Meeting
    </span>
  </div>
  <div class="flex flex-col gap-2 pr-4 pb-3" style="padding-left: calc(1rem + 8px);">
    <div class="flex flex-wrap items-center text-xs text-base-content/60 gap-x-4 gap-y-2">
      <span class="inline-flex items-center gap-1">
        <svg class="w-4 h-4 shrink-0 opacity-70" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /></svg>
        9:00 AM - 9:30 AM
      </span>
      <span class="inline-flex items-center gap-1">
        <svg class="w-4 h-4 shrink-0 opacity-70" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z" /></svg>
        Conference Room A
      </span>
    </div>
  </div>
  <div class="flex items-center justify-between gap-2 px-4 py-2 border-t border-base-300" style="padding-left: calc(1rem + 8px);">
    <span class="inline-flex items-center gap-1 text-xs font-medium rounded-full px-2 py-0.5 bg-base-200 text-base-content/60">30 min</span>
    <span class="inline-flex items-center gap-1 text-xs font-medium rounded-full px-2.5 py-1 bg-success/12 text-success">Going</span>
  </div>
</div>

Requires: tw.min.css

// Toggle clickable event cards
document.querySelectorAll('.event-card-clickable').forEach(card => {
  card.addEventListener('click', () => {
    // Navigate to event detail or toggle selection
    console.log('Event clicked:', card.querySelector('.event-card-title')?.textContent);
  });
});

Category Colors

Preview

Sprint Planning

Work

10:00 AM - 11:00 AM

Gym Session

Personal

6:30 PM - 7:30 PM

Client Review

Meeting

2:00 PM - 3:00 PM

Project Deadline

Deadline

11:59 PM

Submit Report

Reminder

5:00 PM

<div class="event-card-grid" style="max-width: 720px;">
  <div class="event-card event-card-work">
    <div class="event-card-header">
      <div class="event-card-header-content">
        <h3 class="event-card-title">Sprint Planning</h3>
      </div>
      <span class="event-card-category">Work</span>
    </div>
    <div class="event-card-content">
      <div class="event-card-meta">
        <span class="event-card-meta-item">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /></svg>
          10:00 AM - 11:00 AM
        </span>
      </div>
    </div>
  </div>

  <div class="event-card event-card-personal">
    <div class="event-card-header">
      <div class="event-card-header-content">
        <h3 class="event-card-title">Gym Session</h3>
      </div>
      <span class="event-card-category">Personal</span>
    </div>
    <div class="event-card-content">
      <div class="event-card-meta">
        <span class="event-card-meta-item">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /></svg>
          6:30 PM - 7:30 PM
        </span>
      </div>
    </div>
  </div>

  <div class="event-card event-card-meeting">
    <div class="event-card-header">
      <div class="event-card-header-content">
        <h3 class="event-card-title">Client Review</h3>
      </div>
      <span class="event-card-category">Meeting</span>
    </div>
    <div class="event-card-content">
      <div class="event-card-meta">
        <span class="event-card-meta-item">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /></svg>
          2:00 PM - 3:00 PM
        </span>
      </div>
    </div>
  </div>

  <div class="event-card event-card-deadline">
    <div class="event-card-header">
      <div class="event-card-header-content">
        <h3 class="event-card-title">Project Deadline</h3>
      </div>
      <span class="event-card-category">Deadline</span>
    </div>
    <div class="event-card-content">
      <div class="event-card-meta">
        <span class="event-card-meta-item">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /></svg>
          11:59 PM
        </span>
      </div>
    </div>
  </div>

  <div class="event-card event-card-reminder">
    <div class="event-card-header">
      <div class="event-card-header-content">
        <h3 class="event-card-title">Submit Report</h3>
      </div>
      <span class="event-card-category">Reminder</span>
    </div>
    <div class="event-card-content">
      <div class="event-card-meta">
        <span class="event-card-meta-item">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /></svg>
          5:00 PM
        </span>
      </div>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="grid gap-4" style="grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); max-width: 720px;">
  <!-- Work (info/blue) -->
  <div class="relative flex flex-col overflow-hidden bg-base-100 rounded-box shadow-sm">
    <div class="absolute left-0 top-0 bottom-0 w-1 bg-info rounded-l-box"></div>
    <div class="flex items-start justify-between gap-2 pt-3 pr-4 pb-2" style="padding-left: calc(1rem + 8px);">
      <h3 class="text-sm font-semibold m-0 truncate">Sprint Planning</h3>
      <span class="text-xs font-medium rounded-full px-2 py-0.5 bg-info/12 text-info">Work</span>
    </div>
    <div class="pr-4 pb-3" style="padding-left: calc(1rem + 8px);">
      <span class="text-xs text-base-content/60">10:00 AM - 11:00 AM</span>
    </div>
  </div>
  <!-- Personal (success/green) -->
  <div class="relative flex flex-col overflow-hidden bg-base-100 rounded-box shadow-sm">
    <div class="absolute left-0 top-0 bottom-0 w-1 bg-success rounded-l-box"></div>
    <div class="flex items-start justify-between gap-2 pt-3 pr-4 pb-2" style="padding-left: calc(1rem + 8px);">
      <h3 class="text-sm font-semibold m-0 truncate">Gym Session</h3>
      <span class="text-xs font-medium rounded-full px-2 py-0.5 bg-success/12 text-success">Personal</span>
    </div>
    <div class="pr-4 pb-3" style="padding-left: calc(1rem + 8px);">
      <span class="text-xs text-base-content/60">6:30 PM - 7:30 PM</span>
    </div>
  </div>
  <!-- Repeat pattern for meeting (purple), deadline (error), reminder (warning) -->
</div>

Requires: tw.min.css

// No JS needed — category colors are CSS-only variants

With Attendees

Preview

Quarterly Review

Review Q4 results and set Q1 goals with the leadership team.

2:00 PM - 4:00 PM Board Room

+5 8 attendees

2 hrs

Going

<div class="event-card event-card-meeting" style="max-width: 360px;">
  <div class="event-card-header">
    <div class="event-card-header-content">
      <h3 class="event-card-title">Quarterly Review</h3>
      <p class="event-card-description">Review Q4 results and set Q1 goals with the leadership team.</p>
    </div>
  </div>
  <div class="event-card-content">
    <div class="event-card-meta">
      <span class="event-card-meta-item">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /></svg>
        <span>2:00 PM - 4:00 PM</span>
      </span>
      <span class="event-card-meta-item">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z" /></svg>
        <span>Board Room</span>
      </span>
    </div>
    <div class="event-card-attendees">
      <div class="event-card-attendees-stack">
        <div class="avatar" style="background-color: var(--color-primary); color: white;">AM</div>
        <div class="avatar" style="background-color: var(--color-success); color: white;">CR</div>
        <div class="avatar" style="background-color: var(--color-warning); color: white;">LG</div>
      </div>
      <span class="event-card-attendees-more">+5</span>
      <span class="event-card-attendees-label">8 attendees</span>
    </div>
  </div>
  <div class="event-card-footer">
    <div class="event-card-footer-start">
      <span class="event-card-duration">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /></svg>
        2 hrs
      </span>
    </div>
    <div class="event-card-footer-end">
      <span class="event-card-rsvp event-card-rsvp-going">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>
        Going
      </span>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="relative flex flex-col overflow-hidden bg-base-100 rounded-box shadow-sm hover:shadow-md transition" style="max-width: 360px;">
  <div class="absolute left-0 top-0 bottom-0 w-1 rounded-l-box" style="background-color: oklch(0.55 0.24 300);"></div>
  <div class="flex items-start justify-between gap-2 pt-3 pr-4 pb-2" style="padding-left: calc(1rem + 8px);">
    <div class="flex-1 min-w-0">
      <h3 class="text-sm font-semibold m-0 truncate">Quarterly Review</h3>
      <p class="text-xs mt-1 text-base-content/60 line-clamp-2">Review Q4 results and set Q1 goals with the leadership team.</p>
    </div>
  </div>
  <div class="flex flex-col gap-2 pr-4 pb-3" style="padding-left: calc(1rem + 8px);">
    <div class="flex flex-wrap items-center text-xs text-base-content/60 gap-x-4 gap-y-2">
      <span class="inline-flex items-center gap-1">
        <svg class="w-4 h-4 shrink-0 opacity-70" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /></svg>
        2:00 PM - 4:00 PM
      </span>
      <span class="inline-flex items-center gap-1">
        <svg class="w-4 h-4 shrink-0 opacity-70" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z" /></svg>
        Board Room
      </span>
    </div>
    <div class="flex items-center gap-2">
      <div class="flex flex-row-reverse">
        <div class="w-7 h-7 rounded-full bg-primary text-white flex items-center justify-center text-[10px] font-semibold border-2 border-base-100 -ml-2 box-content">AM</div>
        <div class="w-7 h-7 rounded-full bg-success text-white flex items-center justify-center text-[10px] font-semibold border-2 border-base-100 -ml-2 box-content">CR</div>
        <div class="w-7 h-7 rounded-full bg-warning text-white flex items-center justify-center text-[10px] font-semibold border-2 border-base-100 box-content">LG</div>
      </div>
      <span class="w-7 h-7 rounded-full bg-base-200 text-base-content/60 flex items-center justify-center text-[10px] font-semibold border-2 border-base-100 -ml-2 box-content">+5</span>
      <span class="text-xs text-base-content/40">8 attendees</span>
    </div>
  </div>
  <div class="flex items-center justify-between gap-2 px-4 py-2 border-t border-base-300" style="padding-left: calc(1rem + 8px);">
    <span class="text-xs font-medium rounded-full px-2 py-0.5 bg-base-200 text-base-content/60">2 hrs</span>
    <span class="text-xs font-medium rounded-full px-2.5 py-1 bg-success/12 text-success">Going</span>
  </div>
</div>

Requires: tw.min.css

// No JS needed — attendees is a CSS-only layout

Compact Variant

Preview

Sprint Planning

10:00 AM

Gym Session

6:30 PM

Client Review

2:00 PM

Project Deadline

11:59 PM

Submit Report

5:00 PM

<div style="max-width: 400px; display: flex; flex-direction: column; gap: 0.5rem;">
  <div class="event-card event-card-compact event-card-work event-card-clickable">
    <div class="event-card-header">
      <h3 class="event-card-title">Sprint Planning</h3>
    </div>
    <span class="event-card-time">10:00 AM</span>
    <div class="event-card-indicators">
      <span class="event-card-indicator event-card-indicator-recurring">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182" /></svg>
      </span>
    </div>
  </div>

  <div class="event-card event-card-compact event-card-personal event-card-clickable">
    <div class="event-card-header">
      <h3 class="event-card-title">Gym Session</h3>
    </div>
    <span class="event-card-time">6:30 PM</span>
  </div>

  <div class="event-card event-card-compact event-card-meeting event-card-clickable">
    <div class="event-card-header">
      <h3 class="event-card-title">Client Review</h3>
    </div>
    <span class="event-card-time">2:00 PM</span>
    <div class="event-card-indicators">
      <span class="event-card-indicator event-card-indicator-reminder">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0" /></svg>
      </span>
    </div>
  </div>

  <div class="event-card event-card-compact event-card-deadline event-card-clickable">
    <div class="event-card-header">
      <h3 class="event-card-title">Project Deadline</h3>
    </div>
    <span class="event-card-time">11:59 PM</span>
  </div>

  <div class="event-card event-card-compact event-card-reminder event-card-clickable">
    <div class="event-card-header">
      <h3 class="event-card-title">Submit Report</h3>
    </div>
    <span class="event-card-time">5:00 PM</span>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col gap-2" style="max-width: 400px;">
  <div class="relative flex flex-row items-center gap-2 px-2 py-1 bg-base-100 border border-base-300 rounded-box cursor-pointer hover:shadow-sm transition" style="padding-left: calc(0.5rem + 6px); min-height: 32px;">
    <div class="absolute left-0 top-0 bottom-0 w-0.5 bg-info rounded-l-box"></div>
    <span class="flex-1 min-w-0 text-xs font-semibold truncate">Sprint Planning</span>
    <span class="text-xs text-base-content/60 whitespace-nowrap">10:00 AM</span>
  </div>
  <div class="relative flex flex-row items-center gap-2 px-2 py-1 bg-base-100 border border-base-300 rounded-box cursor-pointer hover:shadow-sm transition" style="padding-left: calc(0.5rem + 6px); min-height: 32px;">
    <div class="absolute left-0 top-0 bottom-0 w-0.5 bg-success rounded-l-box"></div>
    <span class="flex-1 min-w-0 text-xs font-semibold truncate">Gym Session</span>
    <span class="text-xs text-base-content/60 whitespace-nowrap">6:30 PM</span>
  </div>
  <!-- Repeat for more events... -->
</div>

Requires: tw.min.css

// No JS needed — compact is a CSS-only variant

All-Day Variant

Preview

Company Retreat

Annual team-building retreat at the mountain lodge.

All Day

Mountain Lodge Resort

Office Closed - Holiday

All Day

<div style="max-width: 360px; display: flex; flex-direction: column; gap: 0.75rem;">
  <div class="event-card event-card-all-day event-card-personal">
    <div class="event-card-header">
      <div class="event-card-header-content">
        <h3 class="event-card-title">Company Retreat</h3>
        <p class="event-card-description">Annual team-building retreat at the mountain lodge.</p>
      </div>
      <div class="event-card-header-actions">
        <span class="event-card-all-day-badge">All Day</span>
      </div>
    </div>
    <div class="event-card-content">
      <div class="event-card-meta">
        <span class="event-card-meta-item">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z" /></svg>
          <span>Mountain Lodge Resort</span>
        </span>
      </div>
    </div>
  </div>

  <div class="event-card event-card-all-day event-card-work">
    <div class="event-card-header">
      <div class="event-card-header-content">
        <h3 class="event-card-title">Office Closed - Holiday</h3>
      </div>
      <div class="event-card-header-actions">
        <span class="event-card-all-day-badge">All Day</span>
      </div>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col gap-3" style="max-width: 360px;">
  <div class="relative flex flex-col overflow-hidden rounded-box" style="background-color: color-mix(in oklch, var(--color-success) 8%, var(--color-base-100));">
    <div class="flex items-start justify-between gap-2 p-3 px-4">
      <div class="flex-1 min-w-0">
        <h3 class="text-sm font-semibold m-0 truncate text-success">Company Retreat</h3>
        <p class="text-xs mt-1 text-base-content/60 line-clamp-2">Annual team-building retreat at the mountain lodge.</p>
      </div>
      <span class="text-xs font-medium rounded-full px-2 py-0.5 bg-success text-white">All Day</span>
    </div>
    <div class="px-4 pb-3">
      <span class="inline-flex items-center gap-1 text-xs text-base-content/60">
        <svg class="w-4 h-4 shrink-0 opacity-70" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z" /></svg>
        Mountain Lodge Resort
      </span>
    </div>
  </div>
</div>

Requires: tw.min.css

// No JS needed — all-day is a CSS-only variant

RSVP Status

Preview

Design Review

3:00 PM - 4:00 PM

Going

Team Lunch

12:30 PM - 1:30 PM

Maybe

Birthday Party

7:00 PM - 10:00 PM

Declined

All-Hands Meeting

4:00 PM - 5:00 PM

Pending

<div style="max-width: 360px; display: flex; flex-direction: column; gap: 0.75rem;">
  <div class="event-card event-card-meeting">
    <div class="event-card-header">
      <div class="event-card-header-content">
        <h3 class="event-card-title">Design Review</h3>
      </div>
    </div>
    <div class="event-card-content">
      <div class="event-card-meta">
        <span class="event-card-meta-item">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /></svg>
          <span>3:00 PM - 4:00 PM</span>
        </span>
      </div>
    </div>
    <div class="event-card-footer">
      <div class="event-card-footer-start">
        <span class="event-card-rsvp event-card-rsvp-going">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>
          Going
        </span>
      </div>
    </div>
  </div>

  <div class="event-card event-card-work">
    <div class="event-card-header">
      <div class="event-card-header-content">
        <h3 class="event-card-title">Team Lunch</h3>
      </div>
    </div>
    <div class="event-card-content">
      <div class="event-card-meta">
        <span class="event-card-meta-item">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /></svg>
          <span>12:30 PM - 1:30 PM</span>
        </span>
      </div>
    </div>
    <div class="event-card-footer">
      <div class="event-card-footer-start">
        <span class="event-card-rsvp event-card-rsvp-maybe">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z" /></svg>
          Maybe
        </span>
      </div>
    </div>
  </div>

  <div class="event-card event-card-personal">
    <div class="event-card-header">
      <div class="event-card-header-content">
        <h3 class="event-card-title">Birthday Party</h3>
      </div>
    </div>
    <div class="event-card-content">
      <div class="event-card-meta">
        <span class="event-card-meta-item">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /></svg>
          <span>7:00 PM - 10:00 PM</span>
        </span>
      </div>
    </div>
    <div class="event-card-footer">
      <div class="event-card-footer-start">
        <span class="event-card-rsvp event-card-rsvp-declined">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /></svg>
          Declined
        </span>
      </div>
    </div>
  </div>

  <div class="event-card event-card-deadline">
    <div class="event-card-header">
      <div class="event-card-header-content">
        <h3 class="event-card-title">All-Hands Meeting</h3>
      </div>
    </div>
    <div class="event-card-content">
      <div class="event-card-meta">
        <span class="event-card-meta-item">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /></svg>
          <span>4:00 PM - 5:00 PM</span>
        </span>
      </div>
    </div>
    <div class="event-card-footer">
      <div class="event-card-footer-start">
        <span class="event-card-rsvp event-card-rsvp-pending">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /></svg>
          Pending
        </span>
      </div>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col gap-3" style="max-width: 360px;">
  <!-- Going -->
  <span class="inline-flex items-center gap-1 text-xs font-medium rounded-full px-2.5 py-1 bg-success/12 text-success">
    <svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>
    Going
  </span>
  <!-- Maybe -->
  <span class="inline-flex items-center gap-1 text-xs font-medium rounded-full px-2.5 py-1 bg-warning/12 text-warning">Maybe</span>
  <!-- Declined -->
  <span class="inline-flex items-center gap-1 text-xs font-medium rounded-full px-2.5 py-1 bg-error/12 text-error">Declined</span>
  <!-- Pending -->
  <span class="inline-flex items-center gap-1 text-xs font-medium rounded-full px-2.5 py-1 bg-base-200 text-base-content/60">Pending</span>
</div>

Requires: tw.min.css

// RSVP button toggle
document.querySelectorAll('.event-card-rsvp').forEach(btn => {
  btn.addEventListener('click', (e) => {
    e.stopPropagation();
    const statuses = ['going', 'maybe', 'declined', 'pending'];
    const current = statuses.find(s => btn.classList.contains('event-card-rsvp-' + s));
    // Cycle to next status
    const next = statuses[(statuses.indexOf(current) + 1) % statuses.length];
    btn.classList.remove('event-card-rsvp-' + current);
    btn.classList.add('event-card-rsvp-' + next);
    btn.lastChild.textContent = next.charAt(0).toUpperCase() + next.slice(1);
  });
});

States: Past & Cancelled

Preview

Morning Standup

Yesterday's team standup meeting.

Work

9:00 AM - 9:30 AM Zoom Call

Project Kickoff

This event has been cancelled by the organizer.

Meeting

1:00 PM - 2:00 PM Conference Room B

<div style="max-width: 360px; display: flex; flex-direction: column; gap: 0.75rem;">
  <div class="event-card event-card-past event-card-work">
    <div class="event-card-header">
      <div class="event-card-header-content">
        <h3 class="event-card-title">Morning Standup</h3>
        <p class="event-card-description">Yesterday's team standup meeting.</p>
      </div>
      <div class="event-card-header-actions">
        <span class="event-card-category">Work</span>
      </div>
    </div>
    <div class="event-card-content">
      <div class="event-card-meta">
        <span class="event-card-meta-item">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /></svg>
          <span>9:00 AM - 9:30 AM</span>
        </span>
        <span class="event-card-meta-item">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z" /></svg>
          <span>Zoom Call</span>
        </span>
      </div>
    </div>
  </div>

  <div class="event-card event-card-cancelled event-card-meeting">
    <div class="event-card-header">
      <div class="event-card-header-content">
        <h3 class="event-card-title">Project Kickoff</h3>
        <p class="event-card-description">This event has been cancelled by the organizer.</p>
      </div>
      <div class="event-card-header-actions">
        <span class="event-card-category">Meeting</span>
      </div>
    </div>
    <div class="event-card-content">
      <div class="event-card-meta">
        <span class="event-card-meta-item">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /></svg>
          <span>1:00 PM - 2:00 PM</span>
        </span>
        <span class="event-card-meta-item">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z" /></svg>
          <span>Conference Room B</span>
        </span>
      </div>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col gap-3" style="max-width: 360px;">
  <!-- Past event: reduced opacity -->
  <div class="relative flex flex-col overflow-hidden bg-base-100 rounded-box shadow-sm opacity-60" style="max-width: 360px;">
    <div class="absolute left-0 top-0 bottom-0 w-1 bg-info rounded-l-box opacity-50"></div>
    <div class="pt-3 pr-4 pb-2" style="padding-left: calc(1rem + 8px);">
      <h3 class="text-sm font-semibold m-0 truncate">Morning Standup</h3>
      <p class="text-xs mt-1 text-base-content/60">Yesterday's team standup meeting.</p>
    </div>
  </div>
  <!-- Cancelled event: dimmed with strikethrough title -->
  <div class="relative flex flex-col overflow-hidden bg-base-100 rounded-box shadow-sm opacity-50" style="max-width: 360px;">
    <div class="absolute left-0 top-0 bottom-0 w-1 rounded-l-box" style="background-color: oklch(0.55 0.24 300);"></div>
    <div class="pt-3 pr-4 pb-2" style="padding-left: calc(1rem + 8px);">
      <h3 class="text-sm font-semibold m-0 truncate line-through text-base-content/60">Project Kickoff</h3>
      <p class="text-xs mt-1 text-base-content/60">This event has been cancelled by the organizer.</p>
    </div>
  </div>
</div>

Requires: tw.min.css

// No JS needed — past and cancelled are CSS-only state variants

Glass Variant

Preview

Design Workshop

Collaborative design session with the product team.

Meeting

10:00 AM - 12:00 PM Creative Studio

+2 5 attendees

2 hrs

Going

<div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 2rem; border-radius: 0.75rem;">
  <div class="event-card glass event-card-meeting" style="max-width: 360px; margin: 0 auto;">
    <div class="event-card-header">
      <div class="event-card-header-content">
        <h3 class="event-card-title">Design Workshop</h3>
        <p class="event-card-description">Collaborative design session with the product team.</p>
      </div>
      <div class="event-card-header-actions">
        <span class="event-card-category">Meeting</span>
      </div>
    </div>
    <div class="event-card-content">
      <div class="event-card-meta">
        <span class="event-card-meta-item">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /></svg>
          <span>10:00 AM - 12:00 PM</span>
        </span>
        <span class="event-card-meta-item">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z" /></svg>
          <span>Creative Studio</span>
        </span>
      </div>
      <div class="event-card-attendees">
        <div class="event-card-attendees-stack">
          <div class="avatar" style="background-color: var(--color-primary); color: white;">AM</div>
          <div class="avatar" style="background-color: var(--color-success); color: white;">CR</div>
          <div class="avatar" style="background-color: var(--color-warning); color: white;">LG</div>
        </div>
        <span class="event-card-attendees-more">+2</span>
        <span class="event-card-attendees-label">5 attendees</span>
      </div>
    </div>
    <div class="event-card-footer">
      <div class="event-card-footer-start">
        <span class="event-card-duration">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /></svg>
          2 hrs
        </span>
      </div>
      <div class="event-card-footer-end">
        <span class="event-card-rsvp event-card-rsvp-going">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>
          Going
        </span>
      </div>
    </div>
  </div>
</div>

Requires: ux.min.css

<div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 2rem; border-radius: 0.75rem;">
  <div class="glass relative flex flex-col overflow-hidden rounded-box" style="max-width: 360px; margin: 0 auto; border: 0.5px solid rgba(255,255,255,0.18);">
    <div class="absolute left-0 top-0 bottom-0 w-1 rounded-l-box" style="background-color: oklch(0.55 0.24 300);"></div>
    <div class="flex items-start justify-between gap-2 pt-3 pr-4 pb-2" style="padding-left: calc(1rem + 8px);">
      <div class="flex-1 min-w-0">
        <h3 class="text-sm font-semibold m-0 truncate text-white">Design Workshop</h3>
        <p class="text-xs mt-1 text-white/60 line-clamp-2">Collaborative design session with the product team.</p>
      </div>
    </div>
    <div class="flex flex-col gap-2 pr-4 pb-3" style="padding-left: calc(1rem + 8px);">
      <div class="flex flex-wrap items-center text-xs text-white/60 gap-x-4 gap-y-2">
        <span class="inline-flex items-center gap-1">
          <svg class="w-4 h-4 shrink-0 opacity-70" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /></svg>
          10:00 AM - 12:00 PM
        </span>
        <span class="inline-flex items-center gap-1">
          <svg class="w-4 h-4 shrink-0 opacity-70" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z" /></svg>
          Creative Studio
        </span>
      </div>
    </div>
    <div class="flex items-center justify-between gap-2 px-4 py-2" style="padding-left: calc(1rem + 8px); border-top: 1px solid rgba(255,255,255,0.18);">
      <span class="text-xs font-medium rounded-full px-2 py-0.5 text-white/60" style="background: rgba(255,255,255,0.5);">2 hrs</span>
      <span class="text-xs font-medium rounded-full px-2.5 py-1 bg-success/12 text-success">Going</span>
    </div>
  </div>
</div>

Requires: tw.min.css

// No JS needed — glass is a CSS-only variant

Grid & List Layouts

Preview

Grid Layout

Sprint Planning

Work

10:00 AM - 11:00 AM Room 201

Client Review

Meeting

2:00 PM - 3:00 PM Zoom

Dentist Appointment

Personal

4:30 PM - 5:00 PM

List Layout

Code Review

Work

9:00 AM - 10:00 AM Slack Huddle

Invoice Deadline

Deadline

5:00 PM

Submit Expense Report

Reminder

End of Day

<h4 style="margin: 0 0 0.75rem; font-size: 0.875rem; font-weight: 600;">Grid Layout</h4>
<div class="event-card-grid" style="margin-bottom: 2rem;">
  <div class="event-card event-card-work event-card-clickable">
    <div class="event-card-header">
      <div class="event-card-header-content">
        <h3 class="event-card-title">Sprint Planning</h3>
      </div>
      <span class="event-card-category">Work</span>
    </div>
    <div class="event-card-content">
      <div class="event-card-meta">
        <span class="event-card-meta-item">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /></svg>
          <span>10:00 AM - 11:00 AM</span>
        </span>
        <span class="event-card-meta-item">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z" /></svg>
          <span>Room 201</span>
        </span>
      </div>
    </div>
  </div>

  <div class="event-card event-card-meeting event-card-clickable">
    <div class="event-card-header">
      <div class="event-card-header-content">
        <h3 class="event-card-title">Client Review</h3>
      </div>
      <span class="event-card-category">Meeting</span>
    </div>
    <div class="event-card-content">
      <div class="event-card-meta">
        <span class="event-card-meta-item">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /></svg>
          <span>2:00 PM - 3:00 PM</span>
        </span>
        <span class="event-card-meta-item">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z" /></svg>
          <span>Zoom</span>
        </span>
      </div>
    </div>
  </div>

  <div class="event-card event-card-personal event-card-clickable">
    <div class="event-card-header">
      <div class="event-card-header-content">
        <h3 class="event-card-title">Dentist Appointment</h3>
      </div>
      <span class="event-card-category">Personal</span>
    </div>
    <div class="event-card-content">
      <div class="event-card-meta">
        <span class="event-card-meta-item">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /></svg>
          <span>4:30 PM - 5:00 PM</span>
        </span>
      </div>
    </div>
  </div>
</div>

<h4 style="margin: 0 0 0.75rem; font-size: 0.875rem; font-weight: 600;">List Layout</h4>
<div class="event-card-list" style="max-width: 480px;">
  <div class="event-card event-card-work event-card-clickable">
    <div class="event-card-header">
      <div class="event-card-header-content">
        <h3 class="event-card-title">Code Review</h3>
      </div>
      <span class="event-card-category">Work</span>
    </div>
    <div class="event-card-content">
      <div class="event-card-meta">
        <span class="event-card-meta-item">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /></svg>
          <span>9:00 AM - 10:00 AM</span>
        </span>
        <span class="event-card-meta-item">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z" /></svg>
          <span>Slack Huddle</span>
        </span>
      </div>
    </div>
  </div>

  <div class="event-card event-card-deadline event-card-clickable">
    <div class="event-card-header">
      <div class="event-card-header-content">
        <h3 class="event-card-title">Invoice Deadline</h3>
      </div>
      <span class="event-card-category">Deadline</span>
    </div>
    <div class="event-card-content">
      <div class="event-card-meta">
        <span class="event-card-meta-item">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /></svg>
          <span>5:00 PM</span>
        </span>
      </div>
    </div>
  </div>

  <div class="event-card event-card-reminder event-card-clickable">
    <div class="event-card-header">
      <div class="event-card-header-content">
        <h3 class="event-card-title">Submit Expense Report</h3>
      </div>
      <span class="event-card-category">Reminder</span>
    </div>
    <div class="event-card-content">
      <div class="event-card-meta">
        <span class="event-card-meta-item">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /></svg>
          <span>End of Day</span>
        </span>
      </div>
    </div>
  </div>
</div>

Requires: ux.min.css

<!-- Grid: use CSS grid with auto-fill -->
<div class="grid gap-4" style="grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));">
  <!-- event cards... -->
</div>

<!-- List: use flex column with gap -->
<div class="flex flex-col gap-2" style="max-width: 480px;">
  <!-- event cards... -->
</div>

Requires: tw.min.css

// No JS needed — grid and list are CSS-only layout containers

Classes Reference

Class	Description
`.event-card`	Base card container with left color bar and hover shadow
`.event-card-header`	Top section with title, description, and actions
`.event-card-header-content`	Flex container for title and description (min-width: 0 for truncation)
`.event-card-header-actions`	Right-aligned action area in header (category tag, buttons)
`.event-card-title`	Event title text (truncated, semibold)
`.event-card-description`	Event description (2-line clamp)
`.event-card-content`	Main content area for meta, attendees, etc.
`.event-card-meta`	Flex container for meta items (time, location)
`.event-card-meta-item`	Individual meta entry with icon and text
`.event-card-time`	Time display with colored icon
`.event-card-time-range`	Container for start/end time with separator
`.event-card-time-separator`	Dash or arrow between start and end times
`.event-card-duration`	Duration badge pill (e.g. "30 min", "2 hrs")
`.event-card-location`	Location text with map pin icon
`.event-card-category`	Category tag pill with colored dot
`.event-card-attendees`	Container for avatar stack and label
`.event-card-attendees-stack`	Overlapping avatar row (flex-row-reverse)
`.event-card-attendees-more`	"+N" overflow circle for additional attendees
`.event-card-attendees-label`	Text label showing total attendee count
`.event-card-indicators`	Container for small indicator icons
`.event-card-indicator`	Base indicator circle (20px)
`.event-card-indicator-reminder`	Warning-colored reminder indicator
`.event-card-indicator-recurring`	Info-colored recurring event indicator
`.event-card-footer`	Bottom section with border-top, for duration and RSVP
`.event-card-footer-start`	Left-aligned footer content
`.event-card-footer-end`	Right-aligned footer content
`.event-card-rsvp`	Base RSVP status pill
`.event-card-rsvp-going`	Green "going" RSVP status
`.event-card-rsvp-maybe`	Yellow "maybe" RSVP status
`.event-card-rsvp-declined`	Red "declined" RSVP status
`.event-card-rsvp-pending`	Gray "pending" RSVP status
Category Colors
`.event-card-work`	Blue/info color bar
`.event-card-personal`	Green/success color bar
`.event-card-meeting`	Purple color bar
`.event-card-deadline`	Red/error color bar
`.event-card-reminder`	Yellow/warning color bar
`.event-card-holiday`	Orange color bar
`.event-card-travel`	Cyan color bar
`.event-card-health`	Pink color bar
`.event-card-social`	Indigo color bar
`.event-card-other`	Muted gray color bar
Variants
`.event-card-compact`	Single-row inline variant (32px min-height, hides content/footer)
`.event-card-all-day`	All-day event with tinted background, no color bar, no time
`.event-card-all-day-badge`	"All Day" pill (only visible inside `.event-card-all-day`)
`.event-card-sm`	Small size variant with reduced padding and font sizes
`.event-card-lg`	Large size variant with increased padding and thicker color bar
`.event-card-outline`	Border variant with no shadow (border highlights on hover)
`.event-card.glass`	Glass morphism variant with backdrop blur
States
`.event-card-clickable`	Adds pointer cursor and scale-down on active press
`.event-card-past`	Reduced opacity (60%) for past events
`.event-card-cancelled`	Dimmed (50%) with strikethrough title
Layout Containers
`.event-card-grid`	Responsive auto-fill grid (min 300px columns)
`.event-card-list`	Vertical list with gap between cards