Epic

Large body of work containing smaller items.

html

<div class="epic" data-status="on-track" style="--accent:#E8A020;">
  <div class="epic__head">
    <h3 class="epic__title">Checkout redesign</h3>
    <span class="epic__badge epic__badge--on-track">On track</span>
    <span class="epic__badge epic__badge--at-risk">At risk</span>
    <span class="epic__badge epic__badge--done">Done</span>
  </div>
  <p class="epic__progress-label">6 of 10 stories done</p>
  <div class="epic__bar"><div class="epic__bar-fill" style="width:60%;"></div></div>
  <p class="epic__percent">60% complete</p>
</div>
<style>
.epic { font:14px/1.4 system-ui, sans-serif; color:#241430; background:#FAF7F2; padding:16px 18px; border-radius:12px; max-width:380px; box-sizing:border-box; border:1.5px solid #24143014; }
.epic__head { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.epic__title { margin:0; font-size:16px; }
.epic__badge { display:none; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; padding:3px 9px; border-radius:999px; }
.epic[data-status="on-track"] .epic__badge--on-track { display:inline-block; background:#cdeedb; color:#1a7a4c; }
.epic[data-status="at-risk"] .epic__badge--at-risk { display:inline-block; background:#fbe6bd; color:#8a5d00; }
.epic[data-status="done"] .epic__badge--done { display:inline-block; background:var(--accent); color:#241430; }
.epic__progress-label { margin:10px 0 6px; font-size:13px; color:#241430cc; }
.epic__bar { height:8px; border-radius:999px; background:#24143014; overflow:hidden; }
.epic__bar-fill { height:100%; border-radius:999px; background:var(--accent); }
.epic__percent { margin:6px 0 0; font-size:12px; font-weight:600; color:#241430b3; }
</style>

tailwind

<div class="epic-tw font-sans text-sm text-[#241430] bg-[#FAF7F2] px-[18px] py-4 rounded-xl max-w-[380px] box-border border-[1.5px] border-[#24143014]" data-status="on-track" style="--accent:#E8A020;">
  <div class="flex items-center justify-between gap-2 flex-wrap">
    <h3 class="m-0 text-base">Checkout redesign</h3>
    <span class="epic-tw__badge epic-tw__badge--on-track hidden text-[11px] font-bold uppercase tracking-wide px-2.5 py-1 rounded-full bg-[#cdeedb] text-[#1a7a4c]">On track</span>
    <span class="epic-tw__badge epic-tw__badge--at-risk hidden text-[11px] font-bold uppercase tracking-wide px-2.5 py-1 rounded-full bg-[#fbe6bd] text-[#8a5d00]">At risk</span>
    <span class="epic-tw__badge epic-tw__badge--done hidden text-[11px] font-bold uppercase tracking-wide px-2.5 py-1 rounded-full text-[#241430]" style="background:#E8A020">Done</span>
  </div>
  <p class="mt-2.5 mb-1.5 text-[13px] text-[#241430]/80">6 of 10 stories done</p>
  <div class="h-2 rounded-full bg-[#24143014] overflow-hidden"><div class="h-full rounded-full" style="width:60%;background:#E8A020"></div></div>
  <p class="mt-1.5 text-xs font-semibold text-[#241430]/70">60% complete</p>
</div>
<style>
.epic-tw[data-status="on-track"] .epic-tw__badge--on-track,
.epic-tw[data-status="at-risk"] .epic-tw__badge--at-risk,
.epic-tw[data-status="done"] .epic-tw__badge--done { display:inline-block; }
</style>

react

export function Epic({
  title = "Checkout redesign",
  doneStories = 6,
  totalStories = 10,
  percent = 60,
  status = "on-track",
  accent = "#E8A020",
}) {
  const badge = {
    "on-track": { text: "On track", bg: "#cdeedb", color: "#1a7a4c" },
    "at-risk": { text: "At risk", bg: "#fbe6bd", color: "#8a5d00" },
    done: { text: "Done", bg: accent, color: "#241430" },
  }[status] ?? { text: "On track", bg: "#cdeedb", color: "#1a7a4c" };
  return (
    <div style={{ fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430", background: "#FAF7F2",
      padding: "16px 18px", borderRadius: 12, maxWidth: 380, boxSizing: "border-box", border: "1.5px solid #24143014" }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8, flexWrap: "wrap" }}>
        <h3 style={{ margin: 0, fontSize: 16 }}>{title}</h3>
        <span style={{ fontSize: 11, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.03em",
          padding: "3px 9px", borderRadius: 999, background: badge.bg, color: badge.color }}>{badge.text}</span>
      </div>
      <p style={{ margin: "10px 0 6px", fontSize: 13, color: "#241430cc" }}>{doneStories} of {totalStories} stories done</p>
      <div style={{ height: 8, borderRadius: 999, background: "#24143014", overflow: "hidden" }}>
        <div style={{ height: "100%", borderRadius: 999, background: accent, width: `${percent}%` }} />
      </div>
      <p style={{ margin: "6px 0 0", fontSize: 12, fontWeight: 600, color: "#241430b3" }}>{percent}% complete</p>
    </div>
  );
}