Accent Border Alerts
Alerts with a colored bar on the left edge that signals tone at a glance. Use for status messages where the color cue matters more than the icon.
Alerts with a colored bar on the left edge that signals tone at a glance. Use for status messages where the color cue matters more than the icon.
Search blocks by description or jump to a page.
Accent Border Alerts is a stacked set of five alert variants, each sharing the same left-side colored bar treatment. A narrow four-pixel bar runs the full height of the left edge, and the matching icon, title, and description sit to its right. The five variants cover the full status range: a neutral default, a destructive red, a green success, a yellow warning, and a blue informational notice.
All five cards share identical structure and spacing, so the set reads as a cohesive system. You can use any subset of them, swap the icon for one that fits your product, and rewrite the title and description freely without altering the visual hierarchy.
This layout fits anywhere a product needs to communicate patient or appointment status at a glance. In a healthcare scheduling product, the left bar lets a busy clinician scan a list of system messages and catch the red destructive notice or the green confirmation without reading the full text. It is a better choice than a basic outlined alert when the tone of a message must be unmistakable, and a better choice than a full border alert when you want emphasis that does not overwhelm the surrounding content.
A natural flow around it on a Components page:
Before
After
Each alert is an independent unit you can mix, match, or extend:
Tip: keep each description to one or two short sentences so the bar color carries the message and the text confirms it.