Border Highlight Card
A card that brightens its border when focused or hovered. Use it to mark the recommended choice in a pricing grid or a selected option in a form.
A card that brightens its border when focused or hovered. Use it to mark the recommended choice in a pricing grid or a selected option in a form.
Search blocks by description or jump to a page.
Border Highlight Card is a single content card that brightens its border when the pointer moves over it. The card carries a title, a short description below it, a paragraph of body text in the content area, and a footer row with a Cancel button on the left and a primary Deploy button on the right. At rest the border is invisible; on hover a faint primary-colored outline traces the full perimeter of the card.
The title, description, body copy, and button labels are all independent text you can swap freely. The footer layout works with one button or two, and the body content area accepts any short paragraph or list. The hover border effect requires no extra markup; removing the card from a hover context leaves a clean, borderless surface.
This card suits any moment you need to signal interactivity or selection without adding persistent chrome. In a fintech or banking product it works well on a plan comparison grid or an account type chooser, where one card should appear selected or actionable while the others sit quietly beside it. It is a lighter choice than the animated border variants because the effect is instant and subtle rather than continuous.
A natural flow around it on a Components page:
Before
After
The card structure is straightforward and each zone is independent:
Tip: in a grid of selectable cards, add a ring or background change to the chosen card so the hover state and the selected state stay distinct.