Stale

Data may be outdated.

html

<div class="stl" data-stale="true" style="--accent:#E8A020;">
  <p class="stl__label">Exchange rate</p>
  <p class="stl__value">1 GBP = 1.27 USD</p>
  <p class="stl__meta">Updated <time datetime="2026-08-11T09:00:00Z">7 days ago</time><span class="stl__badge">stale</span></p>
</div>
<style>
.stl { width: 260px; box-sizing: border-box; font: 14px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 16px 18px; border-radius: 12px; border-left: 4px solid transparent; }
.stl[data-stale="true"] { border-left-color: var(--accent); }
.stl__label { margin: 0 0 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #241430888; }
.stl__value { margin: 0 0 6px; font-size: 18px; font-weight: 700; }
.stl[data-stale="true"] .stl__value { opacity: .6; }
.stl__meta { margin: 0; font-size: 11px; color: #241430888; display: flex; align-items: center; gap: 6px; }
.stl__badge { background: var(--accent); color: #241430; font-weight: 700; padding: 1px 7px; border-radius: 999px; font-size: 10px; text-transform: uppercase; }
</style>

tailwind

<div class="stl-tw w-[260px] box-border font-sans text-sm text-[#241430] bg-[#FAF7F2] px-[18px] py-4 rounded-xl border-l-4 border-transparent" data-stale="true">
  <p class="m-0 mb-1 text-[11px] font-bold uppercase tracking-wide text-[#241430]/55">Exchange rate</p>
  <p class="stl-tw__value m-0 mb-1.5 text-lg font-bold">1 GBP = 1.27 USD</p>
  <p class="m-0 text-[11px] text-[#241430]/55 flex items-center gap-1.5">Updated <time datetime="2026-08-11T09:00:00Z">7 days ago</time><span class="font-bold px-1.5 rounded-full text-[10px] uppercase" style="background:#E8A020">stale</span></p>
</div>
<style>
.stl-tw[data-stale="true"] { border-left-color: #E8A020; }
.stl-tw[data-stale="true"] .stl-tw__value { opacity: .6; }
</style>

react

export function StaleState({
  label = "Exchange rate",
  value = "1 GBP = 1.27 USD",
  accent = "#E8A020",
  force = true,
}) {
  return (
    <div style={{ width: 260, boxSizing: "border-box", font: "14px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: "16px 18px", borderRadius: 12, borderLeft: `4px solid ${force ? accent : "transparent"}` }}>
      <p style={{ margin: "0 0 4px", fontSize: 11, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.04em", color: "#241430888" }}>{label}</p>
      <p style={{ margin: "0 0 6px", fontSize: 18, fontWeight: 700, opacity: force ? 0.6 : 1 }}>{value}</p>
      <p style={{ margin: 0, fontSize: 11, color: "#241430888", display: "flex", alignItems: "center", gap: 6 }}>
        Updated <time dateTime="2026-08-11T09:00:00Z">7 days ago</time>
        {force && <span style={{ background: accent, color: "#241430", fontWeight: 700, padding: "1px 7px", borderRadius: 999, fontSize: 10, textTransform: "uppercase" }}>stale</span>}
      </p>
    </div>
  );
}