Programme

Related projects managed together.

html

<section class="programme" aria-labelledby="programme-heading" style="--accent:#D9C8F0;">
  <header class="programme__head">
    <div>
      <h3 id="programme-heading" class="programme__name">Customer Trust Programme</h3>
      <p class="programme__sponsor">Sponsored by V. Marsh</p>
    </div>
    <span class="programme__status programme__status--on-track">
      <span class="programme__icon programme__icon--on-track" 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="programme__icon programme__icon--at-risk" aria-hidden="true"><svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.4"><path d="M8 2 1.3 14h13.4L8 2z"></path><path d="M8 6.6v3.2"></path><circle cx="8" cy="11.4" r=".9" fill="currentColor" stroke="none"></circle></svg></span>
      <span class="programme__icon programme__icon--delayed" 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="programme__status-label">on-track</span>
    </span>
  </header>
  <p class="programme__stat">3 projects in this programme</p>
  <ul class="programme__list" data-count="3">
    <li><span class="programme__bullet"></span>Identity verification revamp <em>&mdash; on track</em></li>
    <li><span class="programme__bullet"></span>Fraud signals pipeline <em>&mdash; on track</em></li>
    <li><span class="programme__bullet"></span>Support macro rewrite <em>&mdash; at risk</em></li>
  </ul>
</section>
<style>
.programme { max-width: 520px; 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; }
.programme__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; border-left: 3px solid var(--accent); padding-left: 10px; margin-bottom: 10px; }
.programme__name { margin: 0; font-size: 16px; font-weight: 700; }
.programme__sponsor { margin: 2px 0 0; font-size: 12.5px; color: #241430b3; }
.programme__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; }
.programme__icon { display: none; }
.programme__status--on-track .programme__icon--on-track, .programme__status--at-risk .programme__icon--at-risk, .programme__status--delayed .programme__icon--delayed { display: inline-flex; }
.programme__status--on-track { background: color-mix(in srgb, #A8E6C1 45%, #FAF7F2); color: #205c37; }
.programme__status--at-risk { background: color-mix(in srgb, #E8A020 25%, #FAF7F2); color: #7a5410; }
.programme__status--delayed { background: color-mix(in srgb, #F5C2E0 45%, #FAF7F2); color: #7a2f57; }
.programme__stat { margin: 0 0 10px; font-size: 13px; font-weight: 600; }
.programme__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.programme__list[data-count="1"] li:nth-child(n+2) { display: none; }
.programme__list[data-count="2"] li:nth-child(n+3) { display: none; }
.programme__list li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; padding: 8px 10px; border-radius: 8px; background: #24143008; }
.programme__list em { font-style: normal; color: #241430b3; margin-left: 4px; }
.programme__bullet { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
</style>

tailwind

<section aria-labelledby="programme-heading-tw" class="max-w-[520px] p-4.5 rounded-xl bg-[#FAF7F2] border border-[#24143022] box-border font-sans text-sm text-[#241430]" style="--accent:#D9C8F0;">
  <header class="flex items-start justify-between gap-2.5 border-l-[3px] pl-2.5 mb-2.5" style="border-color:#D9C8F0">
    <div>
      <h3 id="programme-heading-tw" class="m-0 text-base font-bold">Customer Trust Programme</h3>
      <p class="m-0 mt-0.5 text-[12.5px] text-[#241430]/70">Sponsored by V. Marsh</p>
    </div>
    <span class="programme-tw__status programme-tw__status--on-track inline-flex items-center gap-1.5 text-xs font-semibold px-2.5 py-1 rounded-full capitalize flex-shrink-0">
      <span class="programme-tw__icon programme-tw__icon--on-track" 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="programme-tw__icon programme-tw__icon--at-risk" aria-hidden="true"><svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.4"><path d="M8 2 1.3 14h13.4L8 2z"></path><path d="M8 6.6v3.2"></path><circle cx="8" cy="11.4" r=".9" fill="currentColor" stroke="none"></circle></svg></span>
      <span class="programme-tw__icon programme-tw__icon--delayed" 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>on-track</span>
    </span>
  </header>
  <p class="m-0 mb-2.5 text-[13px] font-semibold">3 projects in this programme</p>
  <ul class="programme-tw__list list-none m-0 p-0 flex flex-col gap-2" data-count="3">
    <li class="flex items-center gap-2 text-[13.5px] px-2.5 py-2 rounded-lg bg-[#24143008]"><span class="w-2 h-2 rounded-full flex-shrink-0" style="background:#D9C8F0"></span>Identity verification revamp <em class="not-italic text-[#241430]/70 ml-1">&mdash; on track</em></li>
    <li class="flex items-center gap-2 text-[13.5px] px-2.5 py-2 rounded-lg bg-[#24143008]"><span class="w-2 h-2 rounded-full flex-shrink-0" style="background:#D9C8F0"></span>Fraud signals pipeline <em class="not-italic text-[#241430]/70 ml-1">&mdash; on track</em></li>
    <li class="flex items-center gap-2 text-[13.5px] px-2.5 py-2 rounded-lg bg-[#24143008]"><span class="w-2 h-2 rounded-full flex-shrink-0" style="background:#D9C8F0"></span>Support macro rewrite <em class="not-italic text-[#241430]/70 ml-1">&mdash; at risk</em></li>
  </ul>
</section>
<style>
.programme-tw__icon { display: none; }
.programme-tw__status--on-track .programme-tw__icon--on-track, .programme-tw__status--at-risk .programme-tw__icon--at-risk, .programme-tw__status--delayed .programme-tw__icon--delayed { display: inline-flex; }
.programme-tw__status--on-track { background: color-mix(in srgb, #A8E6C1 45%, #FAF7F2); color: #205c37; }
.programme-tw__status--at-risk { background: color-mix(in srgb, #E8A020 25%, #FAF7F2); color: #7a5410; }
.programme-tw__status--delayed { background: color-mix(in srgb, #F5C2E0 45%, #FAF7F2); color: #7a2f57; }
.programme-tw__list[data-count="1"] li:nth-child(n+2) { display: none; }
.programme-tw__list[data-count="2"] li:nth-child(n+3) { display: none; }
</style>

react

export function Programme({
  name = "Customer Trust Programme",
  status = "on-track",
  projectsShown = 3,
  sponsor = "V. Marsh",
  accent = "#D9C8F0",
}) {
  const projects = [
    { label: "Identity verification revamp", note: "on track" },
    { label: "Fraud signals pipeline", note: "on track" },
    { label: "Support macro rewrite", note: "at risk" },
  ].slice(0, projectsShown);
  const palette = {
    "on-track": { 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> },
    "at-risk": { background: "color-mix(in srgb, #E8A020 25%, #FAF7F2)", color: "#7a5410", icon: <svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.4"><path d="M8 2 1.3 14h13.4L8 2z" /><path d="M8 6.6v3.2" /><circle cx="8" cy="11.4" r=".9" fill="currentColor" stroke="none" /></svg> },
    delayed: { 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> },
  }[status] ?? {};
  return (
    <section aria-labelledby="programme-heading-react" style={{ maxWidth: 520, 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, borderLeft: "3px solid " + accent, paddingLeft: 10, marginBottom: 10 }}>
        <div>
          <h3 id="programme-heading-react" style={{ margin: 0, fontSize: 16, fontWeight: 700 }}>{name}</h3>
          <p style={{ margin: "2px 0 0", fontSize: 12.5, color: "#241430b3" }}>Sponsored by {sponsor}</p>
        </div>
        <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: "0 0 10px", fontSize: 13, fontWeight: 600 }}>{projectsShown} projects in this programme</p>
      <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 8 }}>
        {projects.map((p) => (
          <li key={p.label} style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 13.5, padding: "8px 10px", borderRadius: 8, background: "#24143008" }}>
            <span style={{ width: 8, height: 8, borderRadius: "50%", background: accent, flexShrink: 0 }} />
            {p.label}
            <em style={{ fontStyle: "normal", color: "#241430b3", marginLeft: 4 }}>&mdash; {p.note}</em>
          </li>
        ))}
      </ul>
    </section>
  );
}