Cardhighlight

Cardhighlight is a term used in user interface design to describe a visual treatment applied to a card element within a card-based layout to indicate focus, selection, or emphasis. Cards are modular content containers used on dashboards, catalogs, and feed-style interfaces; highlighting a card helps users identify which item is active or relevant.

Common visual cues include stronger shadows, colored borders or rings, background tint, or a slight elevation change. Animations such as a gentle scale or glow may accompany the transition to draw attention while remaining unobtrusive. Highlights are typically triggered by user interaction, such as hover or focus, or by a selection state.

Designers balance cardhighlight with surrounding affordances to avoid clashes and to preserve rhythm across a grid. Accessibility considerations include ensuring sufficient color contrast, providing a visible focus indicator for keyboard users, and supporting motion sensitivity preferences by offering a reduced-motion option.

Implementation often relies on CSS properties such as box-shadow, border-color, background-color, and transform, applied through a highlight class or state. In component libraries, cardhighlight may be exposed as a prop or style variant to unify behavior across similar card elements.

Common use cases include dashboards to indicate the currently selected tile, product listings to display the item on promotion, and task boards to mark the active task. Cardhighlight should be used consistently and sparingly to avoid visual fatigue and to preserve the meaning of selection and focus.

See also: card-based user interfaces, focus indicators, selection states.