Pulse Border Card
A card with a border that pulses softly to draw a glance over. Use it for live alerts, fresh items, or a call to action that should feel active now.
A card with a border that pulses softly to draw a glance over. Use it for live alerts, fresh items, or a call to action that should feel active now.
Search blocks by description or jump to a page.
Pulse Border Card wraps a standard card in a softly animated glow layer that pulses continuously behind the border. The visible structure is a title, a short description line, a body paragraph, and a footer row with two buttons: a secondary Cancel and a primary Deploy. The glow sits just outside the card surface, blurred and semi-transparent, so the outline breathes without overwhelming the content.
Every text region is independent. The title, description, and body copy can all be rewritten to match your context, and the footer buttons can be relabeled or replaced with any pair of actions. The pulsing layer itself requires no configuration.
Use this card when an item on the page needs to read as active or time-sensitive without a banner or badge interrupting the layout. On an online education platform it works well for a course enrollment prompt or an assignment due soon, where a quiet visual signal nudges a student without feeling aggressive. It outperforms a plain bordered card when the goal is gentle urgency, and it fits tighter than an alert component when the surrounding layout is already a grid of cards.
A natural flow around it on a Components page:
Before
After
The body and footer hold whatever your prompt or call to action requires. A few fits worth considering:
Tip: the pulse is most legible against a neutral page background; on very light or white surfaces, increase the primary color's opacity slightly so the glow reads clearly.