Search blocks by description or jump to a page.
A card edged with a static gradient outline that adds color without noise. Use it to set apart a key offer or profile in an otherwise plain grid.
Gradient Border Card is a single card wrapped in a soft color halo that sits just behind its edges. At rest the glow is a faint blush of pink and purple; when the pointer enters, the halo brightens fully and transitions quickly so the card feels alive. Inside, a header holds a title and a one line description, a content area carries a short paragraph, and a footer row shows two buttons aligned to opposite ends.
All four zones are independent. The title, description, body copy, and button labels can each be rewritten without affecting the others. The two footer buttons use different variants so you can swap or remove either, and the card itself can hold any content you place in those regions.
Reach for this block when one card on the page needs to draw attention without an icon or badge doing the work. On a logistics and delivery platform it suits a "Start a shipment" panel, a courier onboarding prompt, or a quick action card surfaced in a dashboard sidebar. It outperforms a plain outlined card when the background is neutral and you need a focal point, and it is quieter than an animated border when the rest of the page is already busy.
A natural flow around it on a Components page:
Before
After
The block works well any time a single action or offer needs to stand out from surrounding content. A few concrete fits:
Tip: the glow is most effective on a white or light gray page background; on a dark surface consider reducing the blur or opacity so it stays subtle.