Variant B: Visually Elevated
Adds border treatment and a "Great Price" context badge on top of everything in Variant A. The badge, video, and transit content stays the same across all 3 options — only the border intensity changes.
Clean Perimeter
2px solid border around the entire card. Teal on white backgrounds, white on dark backgrounds. Subtle teal-tinted shadow on hover. The gentlest visual elevation.
The full perimeter border creates a clear visual container. On teal backgrounds the border flips to white so it stays visible. The most subtle of the three border treatments.
Top Accent
3px solid top border only, like a news article accent bar. Card has slight elevation via box-shadow. Lifts on hover with translateY. Signals "special" without wrapping the entire card.
The top accent bar is a familiar editorial pattern. Combined with elevation shadow, the card feels "lifted" from the page. On hover, the card physically rises 1px. On teal backgrounds the accent flips to white.
Elevated Glow
2px solid border plus an outer glow ring (4px spread). On hover the glow intensifies. The most visually prominent — tests whether more visual weight drives more engagement.
The glow ring creates a halo effect around the card, making it impossible to miss in a grid. On hover the glow intensifies to full opacity. On teal backgrounds the glow switches to white. The most visually aggressive option.
In Context: Search Results Grid
Pro cards mixed with Standard and Premium on the dark teal search background. Switch tabs to compare border treatments. Note how the borders adapt to the dark background.
