Open demo

CSS code

HTML 
<section class="agenda" aria-labelledby="agenda-title">
  <h2 class="agenda-title" id="agenda-title">Upcoming</h2>
  <div class="ag-day">
    <h3 class="ag-date" aria-current="date"><span aria-hidden="true"><span>Thu</span><b>2</b></span><span class="sr-only">Today, Thursday 2 July 2026</span></h3>
    <ul class="ag-items">
      <li class="ag-item"><time datetime="2026-07-02T09:30">09:30</time><div><b>Editorial planning</b><span>July issue lineup — bring pitches</span></div></li>
      <li class="ag-item"><time datetime="2026-07-02T13:00">13:00</time><div><b>Print proof review</b><span>Press check at Papergrain</span></div></li>
    </ul>
  </div>
  <div class="ag-day">
    <h3 class="ag-date"><span aria-hidden="true"><span>Fri</span><b>3</b></span><span class="sr-only">Friday 3 July 2026</span></h3>
    <ul class="ag-items">
      <li class="ag-item"><time datetime="2026-07-03T10:00">10:00</time><div><b>Photographer scout</b><span>Portfolio reviews, three candidates</span></div></li>
    </ul>
  </div>
  <div class="ag-day">
    <h3 class="ag-date"><span aria-hidden="true"><span>Mon</span><b>6</b></span><span class="sr-only">Monday 6 July 2026</span></h3>
    <ul class="ag-items">
      <li class="ag-item"><time datetime="2026-07-06T09:00">09:00</time><div><b>Issue 48 goes to print</b><span>Final files due by 08:00</span></div></li>
      <li class="ag-item"><time datetime="2026-07-06T15:30">15:30</time><div><b>Subscriber survey readout</b><span>What 4,000 readers told us</span></div></li>
      <li class="ag-item"><time datetime="2026-07-06T18:00">18:00</time><div><b>Launch drinks</b><span>Rooftop, RSVP required</span></div></li>
    </ul>
  </div>
</section>
CSS 
/* Agenda list: each day is a heading (the date tile) followed by a list of items with <time> elements. No JavaScript. */
.agenda{--ag-accent:#b45309;--ag-muted:#7a6f5c;position:relative;width:100%;max-width:480px;color:#241f18}
.agenda-title{font-size:1.2rem;letter-spacing:-.01em;margin-bottom:22px}
.ag-day{display:grid;grid-template-columns:64px 1fr;gap:16px;margin-bottom:22px}
.ag-date{text-align:center;background:#fff;border:1px solid #ece5d8;border-radius:13px;padding:10px 0;height:fit-content;
  box-shadow:0 8px 20px -14px rgba(80,60,20,.3);font-size:inherit}
.ag-date b{display:block;font-size:1.35rem;letter-spacing:-.02em}
.ag-date span span{font-size:.66rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ag-accent)}
.ag-date[aria-current="date"]{background:var(--ag-accent);border-color:var(--ag-accent)}
.ag-date[aria-current="date"] b,.ag-date[aria-current="date"] span span{color:#fff}
.ag-items{display:flex;flex-direction:column;gap:9px;list-style:none}
.ag-item{background:#fff;border:1px solid #efe9dd;border-radius:12px;padding:12px 15px;display:flex;gap:12px;align-items:baseline;
  transition:transform .13s}
.ag-item:hover{transform:translateX(4px)}
.ag-item time{font-size:.72rem;font-weight:800;color:var(--ag-accent);white-space:nowrap;font-variant-numeric:tabular-nums}
.ag-item b{display:block;font-size:.88rem;margin-bottom:1px}
.ag-item span{font-size:.76rem;color:var(--ag-muted)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){.ag-item{transition:none}.ag-item:hover{transform:none}}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<section class="agenda w-100" aria-labelledby="agenda-title">
  <h2 class="agenda-title fw-bold" id="agenda-title">Upcoming</h2>
  <div class="ag-day">
    <h3 class="ag-date fw-bold" aria-current="date"><span aria-hidden="true"><span>Thu</span><b>2</b></span><span class="visually-hidden">Today, Thursday 2 July 2026</span></h3>
    <ul class="list-group ag-items">
      <li class="list-group-item"><time datetime="2026-07-02T09:30">09:30</time><div><b>Editorial planning</b><span>July issue lineup — bring pitches</span></div></li>
      <li class="list-group-item"><time datetime="2026-07-02T13:00">13:00</time><div><b>Print proof review</b><span>Press check at Papergrain</span></div></li>
    </ul>
  </div>
  <div class="ag-day">
    <h3 class="ag-date fw-bold"><span aria-hidden="true"><span>Fri</span><b>3</b></span><span class="visually-hidden">Friday 3 July 2026</span></h3>
    <ul class="list-group ag-items">
      <li class="list-group-item"><time datetime="2026-07-03T10:00">10:00</time><div><b>Photographer scout</b><span>Portfolio reviews, three candidates</span></div></li>
    </ul>
  </div>
  <div class="ag-day">
    <h3 class="ag-date fw-bold"><span aria-hidden="true"><span>Mon</span><b>6</b></span><span class="visually-hidden">Monday 6 July 2026</span></h3>
    <ul class="list-group ag-items">
      <li class="list-group-item"><time datetime="2026-07-06T09:00">09:00</time><div><b>Issue 48 goes to print</b><span>Final files due by 08:00</span></div></li>
      <li class="list-group-item"><time datetime="2026-07-06T15:30">15:30</time><div><b>Subscriber survey readout</b><span>What 4,000 readers told us</span></div></li>
      <li class="list-group-item"><time datetime="2026-07-06T18:00">18:00</time><div><b>Launch drinks</b><span>Rooftop, RSVP required</span></div></li>
    </ul>
  </div>
</section>
CSS 
/* Bootstrap .list-group items beside a date tile heading; recoloured through --bs-list-group-* variables. */
.agenda{--ag-accent:#b45309;--ag-muted:#7a6f5c;max-width:480px;color:#241f18}
.agenda-title{font-size:1.2rem;letter-spacing:-.01em;line-height:normal;margin-bottom:22px}
.ag-day{display:grid;grid-template-columns:64px 1fr;gap:16px;margin-bottom:22px}
.ag-date{text-align:center;background:#fff;border:1px solid #ece5d8;border-radius:13px;padding:10px 0;height:fit-content;
  box-shadow:0 8px 20px -14px rgba(80,60,20,.3);font-size:inherit;line-height:normal}
.ag-date b{display:block;font-size:1.35rem;letter-spacing:-.02em}
.ag-date span span{font-size:.66rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ag-accent)}
.ag-date[aria-current="date"]{background:var(--ag-accent);border-color:var(--ag-accent)}
.ag-date[aria-current="date"] b,.ag-date[aria-current="date"] span span{color:#fff}
.ag-items{--bs-list-group-border-color:#efe9dd;--bs-list-group-border-radius:12px;--bs-list-group-item-padding-x:15px;
  --bs-list-group-item-padding-y:12px;--bs-list-group-color:#241f18;gap:9px}
.ag-items .list-group-item{border-width:1px;border-radius:var(--bs-list-group-border-radius);display:flex;gap:12px;align-items:baseline;
  transition:transform .13s}
.ag-items .list-group-item:hover{transform:translateX(4px)}
.ag-items time{font-size:.72rem;font-weight:800;color:var(--ag-accent);white-space:nowrap;font-variant-numeric:tabular-nums}
.ag-items b{display:block;font-size:.88rem;margin-bottom:1px}
.ag-items span{font-size:.76rem;color:var(--ag-muted)}
@media (prefers-reduced-motion:reduce){.ag-items .list-group-item{transition:none}.ag-items .list-group-item:hover{transform:none}}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<section class="relative w-full max-w-[480px] text-[#241f18]" aria-labelledby="agenda-title">
  <h2 class="mb-[22px] text-[1.2rem] font-bold tracking-[-.01em]" id="agenda-title">Upcoming</h2>
  <div class="mb-[22px] grid grid-cols-[64px_1fr] gap-4">
    <h3 class="group h-fit rounded-[13px] border border-[#ece5d8] bg-white py-2.5 text-center font-bold shadow-[0_8px_20px_-14px_rgba(80,60,20,.3)] aria-[current=date]:border-ag-accent aria-[current=date]:bg-ag-accent" aria-current="date"><span aria-hidden="true"><span class="text-[.66rem] font-extrabold tracking-[.1em] text-ag-accent uppercase group-aria-[current=date]:text-white">Thu</span><b class="block text-[1.35rem] tracking-[-.02em] group-aria-[current=date]:text-white">2</b></span><span class="sr-only">Today, Thursday 2 July 2026</span></h3>
    <ul class="flex flex-col gap-[9px]">
      <li class="flex items-baseline gap-3 rounded-xl border border-[#efe9dd] bg-white px-[15px] py-3 transition-transform duration-[130ms] hover:translate-x-1 motion-reduce:transition-none motion-reduce:hover:translate-x-0"><time datetime="2026-07-02T09:30" class="text-[.72rem] font-extrabold whitespace-nowrap text-ag-accent tabular-nums">09:30</time><div><b class="mb-px block text-[.88rem]">Editorial planning</b><span class="text-[.76rem] text-ag-muted">July issue lineup — bring pitches</span></div></li>
      <li class="flex items-baseline gap-3 rounded-xl border border-[#efe9dd] bg-white px-[15px] py-3 transition-transform duration-[130ms] hover:translate-x-1 motion-reduce:transition-none motion-reduce:hover:translate-x-0"><time datetime="2026-07-02T13:00" class="text-[.72rem] font-extrabold whitespace-nowrap text-ag-accent tabular-nums">13:00</time><div><b class="mb-px block text-[.88rem]">Print proof review</b><span class="text-[.76rem] text-ag-muted">Press check at Papergrain</span></div></li>
    </ul>
  </div>
  <div class="mb-[22px] grid grid-cols-[64px_1fr] gap-4">
    <h3 class="group h-fit rounded-[13px] border border-[#ece5d8] bg-white py-2.5 text-center font-bold shadow-[0_8px_20px_-14px_rgba(80,60,20,.3)] aria-[current=date]:border-ag-accent aria-[current=date]:bg-ag-accent"><span aria-hidden="true"><span class="text-[.66rem] font-extrabold tracking-[.1em] text-ag-accent uppercase group-aria-[current=date]:text-white">Fri</span><b class="block text-[1.35rem] tracking-[-.02em] group-aria-[current=date]:text-white">3</b></span><span class="sr-only">Friday 3 July 2026</span></h3>
    <ul class="flex flex-col gap-[9px]">
      <li class="flex items-baseline gap-3 rounded-xl border border-[#efe9dd] bg-white px-[15px] py-3 transition-transform duration-[130ms] hover:translate-x-1 motion-reduce:transition-none motion-reduce:hover:translate-x-0"><time datetime="2026-07-03T10:00" class="text-[.72rem] font-extrabold whitespace-nowrap text-ag-accent tabular-nums">10:00</time><div><b class="mb-px block text-[.88rem]">Photographer scout</b><span class="text-[.76rem] text-ag-muted">Portfolio reviews, three candidates</span></div></li>
    </ul>
  </div>
  <div class="mb-[22px] grid grid-cols-[64px_1fr] gap-4">
    <h3 class="group h-fit rounded-[13px] border border-[#ece5d8] bg-white py-2.5 text-center font-bold shadow-[0_8px_20px_-14px_rgba(80,60,20,.3)] aria-[current=date]:border-ag-accent aria-[current=date]:bg-ag-accent"><span aria-hidden="true"><span class="text-[.66rem] font-extrabold tracking-[.1em] text-ag-accent uppercase group-aria-[current=date]:text-white">Mon</span><b class="block text-[1.35rem] tracking-[-.02em] group-aria-[current=date]:text-white">6</b></span><span class="sr-only">Monday 6 July 2026</span></h3>
    <ul class="flex flex-col gap-[9px]">
      <li class="flex items-baseline gap-3 rounded-xl border border-[#efe9dd] bg-white px-[15px] py-3 transition-transform duration-[130ms] hover:translate-x-1 motion-reduce:transition-none motion-reduce:hover:translate-x-0"><time datetime="2026-07-06T09:00" class="text-[.72rem] font-extrabold whitespace-nowrap text-ag-accent tabular-nums">09:00</time><div><b class="mb-px block text-[.88rem]">Issue 48 goes to print</b><span class="text-[.76rem] text-ag-muted">Final files due by 08:00</span></div></li>
      <li class="flex items-baseline gap-3 rounded-xl border border-[#efe9dd] bg-white px-[15px] py-3 transition-transform duration-[130ms] hover:translate-x-1 motion-reduce:transition-none motion-reduce:hover:translate-x-0"><time datetime="2026-07-06T15:30" class="text-[.72rem] font-extrabold whitespace-nowrap text-ag-accent tabular-nums">15:30</time><div><b class="mb-px block text-[.88rem]">Subscriber survey readout</b><span class="text-[.76rem] text-ag-muted">What 4,000 readers told us</span></div></li>
      <li class="flex items-baseline gap-3 rounded-xl border border-[#efe9dd] bg-white px-[15px] py-3 transition-transform duration-[130ms] hover:translate-x-1 motion-reduce:transition-none motion-reduce:hover:translate-x-0"><time datetime="2026-07-06T18:00" class="text-[.72rem] font-extrabold whitespace-nowrap text-ag-accent tabular-nums">18:00</time><div><b class="mb-px block text-[.88rem]">Launch drinks</b><span class="text-[.76rem] text-ag-muted">Rooftop, RSVP required</span></div></li>
    </ul>
  </div>
</section>
CSS 
@theme {
  --color-ag-accent: #b45309;
  --color-ag-muted: #7a6f5c;
}

About this set

A vertical agenda for upcoming events, suited to newsletters, editorial calendars, sidebars and mobile screens where a month grid would be too dense. Each day is a small date tile showing the weekday in amber capitals above a large day number, and beside it a stack of white cards, one per event, with the start time in bold amber and a title over a one-line description. Today’s tile is filled solid amber so it stands out at the top of the list. Cards slide four pixels to the right on hover as a gentle affordance, and that movement is switched off for people who prefer reduced motion. The structure is semantic and needs no JavaScript: the date tile is a heading, the events are a list, and every start time is a time element with a machine-readable datetime attribute, which makes the agenda easy to render from a CMS or an API and friendly to search engines. Use it for anything chronological with a handful of items per day. The Bootstrap version builds the event stacks with .list-group items separated by a gap, and the Tailwind version uses group and aria-current variants for the today tile.

What’s included

  • Date tiles with weekday and day number
  • Event cards with start time, title and description
  • Today's tile filled and marked with aria-current="date"
  • Semantic headings, lists and time elements, no JavaScript
  • Hover nudge removed under prefers-reduced-motion

Accessibility

The agenda is a section labelled by its heading. Each date tile is a level-three heading whose screen reader text is the full date ("Today, Thursday 2 July 2026"), so heading navigation jumps day by day. Events are list items and times use the time element. The grey description text was darkened to pass 4.5:1, and the hover transform is disabled under prefers-reduced-motion.

Customise it

Change --ag-accent and --ag-muted on .agenda for the amber accent and the description colour, and the 64px tile column in .ag-day. In Bootstrap the cards are restyled through --bs-list-group-* variables; in Tailwind edit --color-ag-accent and --color-ag-muted.