Top Accent Alerts
Alerts topped with a colored bar across the upper edge for a header cue. Use for grouped notices where the accent reads like a small banner.
Alerts topped with a colored bar across the upper edge for a header cue. Use for grouped notices where the accent reads like a small banner.
Search blocks by description or jump to a page.
Top Accent Alerts shows five alert variants stacked in a single column. Each alert carries a thick colored bar along its top edge, followed by an optional status icon, a bold title, and a short description below. The five tones covered are default (neutral), destructive (red), success (green), warning (yellow), and info (blue), so a reader can see the full range of states at once.
Every alert is independent. You can use any one tone in isolation, reorder the stack, or drop variants that do not apply to your product. The icon, title, and description copy are all free to change, and you can remove the icon from any row without affecting the rest of the layout.
Reach for this block when you need a set of status notices that feel structured but not heavy. The top bar reads like a small header stripe, which works well in HR and hiring workflows where a candidate portal or recruiter dashboard needs to surface form validation results, submission confirmations, deadline warnings, and info notices in one consistent pattern. Compared to a left accent bar, the top bar gives each alert a slightly more header-like presence, which suits stacked contexts where alerts appear one after another rather than inline.
A natural flow around it on a Components page:
Before
After
Each tone maps naturally to a real event in a hiring or onboarding flow:
Tip: if you only need two or three tones on a given page, remove the unused alerts entirely so the stack stays concise and scannable.