Escalation

Movement to a higher level of attention/authority.

html

<div class="escalation" data-level="L2" style="--accent:#E8A020;">
  <p class="escalation__issue">Payment gateway outage</p>
  <div class="escalation__level">
    <span class="escalation__chev"><svg viewBox="0 0 16 16" width="11" height="11" fill="none" aria-hidden="true"><path d="M4 3l5 5-5 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
    <span class="escalation__chev"><svg viewBox="0 0 16 16" width="11" height="11" fill="none" aria-hidden="true"><path d="M4 3l5 5-5 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
    <span class="escalation__chev"><svg viewBox="0 0 16 16" width="11" height="11" fill="none" aria-hidden="true"><path d="M4 3l5 5-5 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
    <span class="escalation__level-text">L2</span>
  </div>
  <p class="escalation__body">Escalated to <strong>the on-call lead, Jordan Lee</strong> — unresolved after 2 hours</p>
</div>
<style>
.escalation { font: 15px/1.5 system-ui, sans-serif; max-width: 360px; padding: 20px; background: #FAF7F2; color: #241430; border-radius: 14px; border: 1.5px solid #24143020; }
.escalation__issue { margin: 0 0 10px; font-weight: 600; font-size: 16px; }
.escalation__level { display: inline-flex; align-items: center; gap: 3px; padding: 4px 10px; border-radius: 999px; background: #24143010; margin-bottom: 10px; }
.escalation__chev { color: #24143030; }
.escalation[data-level="L1"] .escalation__chev:nth-child(-n+1) { color: var(--accent); }
.escalation[data-level="L2"] .escalation__chev:nth-child(-n+2) { color: var(--accent); }
.escalation[data-level="L3"] .escalation__chev:nth-child(-n+3) { color: var(--accent); }
.escalation__level-text { margin-left: 4px; font-weight: 700; font-size: 13px; }
.escalation__body { margin: 0; font-size: 14px; }
</style>

tailwind

<div class="escalation-tw font-sans max-w-[360px] p-5 bg-[#FAF7F2] text-[#241430] rounded-2xl border-[1.5px] border-[#24143020]" data-level="L2">
  <p class="m-0 mb-2.5 font-semibold text-base">Payment gateway outage</p>
  <div class="inline-flex items-center gap-[3px] py-1 px-2.5 rounded-full bg-[#24143010] mb-2.5">
    <span class="escalation-tw__chev"><svg viewBox="0 0 16 16" width="11" height="11" fill="none" aria-hidden="true"><path d="M4 3l5 5-5 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
    <span class="escalation-tw__chev"><svg viewBox="0 0 16 16" width="11" height="11" fill="none" aria-hidden="true"><path d="M4 3l5 5-5 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
    <span class="escalation-tw__chev"><svg viewBox="0 0 16 16" width="11" height="11" fill="none" aria-hidden="true"><path d="M4 3l5 5-5 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
    <span class="ml-1 font-bold text-[13px]">L2</span>
  </div>
  <p class="m-0 text-sm">Escalated to <strong>the on-call lead, Jordan Lee</strong> — unresolved after 2 hours</p>
</div>
<style>
.escalation-tw__chev { color: #24143030; }
.escalation-tw[data-level="L1"] .escalation-tw__chev:nth-child(-n+1) { color: #E8A020; }
.escalation-tw[data-level="L2"] .escalation-tw__chev:nth-child(-n+2) { color: #E8A020; }
.escalation-tw[data-level="L3"] .escalation-tw__chev:nth-child(-n+3) { color: #E8A020; }
</style>

react

export function Escalation({
  issueTitle = "Payment gateway outage",
  escalatedTo = "the on-call lead, Jordan Lee",
  reason = "unresolved after 2 hours",
  level = "L2",
  accent = "#E8A020",
}) {
  const active = { L1: 1, L2: 2, L3: 3 }[level] ?? 1;
  return (
    <div style={{ fontFamily: "system-ui, sans-serif", maxWidth: 360, padding: 20, background: "#FAF7F2",
      color: "#241430", borderRadius: 14, border: "1.5px solid #24143020" }}>
      <p style={{ margin: "0 0 10px", fontWeight: 600, fontSize: 16 }}>{issueTitle}</p>
      <div style={{ display: "inline-flex", alignItems: "center", gap: 3, padding: "4px 10px", borderRadius: 999, background: "#24143010", marginBottom: 10 }}>
        {[1, 2, 3].map((n) => (
          <span key={n} style={{ color: n <= active ? accent : "#24143030" }} dangerouslySetInnerHTML={{ __html: "<svg viewBox=\"0 0 16 16\" width=\"11\" height=\"11\" fill=\"none\" aria-hidden=\"true\"><path d=\"M4 3l5 5-5 5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>" }} />
        ))}
        <span style={{ marginLeft: 4, fontWeight: 700, fontSize: 13 }}>{level}</span>
      </div>
      <p style={{ margin: 0, fontSize: 14 }}>Escalated to <strong>{escalatedTo}</strong> — {reason}</p>
    </div>
  );
}