Agenda View

Chronological event list.

html

<section class="agenda" data-density="Comfortable" style="--accent:#A8E6C1;">
  <h2 class="agenda__title">Today’s schedule</h2>
  <ol class="agenda__list" data-rows="4">
    <li class="agenda__item">
      <time class="agenda__time" datetime="2026-08-18T09:00">9:00 am</time>
      <span class="agenda__label">Team standup</span>
    </li>
    <li class="agenda__item">
      <time class="agenda__time" datetime="2026-08-18T11:30">11:30 am</time>
      <span class="agenda__label">Design review</span>
    </li>
    <li class="agenda__item">
      <time class="agenda__time" datetime="2026-08-18T14:00">2:00 pm</time>
      <span class="agenda__label">Client call</span>
    </li>
    <li class="agenda__item">
      <time class="agenda__time" datetime="2026-08-18T16:30">4:30 pm</time>
      <span class="agenda__label">Wrap-up notes</span>
    </li>
  </ol>
</section>
<style>
.agenda { font: 15px/1.4 system-ui, sans-serif; color: #241430; background: #FAF7F2; width: 420px; padding: 20px; border-radius: 14px; box-sizing: border-box; }
.agenda__title { margin: 0 0 12px; font-size: 17px; font-weight: 700; }
.agenda__list { list-style: none; margin: 0; padding: 0; }
.agenda__item { display: flex; align-items: baseline; gap: 14px; padding: 10px 0; border-left: 3px solid var(--accent); padding-left: 12px; margin-bottom: 6px; }
.agenda[data-density="Compact"] .agenda__item { padding-top: 4px; padding-bottom: 4px; margin-bottom: 2px; }
.agenda__time { flex: 0 0 auto; font-variant-numeric: tabular-nums; color: #24143099; font-size: 13px; width: 62px; }
.agenda__label { font-weight: 600; }
.agenda__list[data-rows="3"] .agenda__item:nth-child(n+4) { display: none; }
</style>

tailwind

<section class="font-sans text-[15px] text-[#241430] bg-[#FAF7F2] w-[420px] p-5 rounded-2xl box-border" data-density="Comfortable" style="--accent:#A8E6C1">
  <h2 class="m-0 mb-3 text-[17px] font-bold">Today’s schedule</h2>
  <ol class="list-none m-0 p-0" data-rows="4">
    <li class="agenda-tw-item flex items-baseline gap-3.5 py-2.5 pl-3 mb-1.5 border-l-[3px]" style="border-color:#A8E6C1">
      <time class="flex-none tabular-nums text-[#241430]/60 text-[13px] w-[62px]" datetime="2026-08-18T09:00">9:00 am</time>
      <span class="font-semibold">Team standup</span>
    </li>
    <li class="agenda-tw-item flex items-baseline gap-3.5 py-2.5 pl-3 mb-1.5 border-l-[3px]" style="border-color:#A8E6C1">
      <time class="flex-none tabular-nums text-[#241430]/60 text-[13px] w-[62px]" datetime="2026-08-18T11:30">11:30 am</time>
      <span class="font-semibold">Design review</span>
    </li>
    <li class="agenda-tw-item flex items-baseline gap-3.5 py-2.5 pl-3 mb-1.5 border-l-[3px]" style="border-color:#A8E6C1">
      <time class="flex-none tabular-nums text-[#241430]/60 text-[13px] w-[62px]" datetime="2026-08-18T14:00">2:00 pm</time>
      <span class="font-semibold">Client call</span>
    </li>
    <li class="agenda-tw-item flex items-baseline gap-3.5 py-2.5 pl-3 mb-1.5 border-l-[3px]" style="border-color:#A8E6C1">
      <time class="flex-none tabular-nums text-[#241430]/60 text-[13px] w-[62px]" datetime="2026-08-18T16:30">4:30 pm</time>
      <span class="font-semibold">Wrap-up notes</span>
    </li>
  </ol>
</section>
<style>
section[data-density="Compact"] .agenda-tw-item { padding-top: 4px; padding-bottom: 4px; margin-bottom: 2px; }
ol[data-rows="3"] .agenda-tw-item:nth-child(n+4) { display: none; }
</style>

react

export function AgendaView({
  title = "Today’s schedule",
  rows = "4",
  density = "Comfortable",
  showTime = true,
  accent = "#A8E6C1",
}) {
  const events = [
    { time: "9:00 am", iso: "2026-08-18T09:00", label: "Team standup" },
    { time: "11:30 am", iso: "2026-08-18T11:30", label: "Design review" },
    { time: "2:00 pm", iso: "2026-08-18T14:00", label: "Client call" },
    { time: "4:30 pm", iso: "2026-08-18T16:30", label: "Wrap-up notes" },
  ].slice(0, Number(rows));
  const pad = density === "Compact" ? "4px 0" : "10px 0";
  return (
    <section style={{ font: "15px/1.4 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", width: 420, padding: 20, borderRadius: 14, boxSizing: "border-box" }}>
      <h2 style={{ margin: "0 0 12px", fontSize: 17, fontWeight: 700 }}>{title}</h2>
      <ol style={{ listStyle: "none", margin: 0, padding: 0 }}>
        {events.map((e) => (
          <li key={e.label} style={{ display: "flex", alignItems: "baseline", gap: 14, padding: pad, borderLeft: `3px solid ${accent}`, paddingLeft: 12, marginBottom: density === "Compact" ? 2 : 6 }}>
            {showTime && <time dateTime={e.iso} style={{ flex: "0 0 auto", fontVariantNumeric: "tabular-nums", color: "#24143099", fontSize: 13, width: 62 }}>{e.time}</time>}
            <span style={{ fontWeight: 600 }}>{e.label}</span>
          </li>
        ))}
      </ol>
    </section>
  );
}