Elevated Alerts
Alerts raised with a soft shadow so they lift off the surface. Use for floating notifications or messages that should feel above the content.
Alerts raised with a soft shadow so they lift off the surface. Use for floating notifications or messages that should feel above the content.
Search blocks by description or jump to a page.
Elevated Alerts is a vertical stack of five alert cards, each carrying a soft drop shadow that lifts it off the page surface. The set covers every common status tone in order: a neutral default, a destructive error in red, a success in green, a warning in yellow, and an info notice in blue. Each card pairs a status icon on the left with a bold title and a short description beside it.
The five variants are independent of one another, so you can drop in any subset that your flow requires. The title, description, and icon on each card are straightforward to swap, and the shadow treatment is the one constant that ties the set together visually.
Use this block when your interface surfaces notifications that float above the main content rather than sitting flush inside a panel or form. It is a natural fit for an ecommerce storefront: order confirmations, payment failures, low stock warnings, and shipping updates all benefit from the slightly raised feel that signals the message is above the noise. Where Basic Alerts blend into the page, the elevated treatment gives each notice a card like presence that draws the eye without relying on color alone.
A natural flow around it on a Components page:
Before
After
Each card is a self contained notice that works across the full range of transactional feedback an online store generates:
Tip: if you only need two or three tones, remove the unused cards rather than leaving them with placeholder copy; a shorter stack reads more deliberately than a full five.