Search blocks by description or jump to a page.
A card framed by a shifting gradient border that flows around the edges. Use it to highlight a premium tier or hero item in a grid of options.
Border Gradient Animation Card wraps a standard card in a continuously spinning conic gradient that produces a shifting color border flowing around all four edges. Inside sits a header with a title and short description, a content area for a paragraph of supporting text, and a footer row holding two buttons side by side.
The card body and its sections are fully independent. You can swap the title, description, and paragraph for any copy, remove the footer buttons entirely, or replace them with a single primary action. The animation runs at a fixed speed and requires no configuration.
Reach for this block when one card in a grid needs to stand out as the recommended or featured option. On a developer tools site it works well on a pricing page to mark the tier most users should choose, or on a feature landing page to draw attention to the primary call to action before a visitor scrolls past. It has more visual weight than the static Gradient Border Card and more polish than the simple Border Animation Card, so use it when the gradient motion is appropriate rather than distracting.
A natural flow around it on a Components page:
Before
After
The card suits any scenario where a single item needs to read as premium or primary at a glance. A few directions to consider:
Tip: keep the paragraph inside the card to two or three short sentences so the card stays compact and the border animation remains the visual focus.