shadcn.io is not affiliated with official shadcn/ui
Certificate Wall Gallery Block for Vue
Nine drawn certificates hung salon-style from a picture rail for a packaging studio, in different sizes on shared centre lines, with a year rail that dims the other years and a card with the jury's citation on hover and focus.
Installation
Overview
A certificate wall for Vue with Ark UI, for Corbel & Vane, a packaging studio. A centred header and a "Year" rail sit over a wall band: nine framed certificates, each a drawn frame, mat, crest, title and a seal on ribbons, hung from a picture rail by a cord, five in the first row and four in the second, of different sizes but every frame centred on its row's line. Under each frame go the award, the issuer and the year. Choosing a year dims the frames of the other years and writes "3 of 9 frames from 2025" in a polite line; nothing moves. Pointing at a frame, or tabbing to it, opens a small card with the jury's citation, and on a touch screen the citation is simply written under the frame. This is a picture wall, not a tally or a trophy shelf. The certificates are drawn, not photographed, in your theme's greys. It's built from ToggleGroup, HoverCard and Guides. The studio, awards, issuers and citations are made up for the example.
FAQ
How do I show my own certificates?
Each award in AWARDS has a title, issuer, year, citation, a wide and a high in wall units, a description and a scene. Replace the Scene in a frame with <img alt="" className="size-full object-cover" src={…} /> (the frame's button already names it) and keep wide and high at the photograph's proportions. The rail's years come from YEARS, and the counts are worked out from the list.
How are the frames kept on a centre line?
Each frame sits in a cell of the same height and is centred in it, so a tall frame and a wide one share one line through their middles, and a cord of the right length reaches up from each frame to the rail. The wall's unit is a fraction of its own width, so the whole composition scales together rather than reflowing.
What does choosing a year do?
It dims the frames from other years under a pale wash and sets their text a little lighter. They stay where they are, stay in the tab order and still show their citation, so you can compare years without losing your place. "All years" clears it.
How does it work with a keyboard?
The year rail is one stop in the tab order, with arrow keys between years. Each frame is a button, and focusing one opens its citation card the same way hovering does; Escape closes it. Screen readers get the award, issuer, year and citation without opening anything.