# Alert > Contextual feedback banners for info, success, warning, and danger. An alert is an inline banner that gives the reader feedback in place: a helpful note, a success confirmation, a warning, or an error. It sits in the flow of the page rather than floating over it, which makes it the right choice for messages tied to a specific spot, like a form section or a settings panel. Each variant pairs an icon with a title and a short description. ```summit

Heads up

Your trial ends in five days. Add a card to keep your projects.

Saved

Your changes are live and visible to your team.

Almost out of space

You have used 92% of your storage. Free some up before uploading more.

Payment failed

We could not charge your card. Update it to avoid losing access.

``` ## Anatomy An alert is a flex row of `.s-alert` plus a variant class: - `.s-alert-info`, `.s-alert-success`, `.s-alert-warning`, or `.s-alert-danger` set the background tint, border, and icon color from the semantic palette. - `.s-alert-icon` on an inline `` sizes and colors the leading icon. Use `stroke="currentColor"` so it inherits the variant color. - `.s-alert-title` is the bold headline and `.s-alert-desc` is the muted body. Wrap them together in a `
` so they stack beside the icon. Leave off the variant class for a neutral, surface-colored alert. You can also drop the title and keep a single `.s-alert-desc` for a one-line note. ## Copy ```html

Almost out of space

You have used 92% of your storage.

``` ## Notes - Pick the variant by meaning, not color. Danger is for errors and destructive outcomes, warning for things that need attention soon. - The icon is decorative here because the title carries the message. If an alert has no text title, add an `aria-label` to convey its intent. - Alerts stay in the layout. For transient, stacked messages that appear and auto-dismiss, use a toast; for status labels, use a [badge](https://summitjs.velofy.co/comp-badge/). See the whole component set on the [overview](https://summitjs.velofy.co/components/).