shadcn.io is not affiliated with official shadcn/ui
Client Wins Awards Block for Svelte
A split for a supply-planning tool: the count of awards its customers won this year and three facts at the start and, at the end, a ruled ledger of seven wins with a monogram, the award, the programme and a reported result.
Installation
Overview
A ledger of customers' awards for Svelte with Ark UI. At the start of a split, a header counts the awards the customers won in the latest year ("5 awards won by customers in 2025") and three facts, the wins this year, the wins on the ledger and the programmes that gave them, are counted from the same list. At the end, a divider and a ruled ledger of seven wins running to the edge of the block: each row is a monogram tile, the customer, the award it won, the programme and year with "Won with Stowbridge", and a result figure at the end, under the name on a phone. The results are as each customer reported them. The page's rails and top rule come from the Guides spine. It's built from Guides and your theme's tokens, with a CSS transition for the entrance. The customers, programmes and results are made up for the example: replace them with your own, with each customer's permission.
FAQ
How do I change the ledger?
Edit WINS at the top of the file. Each win has the client, the award, the programme, a fixed year and a result with a figure and a label. The header's count is the number of wins in the latest year in the list, and the three facts count the list's length and its distinct programmes, so adding a row updates all three.
Where do the monogram tiles come from?
They are the first letters of the first two words of the customer's name, drawn as text in a square tile, so no logo or photo is needed. They are decoration for assistive technology; the name is the row's heading. To show a customer's real logo, replace the tile with an img that has empty alt text, and keep the name in the heading.
Who measured the results?
The customers did, and the block says so in its header. The figure is typed text, not computed, because it comes from outside: "41% less spoilage" is a claim by the customer. Get written permission before you publish a customer's name and result, and link to the story if you have one.
How does it fit on a phone?
The header and the facts come first, then the ledger. In each row the result moves under the name and award, so nothing needs to scroll sideways; at 320 pixels the three facts stay on one line. In a right-to-left layout the rows mirror, and figures such as "2.1×" keep their order.
How does it read to a screen reader?
The ledger is a list named "Awards won by customers". Each row opens with the customer as a heading, then the award, the programme and year with "Won with Stowbridge", then the result figure and its label. The facts are a description list, with each label before its figure.