Project Card

Project summary.

html

<article class="projcard projcard--on-track" style="--c:#A8E6C1;">
  <div class="projcard__head">
    <h3 class="projcard__name">Atlas migration</h3>
    <span class="projcard__status"></span>
  </div>
  <p class="projcard__owner">Owner: Priya Nair</p>
  <div class="projcard__track" role="img" aria-label="64 percent complete">
    <div class="projcard__fill" style="width:64%;"></div>
  </div>
  <span class="projcard__pct">64%</span>
</article>
<style>
.projcard { font: 13px system-ui, sans-serif; color: #241430; border: 1px solid #24143018; border-left: 4px solid var(--c); border-radius: 10px; padding: 14px; max-width: 260px; }
.projcard__head { display: flex; justify-content: space-between; align-items: center; }
.projcard__name { margin: 0; font-size: 15px; }
.projcard__status { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.projcard--on-track .projcard__status { background: #2f8f4e33; color: #2f8f4e; }
.projcard--on-track .projcard__status::before { content: "On track"; }
.projcard--at-risk .projcard__status { background: #E8A02033; color: #8a5c0e; }
.projcard--at-risk .projcard__status::before { content: "At risk"; }
.projcard--delayed .projcard__status { background: #b3261e33; color: #b3261e; }
.projcard--delayed .projcard__status::before { content: "Delayed"; }
.projcard__owner { margin: 6px 0 10px; opacity: .7; font-size: 12px; }
.projcard__track { height: 8px; border-radius: 999px; background: #24143014; overflow: hidden; }
.projcard__fill { height: 100%; background: var(--c); border-radius: 999px; }
.projcard__pct { display: block; margin-top: 4px; font-size: 11px; opacity: .7; }
</style>

tailwind

<article class="projcard-tw projcard-tw--on-track font-sans text-[13px] text-[#241430] border border-[#24143018] border-l-4 rounded-[10px] p-3.5 max-w-xs" style="border-left-color:#A8E6C1;" >
  <div class="flex justify-between items-center">
    <h3 class="m-0 text-[15px]">Atlas migration</h3>
    <span class="projcard-tw__status text-[11px] font-bold px-2 py-0.5 rounded-full"></span>
  </div>
  <p class="my-1.5 opacity-70 text-xs">Owner: Priya Nair</p>
  <div class="h-2 rounded-full bg-[#24143014] overflow-hidden" role="img" aria-label="64 percent complete">
    <div class="h-full rounded-full" style="width:64%;background:#A8E6C1;"></div>
  </div>
  <span class="block mt-1 text-[11px] opacity-70">64%</span>
</article>
<style>
.projcard-tw--on-track .projcard-tw__status { background: #2f8f4e33; color: #2f8f4e; }
.projcard-tw--on-track .projcard-tw__status::before { content: "On track"; }
.projcard-tw--at-risk .projcard-tw__status { background: #E8A02033; color: #8a5c0e; }
.projcard-tw--at-risk .projcard-tw__status::before { content: "At risk"; }
.projcard-tw--delayed .projcard-tw__status { background: #b3261e33; color: #b3261e; }
.projcard-tw--delayed .projcard-tw__status::before { content: "Delayed"; }
</style>

react

export function ProjectCard({
  name = "Atlas migration",
  owner = "Priya Nair",
  status = "on-track",
  progress = 64,
  color = "#A8E6C1",
}) {
  const badge = {
    "on-track": { background: "#2f8f4e33", color: "#2f8f4e", text: "On track" },
    "at-risk": { background: "#E8A02033", color: "#8a5c0e", text: "At risk" },
    delayed: { background: "#b3261e33", color: "#b3261e", text: "Delayed" },
  }[status] ?? {};
  return (
    <article style={{ font: "13px system-ui, sans-serif", color: "#241430", border: "1px solid #24143018", borderLeft: "4px solid " + color, borderRadius: 10, padding: 14, maxWidth: 260 }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <h3 style={{ margin: 0, fontSize: 15 }}>{name}</h3>
        <span style={{ fontSize: 11, fontWeight: 700, padding: "2px 8px", borderRadius: 999, background: badge.background, color: badge.color }}>{badge.text}</span>
      </div>
      <p style={{ margin: "6px 0 10px", opacity: 0.7, fontSize: 12 }}>Owner: {owner}</p>
      <div role="img" aria-label={progress + " percent complete"} style={{ height: 8, borderRadius: 999, background: "#24143014", overflow: "hidden" }}>
        <div style={{ height: "100%", width: progress + "%", background: color, borderRadius: 999 }} />
      </div>
      <span style={{ display: "block", marginTop: 4, fontSize: 11, opacity: 0.7 }}>{progress}%</span>
    </article>
  );
}