shadcn.io is not affiliated with official shadcn/ui
Issuer Ledger Awards Block for React Aria
Six cells for the programmes that gave an award, each a drawn monogram mark with the programme as a wordmark and a tally of awards and the year since.
Installation
Overview
An issuer ledger for React with React Aria: not a wall of customer logos but the programmes that gave the awards. Under a centred header, six cells stand apart, each one's lines running a little past its corners with a + mark at its start corner. A cell holds a drawn mark (a monogram in a hexagon, a circle, a square, a shield, a diamond or an octagon), the programme set as a wordmark in its own lettering with its kind (Guild, Council, Register…) underneath, and a tally counted from its list of years: "3 awards · since 2021". Six across from xl, three from sm, two on a phone. It is built from Guides and your theme's tokens. The awards and programmes are made up for the example: swap AWARDS for your own, and use only recognition you have actually received.
FAQ
How do I change the programmes and tallies?
Edit PROGRAMMES: each has a name, a kind, a monogram letter, a shape for the frame, two lettering classes and years, the years the product won something from it. The cell's tally and the header's "since" year are counted from those lists.
Are these logos?
They are made-up marks for made-up programmes: a drawn frame with a letter over it, and a wordmark in its own lettering. Never use a real programme's logo without its permission; for your own customers use a logos block.
How is each cell read by screen readers?
The wordmark and its kind are one heading ("Saltmoor Guild"), the tally is text under it, and the drawn frame and the monogram are hidden from assistive technology.
Why six across only from xl?
The wordmarks need about 130 px each. Below xl there are three across (two rows), and two across (three rows) on a phone.