Right Accent Alerts
Alerts with a colored bar on the right edge for a mirrored accent. Use in right aligned layouts or when the left side already holds an icon.
Alerts with a colored bar on the right edge for a mirrored accent. Use in right aligned layouts or when the left side already holds an icon.
Search blocks by description or jump to a page.
Right Accent Alerts is a stacked set of five alert variants, each carrying a bold colored bar on the right edge of the container. Reading top to bottom you get a default neutral notice, a destructive error with an X icon, a green success with a check icon, a yellow warning with a triangle icon, and a blue informational with a circle icon. Every card shows a short title above a one-line description, and a subtle shadow lifts each card slightly off the surface.
The five variants are independent. You can remove any that do not fit your page, rewrite the titles and descriptions freely, and swap the icons for others from the same library. The accent color on the right edge is the only fixed visual motif shared across the set.
Reach for this block in interfaces where the accent bar on the left edge is already occupied, for example when each alert sits in a panel that carries its own left border or an icon column on that side. It suits property listing detail pages, offer summaries, and agent dashboards in a real estate marketplace where status feedback (saved search, price drop alert, booking confirmed) appears inside right-aligned sidebar panels.
A natural flow around it on a Components page:
Before
After
The set covers every common status tone in a single drop. A few specific ways to use it in a real estate context:
Tip: if the page background is white, the shadow on each card reads cleanly; on a gray surface consider removing it so the cards sit flush.