SLA

Service-level agreement.

html

<div class="sla" data-status="met" style="--accent:#A8E6C1;">
  <span class="sla__accent" style="background:#A8E6C1;" aria-hidden="true"></span>
  <div class="sla__head">
    <p class="sla__policy">First response</p>
    <span class="sla__badge">
      <svg class="sla__icon sla__icon--met" viewBox="0 0 20 20" aria-hidden="true"><path d="M4 10.5l3.5 3.5L16 5.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
      <svg class="sla__icon sla__icon--at-risk" viewBox="0 0 20 20" aria-hidden="true"><path d="M10 2L18.5 17H1.5L10 2z" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/><path d="M10 8v4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/><circle cx="10" cy="14.6" r="1" fill="currentColor"/></svg>
      <svg class="sla__icon sla__icon--breached" viewBox="0 0 20 20" aria-hidden="true"><circle cx="10" cy="10" r="8" fill="none" stroke="currentColor" stroke-width="1.6"/><path d="M7 7l6 6M13 7l-6 6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>
      <span class="sla__status-text">met</span>
    </span>
  </div>
  <p class="sla__target">Target: Respond within 4 hours</p>
</div>
<style>
.sla { width: 300px; padding: 18px 18px 18px 22px; position: relative; background: #FAF7F2; color: #241430; font: 14px/1.4 system-ui, sans-serif; border-radius: 14px; box-shadow: 0 8px 24px rgba(36,20,48,.12); box-sizing: border-box; }
.sla__accent { position: absolute; left: 0; top: 14px; bottom: 14px; width: 5px; border-radius: 3px; }
.sla__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.sla__policy { margin: 0; font-weight: 700; font-size: 15px; }
.sla__badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-weight: 700; font-size: 12px; text-transform: capitalize; white-space: nowrap; }
.sla__icon { width: 13px; height: 13px; display: none; flex-shrink: 0; }
.sla[data-status="met"] .sla__icon--met { display: block; }
.sla[data-status="at risk"] .sla__icon--at-risk { display: block; }
.sla[data-status="breached"] .sla__icon--breached { display: block; }
.sla[data-status="met"] .sla__badge { background: #A8E6C1; color: #17532F; }
.sla[data-status="at risk"] .sla__badge { background: #E8A020; color: #4A2E00; }
.sla[data-status="breached"] .sla__badge { background: #F5C2E0; color: #7A1440; }
.sla__target { margin: 12px 0 0; color: #241430b3; font-size: 13px; }
</style>

tailwind

<div class="sla-tw relative w-[300px] pl-[22px] pr-[18px] py-[18px] bg-[#FAF7F2] text-[#241430] font-sans text-sm rounded-2xl shadow-lg box-border" data-status="met" style="--accent:#A8E6C1;">
  <span class="absolute left-0 top-3.5 bottom-3.5 w-[5px] rounded-sm" style="background:#A8E6C1;" aria-hidden="true"></span>
  <div class="flex items-start justify-between gap-2.5">
    <p class="m-0 font-bold text-[15px]">First response</p>
    <span class="sla-tw__badge inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full font-bold text-xs capitalize whitespace-nowrap">
      <svg class="sla-tw__icon sla-tw__icon--met w-[13px] h-[13px] flex-shrink-0" viewBox="0 0 20 20" aria-hidden="true"><path d="M4 10.5l3.5 3.5L16 5.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
      <svg class="sla-tw__icon sla-tw__icon--at-risk w-[13px] h-[13px] flex-shrink-0" viewBox="0 0 20 20" aria-hidden="true"><path d="M10 2L18.5 17H1.5L10 2z" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/><path d="M10 8v4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/><circle cx="10" cy="14.6" r="1" fill="currentColor"/></svg>
      <svg class="sla-tw__icon sla-tw__icon--breached w-[13px] h-[13px] flex-shrink-0" viewBox="0 0 20 20" aria-hidden="true"><circle cx="10" cy="10" r="8" fill="none" stroke="currentColor" stroke-width="1.6"/><path d="M7 7l6 6M13 7l-6 6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>
      met
    </span>
  </div>
  <p class="mt-3 mb-0 text-[13px] text-[#241430]/70">Target: Respond within 4 hours</p>
</div>
<style>
.sla-tw__icon { display: none; }
.sla-tw[data-status="met"] .sla-tw__icon--met { display: block; }
.sla-tw[data-status="at risk"] .sla-tw__icon--at-risk { display: block; }
.sla-tw[data-status="breached"] .sla-tw__icon--breached { display: block; }
.sla-tw[data-status="met"] .sla-tw__badge { background: #A8E6C1; color: #17532F; }
.sla-tw[data-status="at risk"] .sla-tw__badge { background: #E8A020; color: #4A2E00; }
.sla-tw[data-status="breached"] .sla-tw__badge { background: #F5C2E0; color: #7A1440; }
</style>

react

export function Sla({
  policy = "First response",
  target = "Respond within 4 hours",
  status = "met",
  accent = "#A8E6C1",
  showTarget = true,
}) {
  const palette = {
    met: { background: "#A8E6C1", color: "#17532F" },
    "at risk": { background: "#E8A020", color: "#4A2E00" },
    breached: { background: "#F5C2E0", color: "#7A1440" },
  }[status] ?? {};
  return (
    <div style={{ width: 300, position: "relative", padding: "18px 18px 18px 22px", background: "#FAF7F2",
      color: "#241430", fontFamily: "system-ui, sans-serif", fontSize: 14, borderRadius: 14,
      boxShadow: "0 8px 24px rgba(36,20,48,.12)", boxSizing: "border-box" }}>
      <span aria-hidden="true" style={{ position: "absolute", left: 0, top: 14, bottom: 14, width: 5, borderRadius: 3, background: accent }} />
      <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 10 }}>
        <p style={{ margin: 0, fontWeight: 700, fontSize: 15 }}>{policy}</p>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 5, padding: "3px 10px", borderRadius: 999,
          fontWeight: 700, fontSize: 12, textTransform: "capitalize", whiteSpace: "nowrap", ...palette }}>
          {status === "met" && (
            <svg width="13" height="13" viewBox="0 0 20 20" aria-hidden="true"><path d="M4 10.5l3.5 3.5L16 5.5" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /></svg>
          )}
          {status === "at risk" && (
            <svg width="13" height="13" viewBox="0 0 20 20" aria-hidden="true"><path d="M10 2L18.5 17H1.5L10 2z" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round" /><path d="M10 8v4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" /><circle cx="10" cy="14.6" r="1" fill="currentColor" /></svg>
          )}
          {status === "breached" && (
            <svg width="13" height="13" viewBox="0 0 20 20" aria-hidden="true"><circle cx="10" cy="10" r="8" fill="none" stroke="currentColor" strokeWidth="1.6" /><path d="M7 7l6 6M13 7l-6 6" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" /></svg>
          )}
          {status}
        </span>
      </div>
      {showTarget && <p style={{ margin: "12px 0 0", color: "#241430b3", fontSize: 13 }}>Target: {target}</p>}
    </div>
  );
}