Alert

A callout with an icon, title and description. role="alert" does the announcing; the grid does the layout.

plain CSS — works everywhere

PreviewCode

<div role="alert" class="grid w-full max-w-md grid-cols-[auto_1fr] gap-x-3 rounded-lg border border-border px-4 py-3 text-sm">
  <svg class="mt-0.5 size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
    <circle cx="12" cy="12" r="10"></circle>
    <path d="M12 16v-4m0-4h.01"></path>
  </svg>
  <div>
    <p class="font-medium">Heads up!</p>
    <p class="mt-0.5 text-muted-foreground">You can build this whole thing with HTML and CSS.</p>
  </div>
</div>

<div role="alert" class="grid w-full max-w-md grid-cols-[auto_1fr] gap-x-3 rounded-lg border border-destructive/30 bg-destructive/5 px-4 py-3 text-sm text-destructive">
  <svg class="mt-0.5 size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
    <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"></path>
    <path d="M12 9v4m0 4h.01"></path>
  </svg>
  <div>
    <p class="font-medium">Session expired</p>
    <p class="mt-0.5 opacity-80">Sign in again to keep working. Your draft is saved.</p>
  </div>
</div>

How it works

grid-cols-[auto_1fr] puts the icon in its own column and lets the text wrap cleanly.
role="alert" makes screen readers announce it when it appears dynamically. For static page content you can drop it.
The destructive variant tints border, background and text from one token: border-destructive/30 bg-destructive/5 text-destructive.