Backlog

Collection of pending work.

html

<section class="backlog" aria-labelledby="backlog-heading" data-sort="priority" style="--accent:#E8A020;">
  <div class="backlog__head">
    <h3 id="backlog-heading" class="backlog__title">Growth backlog</h3>
    <span class="backlog__count">9 items pending</span>
  </div>
  <p class="backlog__sort">Sorted by <strong>priority</strong></p>
  <ol class="backlog__list">
    <li class="backlog__item"><span class="backlog__priority backlog__priority--high">High priority</span><span class="backlog__label">Redesign onboarding checklist</span></li>
    <li class="backlog__item"><span class="backlog__priority backlog__priority--med">Medium priority</span><span class="backlog__label">Add CSV export to reports</span></li>
    <li class="backlog__item"><span class="backlog__priority backlog__priority--med">Medium priority</span><span class="backlog__label">Investigate slow search index</span></li>
    <li class="backlog__item"><span class="backlog__priority backlog__priority--low">Low priority</span><span class="backlog__label">Refresh empty-state illustrations</span></li>
  </ol>
</section>
<style>
.backlog { font:14px/1.4 system-ui, sans-serif; color:#241430; background:#FAF7F2; padding:16px; border-radius:12px; max-width:360px; box-sizing:border-box; }
.backlog__head { display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.backlog__title { margin:0; font-size:16px; }
.backlog__count { font-size:12px; font-weight:600; background:var(--accent); color:#241430; padding:3px 8px; border-radius:999px; white-space:nowrap; }
.backlog__sort { margin:6px 0 10px; font-size:12px; color:#241430b3; }
.backlog__list { margin:0; padding-left:22px; list-style:decimal; }
.backlog__list--plain { list-style:disc; padding-left:18px; }
.backlog__item + .backlog__item { margin-top:8px; }
.backlog__priority { display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; }
.backlog__priority--high { color:#b0362a; }
.backlog__priority--med { color:#8a5d00; }
.backlog__priority--low { color:#1a7a4c; }
.backlog__label { display:block; font-size:14px; }
</style>

tailwind

<section class="backlog-tw font-sans text-sm text-[#241430] bg-[#FAF7F2] p-4 rounded-xl max-w-[360px] box-border" aria-labelledby="backlog-tw-heading" data-sort="priority" style="--accent:#E8A020;">
  <div class="flex justify-between items-baseline gap-2">
    <h3 id="backlog-tw-heading" class="m-0 text-base">Growth backlog</h3>
    <span class="text-xs font-semibold px-2 py-0.5 rounded-full whitespace-nowrap" style="background:var(--accent);color:#241430">9 items pending</span>
  </div>
  <p class="my-1.5 text-xs text-[#241430]/70">Sorted by <strong>priority</strong></p>
  <ol class="m-0 pl-[22px]" style="list-style:decimal">
    <li class="mt-2 first:mt-0"><span class="block text-[11px] font-bold uppercase tracking-wide text-[#b0362a]">High priority</span><span class="block text-sm">Redesign onboarding checklist</span></li>
    <li class="mt-2 first:mt-0"><span class="block text-[11px] font-bold uppercase tracking-wide text-[#8a5d00]">Medium priority</span><span class="block text-sm">Add CSV export to reports</span></li>
    <li class="mt-2 first:mt-0"><span class="block text-[11px] font-bold uppercase tracking-wide text-[#8a5d00]">Medium priority</span><span class="block text-sm">Investigate slow search index</span></li>
    <li class="mt-2 first:mt-0"><span class="block text-[11px] font-bold uppercase tracking-wide text-[#1a7a4c]">Low priority</span><span class="block text-sm">Refresh empty-state illustrations</span></li>
  </ol>
</section>

react

export function Backlog({
  title = "Growth backlog",
  count = 9,
  sortBy = "priority",
  accent = "#E8A020",
  showNumbers = true,
}) {
  const items = [
    { priority: "High priority", color: "#b0362a", label: "Redesign onboarding checklist" },
    { priority: "Medium priority", color: "#8a5d00", label: "Add CSV export to reports" },
    { priority: "Medium priority", color: "#8a5d00", label: "Investigate slow search index" },
    { priority: "Low priority", color: "#1a7a4c", label: "Refresh empty-state illustrations" },
  ];
  return (
    <section aria-labelledby="backlog-heading" style={{ fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430",
      background: "#FAF7F2", padding: 16, borderRadius: 12, maxWidth: 360, boxSizing: "border-box" }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 8 }}>
        <h3 id="backlog-heading" style={{ margin: 0, fontSize: 16 }}>{title}</h3>
        <span style={{ fontSize: 12, fontWeight: 600, background: accent, color: "#241430", padding: "3px 8px", borderRadius: 999, whiteSpace: "nowrap" }}>{count} items pending</span>
      </div>
      <p style={{ margin: "6px 0 10px", fontSize: 12, color: "#241430b3" }}>Sorted by <strong>{sortBy}</strong></p>
      <ol style={{ margin: 0, paddingLeft: 22, listStyle: showNumbers ? "decimal" : "disc" }}>
        {items.map((item, i) => (
          <li key={item.label} style={{ marginTop: i === 0 ? 0 : 8 }}>
            <span style={{ display: "block", fontSize: 11, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.03em", color: item.color }}>{item.priority}</span>
            <span style={{ display: "block", fontSize: 14 }}>{item.label}</span>
          </li>
        ))}
      </ol>
    </section>
  );
}