Project

Container for related work.

Checkout Redesign

active

Owned by M. Iqbal

45% complete

html

<article class="project" aria-label="Project: Checkout Redesign">
  <header class="project__head">
    <h3 class="project__name">Checkout Redesign</h3>
    <span class="project__status project__status--active">
      <span class="project__icon project__icon--planning" aria-hidden="true"><svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.4"><rect x="3" y="2.5" width="10" height="11.5" rx="1.5"></rect><path d="M6 2.5h4v1.8H6z"></path></svg></span>
      <span class="project__icon project__icon--active" aria-hidden="true"><svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.4"><path d="M5 3.2 12.5 8 5 12.8V3.2z"></path></svg></span>
      <span class="project__icon project__icon--blocked" aria-hidden="true"><svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.4"><path d="M5 1.5h6L14.5 5v6L11 14.5H5L1.5 11V5z"></path><path d="M6 6v4M10 6v4"></path></svg></span>
      <span class="project__icon project__icon--done" aria-hidden="true"><svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.4"><circle cx="8" cy="8" r="6.3"></circle><path d="M5.3 8.2 7 9.9l3.6-4"></path></svg></span>
      <span class="project__status-label">active</span>
    </span>
  </header>
  <p class="project__owner">Owned by M. Iqbal</p>
  <div class="project__bar-track" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" aria-label="Checkout Redesign progress">
    <div class="project__bar-fill" style="width:45%;background:#A8E6C1;"></div>
  </div>
  <p class="project__bar-label">45% complete</p>
</article>
<style>
.project { max-width: 420px; padding: 18px 20px; border-radius: 12px; background: #FAF7F2; border: 1px solid #24143022; box-sizing: border-box; font: 14px/1.4 system-ui, sans-serif; color: #241430; }
.project__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.project__name { margin: 0; font-size: 16px; font-weight: 700; }
.project__status { display: inline-flex; align-items: center; gap: 5px; font: 600 12px/1 system-ui, sans-serif; padding: 4px 9px; border-radius: 999px; text-transform: capitalize; flex-shrink: 0; }
.project__icon { display: none; }
.project__status--planning .project__icon--planning, .project__status--active .project__icon--active, .project__status--blocked .project__icon--blocked, .project__status--done .project__icon--done { display: inline-flex; }
.project__status--planning { background: color-mix(in srgb, #D9C8F0 45%, #FAF7F2); color: #4a3a68; }
.project__status--active { background: color-mix(in srgb, #BFD9F2 45%, #FAF7F2); color: #1f4266; }
.project__status--blocked { background: color-mix(in srgb, #F5C2E0 45%, #FAF7F2); color: #7a2f57; }
.project__status--done { background: color-mix(in srgb, #A8E6C1 45%, #FAF7F2); color: #205c37; }
.project__owner { margin: 4px 0 14px; font-size: 12.5px; color: #241430b3; }
.project__bar-track { height: 8px; border-radius: 999px; background: #24143014; overflow: hidden; }
.project__bar-fill { height: 100%; border-radius: 999px; }
.project__bar-label { margin: 6px 0 0; font-size: 12px; font-weight: 600; color: #241430b3; }
</style>

tailwind

<article aria-label="Project: Checkout Redesign" class="max-w-[420px] p-4.5 rounded-xl bg-[#FAF7F2] border border-[#24143022] box-border font-sans text-sm text-[#241430]">
  <header class="flex items-start justify-between gap-2.5">
    <h3 class="m-0 text-base font-bold">Checkout Redesign</h3>
    <span class="project-tw__status project-tw__status--active inline-flex items-center gap-1.5 text-xs font-semibold px-2.5 py-1 rounded-full capitalize flex-shrink-0">
      <span class="project-tw__icon project-tw__icon--planning" aria-hidden="true"><svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.4"><rect x="3" y="2.5" width="10" height="11.5" rx="1.5"></rect><path d="M6 2.5h4v1.8H6z"></path></svg></span>
      <span class="project-tw__icon project-tw__icon--active" aria-hidden="true"><svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.4"><path d="M5 3.2 12.5 8 5 12.8V3.2z"></path></svg></span>
      <span class="project-tw__icon project-tw__icon--blocked" aria-hidden="true"><svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.4"><path d="M5 1.5h6L14.5 5v6L11 14.5H5L1.5 11V5z"></path><path d="M6 6v4M10 6v4"></path></svg></span>
      <span class="project-tw__icon project-tw__icon--done" aria-hidden="true"><svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.4"><circle cx="8" cy="8" r="6.3"></circle><path d="M5.3 8.2 7 9.9l3.6-4"></path></svg></span>
      <span>active</span>
    </span>
  </header>
  <p class="mt-1 mb-3.5 text-[12.5px] text-[#241430]/70">Owned by M. Iqbal</p>
  <div class="h-2 rounded-full bg-[#24143014] overflow-hidden" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" aria-label="Checkout Redesign progress">
    <div class="h-full rounded-full" style="width:45%;background:#A8E6C1;"></div>
  </div>
  <p class="mt-1.5 mb-0 text-xs font-semibold text-[#241430]/70">45% complete</p>
</article>
<style>
.project-tw__icon { display: none; }
.project-tw__status--planning .project-tw__icon--planning, .project-tw__status--active .project-tw__icon--active, .project-tw__status--blocked .project-tw__icon--blocked, .project-tw__status--done .project-tw__icon--done { display: inline-flex; }
.project-tw__status--planning { background: color-mix(in srgb, #D9C8F0 45%, #FAF7F2); color: #4a3a68; }
.project-tw__status--active { background: color-mix(in srgb, #BFD9F2 45%, #FAF7F2); color: #1f4266; }
.project-tw__status--blocked { background: color-mix(in srgb, #F5C2E0 45%, #FAF7F2); color: #7a2f57; }
.project-tw__status--done { background: color-mix(in srgb, #A8E6C1 45%, #FAF7F2); color: #205c37; }
</style>

react

export function Project({
  name = "Checkout Redesign",
  owner = "M. Iqbal",
  status = "active",
  progress = 45,
  accent = "#A8E6C1",
}) {
  const palette = {
    planning: { background: "color-mix(in srgb, #D9C8F0 45%, #FAF7F2)", color: "#4a3a68", icon: <svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.4"><rect x="3" y="2.5" width="10" height="11.5" rx="1.5" /><path d="M6 2.5h4v1.8H6z" /></svg> },
    active: { background: "color-mix(in srgb, #BFD9F2 45%, #FAF7F2)", color: "#1f4266", icon: <svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.4"><path d="M5 3.2 12.5 8 5 12.8V3.2z" /></svg> },
    blocked: { background: "color-mix(in srgb, #F5C2E0 45%, #FAF7F2)", color: "#7a2f57", icon: <svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.4"><path d="M5 1.5h6L14.5 5v6L11 14.5H5L1.5 11V5z" /><path d="M6 6v4M10 6v4" /></svg> },
    done: { background: "color-mix(in srgb, #A8E6C1 45%, #FAF7F2)", color: "#205c37", icon: <svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.4"><circle cx="8" cy="8" r="6.3" /><path d="M5.3 8.2 7 9.9l3.6-4" /></svg> },
  }[status] ?? {};
  return (
    <article aria-label={"Project: " + name} style={{ maxWidth: 420, padding: "18px 20px", borderRadius: 12, background: "#FAF7F2", border: "1px solid #24143022", boxSizing: "border-box", font: "14px/1.4 system-ui, sans-serif", color: "#241430" }}>
      <header style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 10 }}>
        <h3 style={{ margin: 0, fontSize: 16, fontWeight: 700 }}>{name}</h3>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 5, fontSize: 12, fontWeight: 600, padding: "4px 9px", borderRadius: 999, textTransform: "capitalize", flexShrink: 0, background: palette.background, color: palette.color }}>
          {palette.icon}
          <span>{status}</span>
        </span>
      </header>
      <p style={{ margin: "4px 0 14px", fontSize: 12.5, color: "#241430b3" }}>Owned by {owner}</p>
      <div role="progressbar" aria-valuenow={progress} aria-valuemin={0} aria-valuemax={100} aria-label={name + " progress"} style={{ height: 8, borderRadius: 999, background: "#24143014", overflow: "hidden" }}>
        <div style={{ height: "100%", borderRadius: 999, width: progress + "%", background: accent }} />
      </div>
      <p style={{ margin: "6px 0 0", fontSize: 12, fontWeight: 600, color: "#241430b3" }}>{progress}% complete</p>
    </article>
  );
}