shadcn.io is not affiliated with official shadcn/ui
Gallery Spotlight Team Block for Vue
Six people of a lab-booking platform as a gallery: one person in a framed panel (an initials plate, name, role, quote, bio and three figures) over a filmstrip of six avatars that picks who is in focus.
Installation
Overview
A team section for Vue with Ark UI, for Elmhurst, a lab-booking platform. One person fills a framed panel: a large initials plate, the name and role, a short quote, a bio and three figures in a description list. Under it a filmstrip of six avatars in a band that shares the rails picks who is in focus; the chosen avatar is ringed and carries a foreground underline, and the panel changes in place. Every person's panel is also drawn unseen in the same cell, so the block keeps its height whoever is chosen. On a phone the strip moves above the panel and scrolls sideways with the next avatar peeking. It's built from Tabs, Avatar and Guides, with CSS transitions and your theme's tokens for every colour. For about pages that want to put one person in the light at a time.
FAQ
How do I change the people?
Edit PEOPLE at the top of the file: a person is an id, a name, a specific role, a quote, a bio and three figures (a label and a value each). The strip takes as many people as the array holds; each avatar has a minimum width, so with more than six it scrolls sideways on every screen. Keep the quote to one sentence and the bio to two, or the panel grows.
How do I use it with a keyboard?
Tab goes to the chosen avatar; the Left and Right arrows move along the strip and choose as they go, and Home and End jump to the first and last. Each avatar is named by the person's name, and the panel under it is the tab's panel, a Tab stop of its own that is labelled by the avatar.
Why does the strip come first in the markup if it sits under the panel?
Tabs belong before their panel in the markup, so the strip comes first and the layout places it under the panel from md. On a phone the strip stays above the panel, so the choice is on the first screen.
Does the block move when I pick someone?
No. Every person's panel is drawn a second time, unseen and hidden from assistive technology, in the same cell as the open one, so the cell is as tall as the tallest panel. Only the open panel is read.