WIP Limit

Work-in-progress limit.

In progress (4/3)

Over limit

html

<section class="wip-column" aria-labelledby="wip-heading" style="--accent: #E8A020;">
  <header class="wip-column__header">
    <h3 id="wip-heading" class="wip-column__title">In progress <span class="wip-column__ratio">(4/3)</span></h3>
    <span class="wip-column__state wip-column__state--over">
      
      <svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true"><path d="M8 1.5 L15 14.5 L1 14.5 Z" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"></path><line x1="8" y1="6" x2="8" y2="10" stroke="currentColor" stroke-width="1.4"></line><circle cx="8" cy="12.3" r="0.9" fill="currentColor"></circle></svg>
      <span>Over limit</span>
      
      
    </span>
  </header>
  <ul class="wip-column__cards">
    <li>Design spec review</li>
    <li>API contract update</li>
    <li>Empty state illustrations</li>
    <li>Migrate settings page</li>
  </ul>
</section>
<style>
.wip-column { font-family: system-ui, sans-serif; color: #241430; background: #FAF7F2; max-width: 280px; border-radius: 10px; border-top: 4px solid var(--accent); padding: 14px; box-shadow: 0 4px 14px rgba(36,20,48,.1); box-sizing: border-box; }
.wip-column__header { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.wip-column__title { margin: 0; font-size: 14px; font-weight: 700; }
.wip-column__ratio { font-weight: 600; color: #241430aa; }
.wip-column__state { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 999px; width: fit-content; }
.wip-column__state--over { background: #E8A02030; color: #7a4b06; }
.wip-column__state--within { background: #A8E6C150; color: #1c5c34; }
.wip-column__cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.wip-column__cards li { background: #24143008; border-radius: 6px; padding: 6px 8px; font-size: 12.5px; }
</style>

tailwind

<section class="max-w-[280px] rounded-[10px] border-t-4 p-3.5 shadow-md font-sans text-[#241430] bg-[#FAF7F2] box-border" aria-labelledby="wip-tw-heading" style="border-top-color: #E8A020;">
  <header class="flex flex-col gap-1.5 mb-2.5">
    <h3 id="wip-tw-heading" class="m-0 text-sm font-bold">In progress <span class="font-semibold text-[#241430aa]">(4/3)</span></h3>
    <span class="wip-tw__state wip-tw__state--over inline-flex items-center gap-1.5 text-xs font-bold px-2 py-[3px] rounded-full w-fit">
      
      <svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true"><path d="M8 1.5 L15 14.5 L1 14.5 Z" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"></path><line x1="8" y1="6" x2="8" y2="10" stroke="currentColor" stroke-width="1.4"></line><circle cx="8" cy="12.3" r="0.9" fill="currentColor"></circle></svg>
      <span>Over limit</span>
      
      
    </span>
  </header>
  <ul class="list-none m-0 p-0 flex flex-col gap-1.5">
    <li class="bg-[#24143008] rounded-md px-2 py-1.5 text-[12.5px]">Design spec review</li>
    <li class="bg-[#24143008] rounded-md px-2 py-1.5 text-[12.5px]">API contract update</li>
    <li class="bg-[#24143008] rounded-md px-2 py-1.5 text-[12.5px]">Empty state illustrations</li>
    <li class="bg-[#24143008] rounded-md px-2 py-1.5 text-[12.5px]">Migrate settings page</li>
  </ul>
</section>
<style>
.wip-tw__state--over { background: #E8A02030; color: #7a4b06; }
.wip-tw__state--within { background: #A8E6C150; color: #1c5c34; }
</style>

react

export function WipColumn({
  columnName = "In progress",
  limit = 3,
  count = 4,
  exceeded = true,
  accent = "#E8A020",
}) {
  const stateStyle = exceeded
    ? { background: "#E8A02030", color: "#7a4b06" }
    : { background: "#A8E6C150", color: "#1c5c34" };
  return (
    <section aria-labelledby="wip-heading" style={{ fontFamily: "system-ui, sans-serif", color: "#241430",
      background: "#FAF7F2", maxWidth: 280, borderRadius: 10, borderTop: "4px solid " + accent, padding: 14,
      boxShadow: "0 4px 14px rgba(36,20,48,.1)", boxSizing: "border-box" }}>
      <header style={{ display: "flex", flexDirection: "column", gap: 6, marginBottom: 10 }}>
        <h3 id="wip-heading" style={{ margin: 0, fontSize: 14, fontWeight: 700 }}>
          {columnName} <span style={{ fontWeight: 600, color: "#241430aa" }}>({count}/{limit})</span>
        </h3>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 5, fontSize: 12, fontWeight: 700,
          padding: "3px 8px", borderRadius: 999, width: "fit-content", ...stateStyle }}>
          {exceeded ? (
            <>
              <svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true">
                <path d="M8 1.5 L15 14.5 L1 14.5 Z" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round" />
                <line x1="8" y1="6" x2="8" y2="10" stroke="currentColor" strokeWidth="1.4" />
                <circle cx="8" cy="12.3" r="0.9" fill="currentColor" />
              </svg>
              <span>Over limit</span>
            </>
          ) : (
            <>
              <svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true">
                <path d="M3 8.5 L6.5 12 L13 4.5" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
              <span>Within limit</span>
            </>
          )}
        </span>
      </header>
      <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 6 }}>
        {["Design spec review", "API contract update", "Empty state illustrations", "Migrate settings page"].map((item) => (
          <li key={item} style={{ background: "#24143008", borderRadius: 6, padding: "6px 8px", fontSize: 12.5 }}>{item}</li>
        ))}
      </ul>
    </section>
  );
}