Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Gallery blocks

Pro

Hover Card EXIF Gallery Block for Solid

Six drawn frames in cells of their own, each a link with a hover card of camera, lens, aperture, shutter speed and ISO that opens on hover and on keyboard focus, and prints the same settings in the caption on a touch screen.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A hover-card gallery for Solid with Ark UI. A centred header sits over six drawn frames in cells of their own (three across, two on a phone), each with a hairline frame that overshoots its corners. Each frame is a link with a hover card: hover it, or Tab to it, and the card lists the camera, lens, aperture, shutter speed and ISO it was shot with, as a definition list. A touch screen has no hover, so the card stays shut and the same settings are printed in the caption instead; a screen reader always gets them as text. The frames are drawn in the theme's greys, never photographed. It's built from Guides and Hover Card. For photo notebooks, camera reviews and any picture whose details are secondary.

FAQ

Does the card open for keyboard users?

Yes. The hover card opens when its link takes focus and closes on Escape or when focus leaves.The settings are also in the markup as an unseen line in the caption, so nothing depends on the card.

What happens on a touch screen?

Under (hover: none) the card is hidden with CSS and the caption shows one line of settings ("35 mm · f/2.8 · 1/250 s · ISO 400"). Tapping a frame follows its link as usual; it never opens a card that can't be dismissed.

Are these real settings?

They are example data for a fictional camera, typed in each entry. Replace the entries with your own EXIF and the card and the caption follow.

How do I use my own photographs?

The drawn pictures are one Scene component. Where the code comment says so, replace it with an <img> (object-cover in a box of the picture's own ratio) and give each entry a src. Keep each entry's ratio the photograph's own so the layout doesn't change.

Which keys work?

Tab visits the six frames, Enter follows one, and Escape closes an open card.

How does it fit on a phone?

Two columns by three rows, with the settings line under each title. The cards never open on a touch screen.

All 100 gallery blocks