shadcn.io is not affiliated with official shadcn/ui
Product Tiles Awards Block for Svelte
Three product tiles in cells set apart, each with a framed drawing of the app, a tagline, its awards as ribbon rows and a foot line counting them.
Installation
Overview
A product awards block for Svelte with Ark UI. A centred header carries a tally counted from the list ("7 awards across 3 products") and three product tiles sit under it in cells set apart, each with its own corner marks and lines reaching past the corners. A tile holds a framed greyscale drawing of the app (a canvas window, an editor with a request panel, a phone), the product's name and tagline, its awards as ribbon rows (a small drawn ribbon, the award, its programme and the year) and a foot line counting them ("3 awards"). One column until lg, three across from there. The awards, programmes and products are made up for the example: replace PRODUCTS with your own.
FAQ
How do I add a product or an award?
Edit PRODUCTS: each has an id, a name, a tagline and its awards. A new product also needs a drawing: add a small component in the style of StudioGlyph and return it from glyphOf. The counts and the header tally are derived from the list.
Are the app drawings screenshots?
No. They are small inline SVG drawings in foreground tones, hidden from assistive technology. Swap each frame for your own <img> with alt text when you have a screenshot.
How does a screen reader hear the tiles?
As a list of three products, each with its name as a heading, its tagline, a list of its awards and a count line. The ribbons and the drawings are hidden.
What happens on a phone?
The tiles stack in one column, each starting with its drawing, then the name, the awards and the count.