Alert

A tinted message box with a colored bar on the start edge.

Add .alert to any block element. Give it role="alert" for urgent messages or role="status" for the rest, so screen readers announce it.

Your changes were saved as a draft.

Colors

A color class sets the bar, border, tint and text color.

A new version is available.

Payment received.

Your trial ends tomorrow.

The upload failed.

Headings and links inside an alert take its color.

Start with plain HTML, then read the docs when you need a variant.

Variable	Default
`--i-alert-padding-block`	`calc(var(--i-spacing) * 0.75)`
`--i-alert-padding-inline`	`var(--i-spacing)`
`--i-alert-accent-width`Colored bar on the start edge	`0.25rem`