Velora UI

Focus Cards

Image grid where the hovered card stays sharp while the others blur and step back.

  • 1.5 KB gzipped
  • Zero dependencies
  • Reduced-motion safe
  • Base UI & Radix compatible
Open in v0
  • Forest light
  • Canopy walk
  • Moraine Lake
  • Highland morning
  • Night summit
  • Valley of mist

Installation

pnpm dlx shadcn@latest add https://velora.colorlib.com/r/focus-cards.json

Adds components/velora/focus-cards.tsx.

Examples

Destinations gallery

Linked, portrait destination cards under a travel section heading.

Trending this season

Where to next?

All destinations →

Props

PropTypeDefault
cards*

The cards, in order

FocusCard[]—
cardClassName

Extra classes for every card, e.g. a different aspect ratio

string—

Also accepts every <ulist> attribute, forwarded to the root element.

FocusCard

interface FocusCard {
  /** Shown over the card while it has the focus; always read by screen readers */
  title: string;
  /** Image URL */
  src: string;
  /** Describes the photo; leave empty when the title says enough */
  alt?: string;
  /** Makes the card a link */
  href?: string;
}

Accessibility

Reduced motion
Cards no longer shrink or zoom, and the blur and title fade switch instantly instead of transitioning.
Keyboard
Each card is a tab stop (a link when it has an href, otherwise a focusable figure); keyboard focus triggers the same sharp-card, blurred-siblings state as hover and reveals the title.
Screen readers
Cards are list items; titles are real text that is read even while visually hidden, links are named by the title, and images use the optional alt (empty by default).