Recurring Event

Repeating event.

Team standup

· Repeats Weekly

Ends

html

<div class="rec" style="border-left-color:#A8E6C1;">
  <div class="rec__head"><svg width="14" height="14" viewBox="0 0 16 16" aria-hidden="true"><path d="M4 5h6a3 3 0 0 1 3 3v1M12 11H6a3 3 0 0 1-3-3V7" fill="none" stroke="currentColor" stroke-width="1.4"/><path d="M2 5l2-2 2 2M14 11l-2 2-2-2" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg><p class="rec__title">Team standup</p></div>
  <p class="rec__meta"><time datetime="2026-08-18T09:00">9:00 am</time> &middot; Repeats <span data-freq="Weekly">Weekly</span></p>
  <p class="rec__end">Ends <time datetime="2026-12-31">31 Dec 2026</time></p>
</div>
<style>
.rec { font: 14px/1.4 system-ui, sans-serif; color: #241430; background: #FAF7F2; width: 320px; padding: 14px 16px; border-radius: 10px; border-left: 4px solid; box-sizing: border-box; box-shadow: 0 4px 12px rgba(36,20,48,.08); }
.rec__head { display: flex; align-items: center; gap: 8px; color: #24143077; }
.rec__title { margin: 0; font-weight: 700; color: #241430; }
.rec__meta { margin: 6px 0 0; font-size: 12px; color: #24143099; }
.rec__meta span { font-weight: 700; color: #241430; }
.rec__end { margin: 4px 0 0; font-size: 12px; color: #24143099; }
</style>

tailwind

<div class="w-[320px] p-[14px_16px] rounded-[10px] border-l-4 box-border font-sans text-sm text-[#241430] bg-[#FAF7F2] shadow-[0_4px_12px_rgba(36,20,48,.08)]" style="border-left-color:#A8E6C1">
  <div class="flex items-center gap-2 text-[#24143077]"><svg width="14" height="14" viewBox="0 0 16 16" aria-hidden="true"><path d="M4 5h6a3 3 0 0 1 3 3v1M12 11H6a3 3 0 0 1-3-3V7" fill="none" stroke="currentColor" stroke-width="1.4"/><path d="M2 5l2-2 2 2M14 11l-2 2-2-2" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg><p class="m-0 font-bold text-[#241430]">Team standup</p></div>
  <p class="mt-1.5 mb-0 text-xs text-[#241430]/60"><time datetime="2026-08-18T09:00">9:00 am</time> &middot; Repeats <span class="font-bold text-[#241430]" data-freq="Weekly">Weekly</span></p>
  <p class="mt-1 mb-0 text-xs text-[#241430]/60">Ends <time datetime="2026-12-31">31 Dec 2026</time></p>
</div>

react

export function RecurringEvent({
  title = "Team standup",
  time = "9:00 am",
  frequency = "Weekly",
  hasEndDate = true,
  accent = "#A8E6C1",
}) {
  return (
    <div style={{ font: "14px/1.4 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", width: 320, padding: "14px 16px", borderRadius: 10, borderLeft: `4px solid ${accent}`, boxSizing: "border-box", boxShadow: "0 4px 12px rgba(36,20,48,.08)" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 8, color: "#24143077" }}>
        <svg width="14" height="14" viewBox="0 0 16 16" aria-hidden="true"><path d="M4 5h6a3 3 0 0 1 3 3v1M12 11H6a3 3 0 0 1-3-3V7" fill="none" stroke="currentColor" strokeWidth="1.4" /><path d="M2 5l2-2 2 2M14 11l-2 2-2-2" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" /></svg>
        <p style={{ margin: 0, fontWeight: 700, color: "#241430" }}>{title}</p>
      </div>
      <p style={{ margin: "6px 0 0", fontSize: 12, color: "#24143099" }}>
        <time dateTime="2026-08-18T09:00">{time}</time> &middot; Repeats <span style={{ fontWeight: 700, color: "#241430" }}>{frequency}</span>
      </p>
      {hasEndDate && <p style={{ margin: "4px 0 0", fontSize: 12, color: "#24143099" }}>Ends <time dateTime="2026-12-31">31 Dec 2026</time></p>}
    </div>
  );
}