shadcn.io is not affiliated with official shadcn/ui
Peek Drawer Awards Block for Svelte
Five awards as ruled rows that show a clamped, faded peek of the jury's citation and open an inset drawer of facts, one at a time.
Installation
Overview
A peek-then-open list of awards for Svelte with Ark UI. Under a compact header, five rows run rail to rail on hairlines and end the block. Each row draws its own trophy in your theme's foreground, names the award and the programme with the year, and shows the start of the jury's citation clamped to two lines and faded out, so a visitor reads a verdict before opening anything. A "Details" handle opens an inset drawer under the row with the citation in full, what it was judged on, the entries read and the judges, using a height transition that is instant under reduced motion. Only one drawer is open at a time: opening a row closes the previous one, and the handle's label never changes, its state is the chevron and aria-expanded. It's built from the catalog Collapsible, button styles and Guides. The awards and programmes are made up for the example: swap AWARDS for your own.
FAQ
How do I change the awards?
Edit AWARDS at the top of the file. Each has a title, a programme, a fixed year, a citation (the peek shows its first two lines, the drawer and the open row show all of it), criteria, the number of entries, the judges and a mark, one of the five drawings at the top of the file. The count in the header comes from the list.
How does only one drawer open at a time?
The block holds the open award's id in one piece of state, and each row's Collapsible is controlled by it: opening a row sets the id, which closes the row before it, and closing a row clears it. To let several stay open, keep a list of ids instead.
Each Collapsible takes open and onOpenChange({ open }).
Is the clamped text still readable by screen readers?
Yes. The peek is the whole citation with a two-line clamp and a fade applied in CSS, so assistive technology reads all of it; opening the row removes the clamp. Each handle is named "Details for" and the award, so five identical labels never confuse a list of buttons.
Is the drawer's text in the page while it is closed?
Yes: the facts stay in the page while the drawer is closed, hidden, so they are not read or reachable until it opens.
Are these real awards?
No. Cressida is a made-up document viewer, Opalhurst, Pickerwell, Quenbury, Saltmarrow and Heronsgill are made-up programmes, and the citations and numbers are written for the example. The trophies are drawn by the block.
How does it fit on a phone?
The trophy, award and programme come first, then the peek, then the handle on its own line; the drawer's three facts stack. On a wide screen the three parts share one line with the handle at the end. In a right-to-left layout the order mirrors and the chevron stays a chevron, turning as the row opens.