Open demo

CSS code

HTML 
<article class="ev-card">
  <div class="ev-head">
    <time class="ev-date" datetime="09-18"><span class="ev-m">Sep</span><span class="ev-d">18</span></time>
    <div><span class="ev-tag">Workshop</span>
      <h2 class="ev-title">Designing interfaces that survive real data</h2></div>
  </div>
  <ul class="ev-meta">
    <li><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg> 14:00 – 17:30 BST</li>
    <li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 21s7-5.3 7-11a7 7 0 10-14 0c0 5.7 7 11 7 11z"/><circle cx="12" cy="10" r="2.5"/></svg> Shoreditch Studios, London</li>
    <li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h16M4 12h16M4 17h10"/></svg> 9 of 40 seats left</li>
  </ul>
  <div class="ev-foot">
    <div class="ev-who">
      <span class="ev-stack" aria-hidden="true"><i style="background:#4f46e5">AK</i><i style="background:#0369a1">RM</i><i style="background:#e11d48">TP</i><i style="background:#64748b">+28</i></span>
      <span class="ev-going"><span aria-hidden="true">going</span><span class="ev-sr">31 people going</span></span>
    </div>
    <button class="ev-btn" type="button">Register<span class="ev-sr"> for Designing interfaces that survive real data</span></button>
  </div>
</article>
CSS 
/* Event card: calendar date block, title and type tag, time/venue/seats rows with inline SVG icons,
   an overlapping attendee stack and a Register button. */
.ev-card,.ev-card *,.ev-card *::before,.ev-card *::after{box-sizing:border-box}
.ev-card{width:330px;max-width:100%;padding:22px;display:flex;flex-direction:column;gap:16px;background:#fff;color:#101828;border:1px solid #e9ecf1;border-radius:16px;transition:box-shadow .18s,transform .18s}
.ev-card:hover{transform:translateY(-4px);box-shadow:0 18px 36px -16px rgba(16,24,40,.16)}
.ev-head{display:flex;gap:16px}
.ev-date{width:64px;flex-shrink:0;border-radius:12px;overflow:hidden;text-align:center;border:1px solid #e9ecf1}
.ev-m{display:block;background:#4f46e5;color:#fff;font-size:.7rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;padding:5px 0}
.ev-d{display:block;font-size:1.5rem;font-weight:800;padding:7px 0;letter-spacing:-.02em}
.ev-tag{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#0369a1;background:#e0f2fe;padding:3px 9px;border-radius:999px}
.ev-title{font-size:1.05rem;letter-spacing:-.01em;line-height:1.35;margin:8px 0 6px}
.ev-meta{display:flex;flex-direction:column;gap:9px;margin:0;padding:0;list-style:none;font-size:.86rem;color:#667085}
.ev-meta li{display:flex;align-items:center;gap:9px}
.ev-meta svg{display:block;width:16px;height:16px;stroke:#98a2b3;fill:none;stroke-width:1.9;flex-shrink:0}
.ev-foot{display:flex;align-items:center;justify-content:space-between;padding-top:16px;border-top:1px solid #f0f2f6}
.ev-who,.ev-stack{display:flex;align-items:center}
.ev-stack i{width:29px;height:29px;border-radius:50%;border:2px solid #fff;margin-left:-9px;display:grid;place-items:center;font-style:normal;font-size:.7rem;font-weight:800;color:#fff}
.ev-stack i:first-child{margin-left:0}
.ev-going{font-size:.79rem;color:#667085;margin-left:10px}
.ev-btn{border:0;background:#4f46e5;color:#fff;font:inherit;font-size:.85rem;font-weight:700;padding:9px 16px;border-radius:9px;cursor:pointer}
.ev-btn:hover{background:#4338ca}
.ev-btn:focus-visible{outline:3px solid #4f46e5;outline-offset:2px}
.ev-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){.ev-card{transition:none}.ev-card:hover{transform:none}}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<article class="card ev-card">
  <div class="card-body d-flex flex-column">
    <div class="ev-head d-flex">
      <time class="ev-date" datetime="09-18"><span class="ev-m">Sep</span><span class="ev-d">18</span></time>
      <div><span class="badge rounded-pill ev-tag">Workshop</span>
        <h2 class="card-title ev-title">Designing interfaces that survive real data</h2></div>
    </div>
    <ul class="ev-meta list-unstyled d-flex flex-column">
      <li class="d-flex align-items-center"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg> 14:00 – 17:30 BST</li>
      <li class="d-flex align-items-center"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 21s7-5.3 7-11a7 7 0 10-14 0c0 5.7 7 11 7 11z"/><circle cx="12" cy="10" r="2.5"/></svg> Shoreditch Studios, London</li>
      <li class="d-flex align-items-center"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h16M4 12h16M4 17h10"/></svg> 9 of 40 seats left</li>
    </ul>
    <div class="ev-foot d-flex align-items-center justify-content-between">
      <div class="d-flex align-items-center">
        <span class="ev-stack d-flex" aria-hidden="true"><i style="background:#4f46e5">AK</i><i style="background:#0369a1">RM</i><i style="background:#e11d48">TP</i><i style="background:#64748b">+28</i></span>
        <span class="ev-going"><span aria-hidden="true">going</span><span class="visually-hidden">31 people going</span></span>
      </div>
      <button class="btn ev-btn" type="button">Register<span class="visually-hidden"> for Designing interfaces that survive real data</span></button>
    </div>
  </div>
</article>
CSS 
/* Bootstrap .card + .badge + .btn, restyled through --bs-card-*, --bs-badge-* and --bs-btn-* variables.
   The date block, icon rows and attendee stack are small custom rules. */
.ev-card{--bs-card-border-color:#e9ecf1;--bs-card-border-radius:16px;--bs-card-spacer-x:22px;--bs-card-spacer-y:22px;--bs-card-color:#101828;
  width:330px;max-width:100%;transition:box-shadow .18s,transform .18s}
.ev-card:hover{transform:translateY(-4px);box-shadow:0 18px 36px -16px rgba(16,24,40,.16)}
.ev-card .card-body{gap:16px}
.ev-head{gap:16px}
.ev-date{width:64px;flex-shrink:0;border-radius:12px;overflow:hidden;text-align:center;border:1px solid #e9ecf1}
.ev-m{display:block;background:#4f46e5;color:#fff;font-size:.7rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;padding:5px 0}
.ev-d{display:block;font-size:1.5rem;font-weight:800;padding:7px 0;letter-spacing:-.02em}
.ev-tag{--bs-badge-font-size:.7rem;--bs-badge-font-weight:700;--bs-badge-padding-x:9px;--bs-badge-padding-y:3px;--bs-badge-color:#0369a1;background:#e0f2fe;letter-spacing:.05em;text-transform:uppercase}
.ev-title{font-size:1.05rem;font-weight:700;letter-spacing:-.01em;line-height:1.35;margin:8px 0 6px}
.ev-meta{gap:9px;margin:0;font-size:.86rem;color:#667085}
.ev-meta li{gap:9px}
.ev-meta svg{display:block;width:16px;height:16px;stroke:#98a2b3;fill:none;stroke-width:1.9;flex-shrink:0}
.ev-foot{padding-top:16px;border-top:1px solid #f0f2f6}
.ev-stack i{width:29px;height:29px;border-radius:50%;border:2px solid #fff;margin-left:-9px;display:grid;place-items:center;font-style:normal;font-size:.7rem;font-weight:800;color:#fff}
.ev-stack i:first-child{margin-left:0}
.ev-going{font-size:.79rem;color:#667085;margin-left:10px}
.ev-btn{--bs-btn-padding-x:16px;--bs-btn-padding-y:9px;--bs-btn-font-size:.85rem;--bs-btn-font-weight:700;--bs-btn-border-radius:9px;--bs-btn-border-width:0;
  --bs-btn-color:#fff;--bs-btn-bg:#4f46e5;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#4338ca;--bs-btn-active-color:#fff;--bs-btn-active-bg:#4338ca;--bs-btn-focus-box-shadow:none;transition:none}
.ev-btn:focus-visible{outline:3px solid #4f46e5;outline-offset:2px}
@media (prefers-reduced-motion:reduce){.ev-card{transition:none}.ev-card:hover{transform:none}}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<article class="flex w-[330px] max-w-full flex-col gap-4 rounded-2xl border border-[#e9ecf1] bg-white p-[22px] text-[#101828] transition-[translate,box-shadow] duration-[180ms] hover:-translate-y-1 hover:shadow-[0_18px_36px_-16px_rgba(16,24,40,.16)] motion-reduce:transition-none motion-reduce:hover:translate-y-0">
  <div class="flex gap-4">
    <time datetime="09-18" class="w-16 shrink-0 overflow-hidden rounded-xl border border-[#e9ecf1] text-center"><span class="block bg-[#4f46e5] py-[5px] text-[.7rem] font-extrabold tracking-[.09em] text-white uppercase">Sep</span><span class="block py-[7px] text-2xl font-extrabold tracking-[-.02em]">18</span></time>
    <div><span class="inline-block rounded-full bg-[#e0f2fe] px-[9px] py-[3px] text-[.7rem] font-bold tracking-[.05em] text-[#0369a1] uppercase">Workshop</span>
      <h2 class="mt-2 mb-1.5 text-[1.05rem] leading-[1.35] font-bold tracking-[-.01em]">Designing interfaces that survive real data</h2></div>
  </div>
  <ul class="flex flex-col gap-[9px] text-[.86rem] text-[#667085] [&_li]:flex [&_li]:items-center [&_li]:gap-[9px] [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:fill-none [&_svg]:stroke-[#98a2b3] [&_svg]:stroke-[1.9]">
    <li><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg> 14:00 – 17:30 BST</li>
    <li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 21s7-5.3 7-11a7 7 0 10-14 0c0 5.7 7 11 7 11z"/><circle cx="12" cy="10" r="2.5"/></svg> Shoreditch Studios, London</li>
    <li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h16M4 12h16M4 17h10"/></svg> 9 of 40 seats left</li>
  </ul>
  <div class="flex items-center justify-between border-t border-[#f0f2f6] pt-4">
    <div class="flex items-center">
      <span aria-hidden="true" class="flex [&>i]:-ml-[9px] [&>i]:grid [&>i]:size-[29px] [&>i]:place-items-center [&>i]:rounded-full [&>i]:border-2 [&>i]:border-white [&>i]:text-[.7rem] [&>i]:font-extrabold [&>i]:text-white [&>i]:not-italic [&>i:first-child]:ml-0"><i class="bg-[#4f46e5]">AK</i><i class="bg-[#0369a1]">RM</i><i class="bg-[#e11d48]">TP</i><i class="bg-[#64748b]">+28</i></span>
      <span class="ml-2.5 text-[.79rem] text-[#667085]"><span aria-hidden="true">going</span><span class="sr-only">31 people going</span></span>
    </div>
    <button type="button" class="cursor-pointer rounded-[9px] bg-[#4f46e5] px-4 py-[9px] text-[.85rem] font-bold text-white hover:bg-[#4338ca] focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-[#4f46e5]">Register<span class="sr-only"> for Designing interfaces that survive real data</span></button>
  </div>
</article>

About this set

An event listing card for workshops, meetups and webinars. A calendar-style date block with an indigo month strip sits beside a type tag and the event title. Below it, three rows with small inline SVG icons give the time, the venue and the seats left, and the footer has an overlapping stack of attendee initials with a +28 overflow bubble, the word going and a Register button. The date block is a time element, the month is written as Sep and set in capitals with CSS, so screen readers say Sep 18 instead of spelling out letters. The detail rows are a list with aria-hidden icons, the avatar stack is hidden from screen readers and replaced by hidden text saying 31 people going, and the Register button includes the event title as hidden text. Use it on event listings, course schedules or conference agendas; repeat it in a grid for several events. The card lifts on hover and has no JavaScript. The Bootstrap version uses .card, .badge and .btn; the Tailwind version styles the icons and avatars from their parents with arbitrary [&_svg] and [&>i] variants.

What’s included

  • Calendar date block marked up as a time element
  • Time, venue and seats rows with inline SVG icons
  • Overlapping attendee avatars with an overflow count
  • Register button named with the event title
  • Hover lift that is turned off under prefers-reduced-motion

Accessibility

The event title is an h2, the icons and avatar stack are aria-hidden, and hidden text reads 31 people going. The Register button has a 3px indigo focus outline and includes the event title in its name. Avatar colours were darkened so their white initials pass contrast, and the hover lift switches off under prefers-reduced-motion.

Customise it

Change the accent #4f46e5 in .ev-m and .ev-btn, the tag colours in .ev-tag and the avatar backgrounds in their inline styles. In Bootstrap the button uses --bs-btn-bg and --bs-btn-hover-bg on .ev-btn; in Tailwind edit the bg- utilities on the month strip, avatars and button.