Border Animation Card
A card whose border traces a moving outline around the edges. Use it to spotlight a featured plan, offer, or item that needs attention on the page.
A card whose border traces a moving outline around the edges. Use it to spotlight a featured plan, offer, or item that needs attention on the page.
Search blocks by description or jump to a page.
Border Animation Card is a single card with a continuously moving outline that traces around all four edges. A thin wrapper layer sits behind the card surface and runs an animated sweep, while the card itself holds a header with a title and description, a body paragraph, and a footer with two buttons side by side.
The card content is entirely independent of the animation. You can swap the title, description, and body copy for any subject, replace the Cancel and Deploy buttons with whatever actions fit your context, or drop the footer entirely if no action is needed.
Reach for this block when one item in a grid or list needs to stand out without adding a badge or ribbon. On an ecommerce storefront this works well for a featured product, a limited offer, or an upsell prompt that sits alongside quieter sibling cards. The moving outline draws the eye naturally so the card reads as the primary choice before the visitor reads a word.
A natural flow around it on a Components page:
Before
After
The frame suits any single item you want to promote over its neighbors. A few ways to use it on a storefront or product page:
Tip: keep the animated border to one card per visible section so the motion stays meaningful rather than competing with everything else.