System Notification

Application/system event.

html

<div class="sysnote sysnote--info" style="border-color:#BFD9F2;" role="status">
  <span class="sysnote__icon" style="background:#BFD9F2;" aria-hidden="true"></span>
  <div class="sysnote__body">
    <p class="sysnote__title">Scheduled maintenance</p>
    <p class="sysnote__detail">The service will be unavailable for 10 minutes starting at midnight.</p>
  </div>
  <button class="sysnote__close" type="button" aria-label="Dismiss">×</button>
</div>
<style>
.sysnote { display: flex; align-items: flex-start; gap: 10px; width: 340px; box-sizing: border-box; padding: 12px 14px; background: #FAF7F2; color: #241430; border: 1.5px solid; border-radius: 10px; font: 13px/1.4 system-ui, sans-serif; }
.sysnote__icon { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; position: relative; margin-top: 1px; }
.sysnote__icon::before { position: absolute; inset: 0; display: grid; place-items: center; font: 700 11px/1 system-ui, sans-serif; color: #FAF7F2; }
.sysnote--info .sysnote__icon::before { content: "i"; }
.sysnote--warning .sysnote__icon::before { content: "!"; }
.sysnote--critical .sysnote__icon::before { content: "×"; }
.sysnote__body { flex: 1; }
.sysnote__title { margin: 0 0 2px; font-weight: 600; }
.sysnote__detail { margin: 0; color: #241430cc; }
.sysnote__close { border: none; background: transparent; font-size: 15px; line-height: 1; cursor: pointer; color: #241430; padding: 0; }
.sysnote__close:focus-visible { outline: 2px solid #241430; outline-offset: 2px; }
</style>

tailwind

<div role="status" class="sysnote-tw sysnote-tw--info flex items-start gap-2.5 w-[340px] box-border p-3.5 bg-[#FAF7F2] text-[#241430] border-[1.5px] rounded-lg text-[13px]" style="border-color:#BFD9F2">
  <span aria-hidden="true" class="sysnote-tw__icon w-5 h-5 rounded-full flex-shrink-0 relative mt-px" style="background:#BFD9F2"></span>
  <div class="flex-1">
    <p class="m-0 mb-0.5 font-semibold">Scheduled maintenance</p>
    <p class="m-0 text-[#241430]/80">The service will be unavailable for 10 minutes starting at midnight.</p>
  </div>
  <button type="button" aria-label="Dismiss" class="border-0 bg-transparent text-[15px] leading-none cursor-pointer p-0">×</button>
</div>
<style>
.sysnote-tw__icon::before { position: absolute; inset: 0; display: grid; place-items: center; font: 700 11px/1 system-ui, sans-serif; color: #FAF7F2; }
.sysnote-tw--info .sysnote-tw__icon::before { content: "i"; }
.sysnote-tw--warning .sysnote-tw__icon::before { content: "!"; }
.sysnote-tw--critical .sysnote-tw__icon::before { content: "×"; }
</style>

react

export function SystemNotification({
  title = "Scheduled maintenance",
  detail = "The service will be unavailable for 10 minutes starting at midnight.",
  severity = "info",
  accent = "#BFD9F2",
  dismissible = true,
}) {
  const icon = { info: "i", warning: "!", critical: "×" }[severity] ?? "•";
  return (
    <div role="status" style={{ display: "flex", alignItems: "flex-start", gap: 10, width: 340, boxSizing: "border-box",
      padding: "12px 14px", background: "#FAF7F2", color: "#241430", border: `1.5px solid ${accent}`, borderRadius: 10, fontSize: 13 }}>
      <span aria-hidden="true" style={{ width: 20, height: 20, borderRadius: "50%", background: accent, flexShrink: 0, marginTop: 1,
        display: "grid", placeItems: "center", color: "#FAF7F2", fontSize: 11, fontWeight: 700 }}>{icon}</span>
      <div style={{ flex: 1 }}>
        <p style={{ margin: "0 0 2px", fontWeight: 600 }}>{title}</p>
        <p style={{ margin: 0, color: "#241430cc" }}>{detail}</p>
      </div>
      {dismissible && (
        <button type="button" aria-label="Dismiss" style={{ border: "none", background: "transparent", fontSize: 15, cursor: "pointer", padding: 0 }}>×</button>
      )}
    </div>
  );
}