shadcn.io is not affiliated with official shadcn/ui
Numbered List Team Block for Solid
Sixteen people of a plant-care app as an ordered list in the order they joined, each row an employee number in tabular figures, an initials avatar, a name, a specific role and a company-relative join year.
Installation
Overview
A team section for Solid with Ark UI, for Lindenmoor, a plant-care app. Sixteen people are listed in the order they joined, as an ordered list: each row starts with an employee number in tabular figures ("No. 001"), then an initials avatar, a name, a specific role ("Staff engineer, reminders") and when they joined, counted from the company's first year ("Joined Year 3") so the page never goes stale. The rows run from rail to rail between solid hairlines, with a + mark where the first rule meets the rails, and the last row ends the block. From md the role and the join year have columns of their own; on a phone the number stays, the role sits under the name and the first six rows show, with a Show all 16 button under them. It's built from Avatar, Button and Guides, with a CSS entrance and your theme's tokens for every colour. For about pages and founding-team pages, where who came first is the story.
FAQ
How do I change the people and their numbers?
Edit PEOPLE at the top of the file: a person is a name, a role and a year. The employee number is the person's place in the array, so list them in the order they joined and the numbers follow ("No. 001" is the first entry). Add or remove rows freely; the "Show all 16" label and the list's count come from the array's length.
Why does it say Joined Year 3 and not a date?
A calendar year would be wrong the day it is printed and wrong again every January. "Year 3" counts from the company's first year, so it stays true as long as nobody leaves the list. If you do want dates, replace the year field with an ISO date and format it with Intl.DateTimeFormat in a time element.
Is it a real ordered list for screen readers?
Yes: an ol with one li per person and the name in an h3. The number is text, so it is read as "Employee number 001" followed by the name; the visible "No." is hidden from screen readers so the number isn't announced twice. The avatars are decorative and hidden.
How does it fit on a phone?
Below sm the list shows the first six people and a Show all 16 button under them. The button is a disclosure: it reports whether the list is expanded and which list it controls, and its label never changes. The remaining rows are hidden with CSS, not removed, so they stay in the page's markup and the button doesn't shift anything but the length. The number column stays on every width.
How are the lines drawn, and how does the block end?
The list's top rule and its + marks come from Guides; each row draws only its bottom border, and the last row draws none, so the next block's top rule is the list's bottom edge and no line is ever doubled. On a phone the Show all band draws the rule under the sixth row instead.