Bottom Accent Alerts
Alerts with a colored underline along the bottom edge for a subtle cue. Use for inline messages in forms or cards that need only light emphasis.
Alerts with a colored underline along the bottom edge for a subtle cue. Use for inline messages in forms or cards that need only light emphasis.
Search blocks by description or jump to a page.
Bottom Accent Alerts is a set of five alert variants stacked in a single column. Each alert is a standard container with a bold underline accent along its bottom edge and a gentle shadow lift. The variants cover the full tone spectrum: a neutral default with no icon, a destructive variant with an X circle, a green success variant with a check circle, a yellow warning variant with a triangle, and a blue info variant with an info circle. Every alert pairs a short title with a one-line description.
The five variants are independent. You can use just one or any combination that your interface needs, and the copy in each title and description is straightforward to replace. If a particular tone does not apply to your context, remove that variant without affecting the others.
Reach for this block inside forms, task panels, or card surfaces in a project management workspace where notices must fit into a dense layout without overpowering surrounding content. The bottom accent is more restrained than a full border frame or a thick left rail, so it signals tone clearly while staying visually quiet. It works well when a left accent would compete with an existing left border or icon column, and it is calmer than elevated or glow variants when the surrounding UI already has strong depth cues.
A natural flow around it on a Components page:
Before
After
Use each variant for the status type it represents across task and project views. A few common fits:
Tip: keep the description to a single sentence so the accent line anchors a tight block and the notice reads at a glance without scrolling.