Search blocks by description or jump to a page.
Alerts framed by a colored border on every side for strong emphasis. Use when a notice must stand out clearly against a busy page or dashboard.
All Sides Accent Alerts renders a vertical stack of five alert variants, each framed by a thick border on every edge. The variants run in order: a neutral default, a destructive notice with an X icon, a green success with a checkmark, a yellow warning with a triangle, and a blue info with a circle. Every alert pairs a bold title with a short description, and most carry a status icon aligned to the left of the text.
Each alert is self-contained, so you can use any subset of the five, swap the titles and descriptions for your own copy, or reorder them to match the priority of your messages. The full-perimeter border is the shared visual trait; removing or adding variants does not affect the others.
Reach for this block when notices need to stand out against a content heavy page and a single accent edge would not provide enough contrast. On an online education platform it suits course status panels where learners need to see at a glance whether an assignment passed, failed, or needs attention, and where the dashboard behind the alerts is already dense with progress bars and cards.
A natural flow around it on a Components page:
Before
After
Each slot in the stack maps to a distinct status tone, so the block covers the full range of feedback a learner or instructor might see in one view:
Tip: limit the stack to the two or three variants that are actually relevant at runtime so the page does not read as permanently alarming.