shadcn.io is not affiliated with official shadcn/ui
Organisation Profile Awards Block for Ark UI
An organisation profile in an awards register: a drawn monogram mark, three facts, a donut of awards by category with the top three in a legend and the three most recent wins, all counted from one list.
Installation
Overview
An organisation profile for React with Ark UI. A band opens the block with a drawn monogram mark (a hexagon with the company's initial), the header and a description list of three facts: founded, headquarters and team size. Under it a row of two cells on shared hairlines. The first draws a donut of the register's awards by category, five arcs in foreground weights with the total in the middle, beside a legend of the top three with their counts and shares and a line naming the rest. The second lists the three most recent wins. Every count, share, arc and the order of the recent wins come from one typed list of awards. On a phone the donut is smaller and sits above its legend. The page's rails and top rule come from the Guides spine. It's built from Guides, Data List and inline SVG. The register, the company and the awards are made up for the example.
FAQ
How do I change the awards?
Edit AWARDS at the top of the file: a title, a category and a fixed date for each. The total in the donut, the arcs, the shares, the legend, the line naming the other categories and the three most recent wins are all worked out from it. The facts (founded, headquarters, team size) are in FACTS.
How are the shares worked out?
Each category's count divided by the total, rounded down to a whole percent, with the percent that is left over given to the categories with the largest remainders, so the five shares always add up to exactly 100. Categories are ordered by count and then A to Z, which also decides which arc is darkest.
How is the donut drawn, and can everyone read it?
It is five circle arcs in an SVG, in solid foreground weights from dark to light, with a small gap between them. The drawing is hidden from assistive technology: the total, the top three categories with their counts and shares, and the other categories are all in text beside it.
How are the recent wins chosen?
The three awards with the latest dates in the list, newest first. Dates are fixed in the data and formatted without a time zone, so a win on a given day never moves with the visitor.