Schedule

Time-based activity display.

html

<div class="schedule schedule--day" style="--accent:#BFD9F2;">
  <h3 class="schedule__title">Today&#39;s schedule</h3>
  <ol class="schedule__list">
    <li class="schedule__item" style="padding-block:14px;">
      <time class="schedule__time" datetime="2026-08-18T09:00">09:00</time>
      <div class="schedule__body">
        <p class="schedule__event">Team standup</p>
        <p class="schedule__location">Studio A</p>
      </div>
    </li>
    <li class="schedule__item" style="padding-block:14px;">
      <time class="schedule__time" datetime="2026-08-18T11:30">11:30</time>
      <div class="schedule__body">
        <p class="schedule__event">Design review</p>
        <p class="schedule__location">Meeting Room 2</p>
      </div>
    </li>
    <li class="schedule__item" style="padding-block:14px;">
      <time class="schedule__time" datetime="2026-08-18T13:00">13:00</time>
      <div class="schedule__body">
        <p class="schedule__event">Lunch break</p>
        <p class="schedule__location">Break room</p>
      </div>
    </li>
    <li class="schedule__item" style="padding-block:14px;">
      <time class="schedule__time" datetime="2026-08-18T15:30">15:30</time>
      <div class="schedule__body">
        <p class="schedule__event">Client call</p>
        <p class="schedule__location">Video call</p>
      </div>
    </li>
  </ol>
</div>
<style>
.schedule { font: 16px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; border-radius: 12px; padding: 18px 20px; box-sizing: border-box; width: 320px; }
.schedule__title { margin: 0 0 12px; font-size: 15px; font-weight: 700; }
.schedule__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.schedule__item { display: flex; gap: 12px; border-left: 3px solid var(--accent); padding-left: 12px; }
.schedule__item + .schedule__item { border-top: 1px solid #24143014; }
.schedule__time { font-weight: 700; font-variant-numeric: tabular-nums; width: 52px; flex-shrink: 0; color: var(--accent); }
.schedule__event { margin: 0; font-weight: 600; font-size: 14px; }
.schedule__location { margin: 2px 0 0; font-size: 12px; color: #241430aa; }
.schedule--week .schedule__list { flex-direction: row; flex-wrap: wrap; gap: 10px; }
.schedule--week .schedule__item { flex-direction: column; gap: 4px; border-left: none; border-top: 3px solid var(--accent); padding: 8px 10px 0; flex: 1 1 130px; }
.schedule--week .schedule__item + .schedule__item { border-top: 3px solid var(--accent); }
</style>

tailwind

<div class="schedule-tw schedule-tw--day bg-[#FAF7F2] text-[#241430] font-sans rounded-xl px-5 py-[18px] box-border w-[320px]" style="--accent:#BFD9F2">
  <h3 class="m-0 mb-3 text-[15px] font-bold">Today&#39;s schedule</h3>
  <ol class="schedule-tw__list list-none m-0 p-0 flex flex-col">
    <li class="schedule-tw__item flex gap-3 border-l-[3px] pl-3" style="padding-block:14px;border-color:#BFD9F2">
      <time class="font-bold tabular-nums w-[52px] shrink-0" style="color:#BFD9F2" datetime="2026-08-18T09:00">09:00</time>
      <div>
        <p class="m-0 font-semibold text-sm">Team standup</p>
        <p class="mt-0.5 mb-0 text-xs text-[#241430aa]">Studio A</p>
      </div>
    </li>
    <li class="schedule-tw__item flex gap-3 border-l-[3px] pl-3" style="padding-block:14px;border-color:#BFD9F2">
      <time class="font-bold tabular-nums w-[52px] shrink-0" style="color:#BFD9F2" datetime="2026-08-18T11:30">11:30</time>
      <div>
        <p class="m-0 font-semibold text-sm">Design review</p>
        <p class="mt-0.5 mb-0 text-xs text-[#241430aa]">Meeting Room 2</p>
      </div>
    </li>
    <li class="schedule-tw__item flex gap-3 border-l-[3px] pl-3" style="padding-block:14px;border-color:#BFD9F2">
      <time class="font-bold tabular-nums w-[52px] shrink-0" style="color:#BFD9F2" datetime="2026-08-18T13:00">13:00</time>
      <div>
        <p class="m-0 font-semibold text-sm">Lunch break</p>
        <p class="mt-0.5 mb-0 text-xs text-[#241430aa]">Break room</p>
      </div>
    </li>
    <li class="schedule-tw__item flex gap-3 border-l-[3px] pl-3" style="padding-block:14px;border-color:#BFD9F2">
      <time class="font-bold tabular-nums w-[52px] shrink-0" style="color:#BFD9F2" datetime="2026-08-18T15:30">15:30</time>
      <div>
        <p class="m-0 font-semibold text-sm">Client call</p>
        <p class="mt-0.5 mb-0 text-xs text-[#241430aa]">Video call</p>
      </div>
    </li>
  </ol>
</div>
<style>
.schedule-tw--week .schedule-tw__list { flex-direction: row; flex-wrap: wrap; gap: 10px; }
.schedule-tw--week .schedule-tw__item { flex-direction: column; gap: 4px; border-left: none; border-top-width: 3px; border-top-style: solid; padding: 8px 10px 0; flex: 1 1 130px; }
</style>

react

export function Schedule({
  title = "Today's schedule",
  view = "day",
  accent = "#BFD9F2",
  showLocation = true,
  density = 14,
}) {
  const items = [
    { time: "09:00", iso: "2026-08-18T09:00", event: "Team standup", location: "Studio A" },
    { time: "11:30", iso: "2026-08-18T11:30", event: "Design review", location: "Meeting Room 2" },
    { time: "13:00", iso: "2026-08-18T13:00", event: "Lunch break", location: "Break room" },
    { time: "15:30", iso: "2026-08-18T15:30", event: "Client call", location: "Video call" },
  ];
  const week = view === "week";
  return (
    <div style={{ fontFamily: "system-ui, sans-serif", fontSize: 16, lineHeight: 1.5, color: "#241430",
      background: "#FAF7F2", borderRadius: 12, padding: "18px 20px", boxSizing: "border-box", width: 320 }}>
      <h3 style={{ margin: "0 0 12px", fontSize: 15, fontWeight: 700 }}>{title}</h3>
      <ol style={{ listStyle: "none", margin: 0, padding: 0, display: "flex",
        flexDirection: week ? "row" : "column", flexWrap: week ? "wrap" : "nowrap", gap: week ? 10 : 0 }}>
        {items.map((item) => (
          <li key={item.time} style={{ display: "flex", flexDirection: week ? "column" : "row",
            gap: week ? 4 : 12, borderLeft: week ? "none" : `3px solid ${accent}`,
            borderTop: week ? `3px solid ${accent}` : "none",
            padding: week ? "8px 10px 0" : `${density}px 0 ${density}px 12px`,
            flex: week ? "1 1 130px" : "initial" }}>
            <time dateTime={item.iso} style={{ fontWeight: 700, fontVariantNumeric: "tabular-nums",
              width: week ? "auto" : 52, flexShrink: 0, color: accent }}>{item.time}</time>
            <div>
              <p style={{ margin: 0, fontWeight: 600, fontSize: 14 }}>{item.event}</p>
              {showLocation && <p style={{ margin: "2px 0 0", fontSize: 12, color: "#241430aa" }}>{item.location}</p>}
            </div>
          </li>
        ))}
      </ol>
    </div>
  );
}