Milestone

Significant project checkpoint.

html

<figure class="milestone" aria-label="Milestone: Beta launch, 14 Sep 2026">
  <svg class="milestone__track" viewBox="0 0 100 20" preserveAspectRatio="none" width="100%" height="20" aria-hidden="true">
    <line x1="2" y1="10" x2="98" y2="10" stroke="#24143033" stroke-width="2"></line>
    <circle class="milestone__marker" cx="62" cy="10" r="5" fill="#E8A020" stroke="#241430" stroke-width="1"></circle>
  </svg>
  <figcaption class="milestone__caption">
    <h3 class="milestone__name">Beta launch</h3>
    <p class="milestone__date">14 Sep 2026</p>
    
    <span class="milestone__state milestone__state--upcoming"><svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.4"><path d="M4 14V2"></path><path d="M4 3h8l-2 2.5L12 8H4"></path></svg>Upcoming</span>
  </figcaption>
</figure>
<style>
.milestone { margin: 0; max-width: 480px; 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; }
.milestone__track { display: block; width: 100%; margin-bottom: 14px; }
.milestone__caption { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.milestone__name { margin: 0; font-size: 15px; font-weight: 700; flex-basis: 100%; }
.milestone__date { margin: 0; font-size: 13px; color: #241430b3; }
.milestone__state { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; font: 600 12px/1 system-ui, sans-serif; padding: 4px 9px; border-radius: 999px; }
.milestone__state--upcoming { background: color-mix(in srgb, #D9C8F0 45%, #FAF7F2); color: #4a3a68; }
.milestone__state--reached { background: color-mix(in srgb, #A8E6C1 45%, #FAF7F2); color: #205c37; }
</style>

tailwind

<figure aria-label="Milestone: Beta launch, 14 Sep 2026" class="m-0 max-w-[480px] p-4.5 rounded-xl bg-[#FAF7F2] border border-[#24143022] box-border font-sans text-sm text-[#241430]">
  <svg class="block w-full mb-3.5" viewBox="0 0 100 20" preserveAspectRatio="none" width="100%" height="20" aria-hidden="true">
    <line x1="2" y1="10" x2="98" y2="10" stroke="#24143033" stroke-width="2"></line>
    <circle cx="62" cy="10" r="5" fill="#E8A020" stroke="#241430" stroke-width="1"></circle>
  </svg>
  <figcaption class="flex flex-wrap items-center gap-x-3 gap-y-1">
    <h3 class="basis-full m-0 text-[15px] font-bold">Beta launch</h3>
    <p class="m-0 text-[13px] text-[#241430]/70">14 Sep 2026</p>
    
    <span class="ml-auto inline-flex items-center gap-1.5 text-xs font-semibold px-2.5 py-1 rounded-full bg-[#D9C8F0]/45 text-[#4a3a68]"><svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.4"><path d="M4 14V2"></path><path d="M4 3h8l-2 2.5L12 8H4"></path></svg>Upcoming</span>
  </figcaption>
</figure>

react

export function Milestone({
  name = "Beta launch",
  date = "14 Sep 2026",
  progress = 62,
  reached = false,
  accent = "#E8A020",
}) {
  return (
    <figure aria-label={"Milestone: " + name + ", " + date} style={{ margin: 0, maxWidth: 480, padding: "18px 20px", borderRadius: 12, background: "#FAF7F2", border: "1px solid #24143022", boxSizing: "border-box", font: "14px/1.4 system-ui, sans-serif", color: "#241430" }}>
      <svg style={{ display: "block", width: "100%", marginBottom: 14 }} viewBox="0 0 100 20" preserveAspectRatio="none" width="100%" height="20" aria-hidden="true">
        <line x1="2" y1="10" x2="98" y2="10" stroke="#24143033" strokeWidth="2" />
        <circle cx={progress} cy="10" r="5" fill={accent} stroke="#241430" strokeWidth="1" />
      </svg>
      <figcaption style={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: "4px 12px" }}>
        <h3 style={{ margin: 0, fontSize: 15, fontWeight: 700, flexBasis: "100%" }}>{name}</h3>
        <p style={{ margin: 0, fontSize: 13, color: "#241430b3" }}>{date}</p>
        {reached ? (
          <span style={{ marginLeft: "auto", display: "inline-flex", alignItems: "center", gap: 5, fontSize: 12, fontWeight: 600, padding: "4px 9px", borderRadius: 999, background: "color-mix(in srgb, #A8E6C1 45%, #FAF7F2)", color: "#205c37" }}>
            <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>
            Reached
          </span>
        ) : (
          <span style={{ marginLeft: "auto", display: "inline-flex", alignItems: "center", gap: 5, fontSize: 12, fontWeight: 600, padding: "4px 9px", borderRadius: 999, background: "color-mix(in srgb, #D9C8F0 45%, #FAF7F2)", color: "#4a3a68" }}>
            <svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.4"><path d="M4 14V2" /><path d="M4 3h8l-2 2.5L12 8H4" /></svg>
            Upcoming
          </span>
        )}
      </figcaption>
    </figure>
  );
}