About this block

Pulse Border Alerts stacks five alert variants in a vertical column. Each alert shows a title and a short description inside a soft shadowed container, and a pseudo-element border on top of that container repeats a gentle pulse animation so the outline breathes continuously. The five tones are default, destructive, success, warning, and info. The destructive, success, warning, and info variants each carry a matching status icon beside the title so the tone is clear at a glance even before reading the text.

The five alerts are independent of each other. You can keep only the variants your interface needs, swap in your own titles and descriptions, or reorder them to match the priority of the messages on your page. The animation runs on every alert in the set, so removing one does not break the rhythm of the others.

When to use

Reach for this block when a notice must hold attention beyond the moment it appears. On a logistics and delivery platform the pulsing border suits a shipment exception alert, a carrier delay warning, or a time-sensitive pickup confirmation where a static notice might be missed. It is a stronger choice than a plain outlined or elevated alert when the content is live or time-bound, because the motion signals that something is still unresolved or actively in progress.

A natural flow around it on a Components page:

Before

• Basic Alerts to introduce standard static notices before stepping up to animated ones
• A short section heading or description setting the context for the notice that follows

After

• Dismissible Alerts when users need a way to clear a notice once they have acted on it
• Cards to present the detail view or next action the alert is pointing toward

What you can display

Any time-sensitive or live status message benefits from the animated border. A few specific fits:

• Shipment or delivery exceptions. Show a warning or destructive alert when a package is delayed or a delivery attempt failed and action is needed before a deadline.
• Order confirmation or dispatch notice. Use the success variant to confirm a parcel has left the warehouse so operations teams see the green signal in real time.
• System or API status. Use the info or warning tone to broadcast an active incident or degraded service that is still being resolved.

Tip: limit animated alerts to one or two per screen at a time so the pulsing effect stays meaningful rather than becoming background noise.