shadcn.io is not affiliated with official shadcn/ui
Stacked Profiles Team Block for Svelte
Three leaders of a freight brokerage as editorial bands: a large initials plate with name, role and tenure at the start, and a bio with an Ask me about line of topics at the end, split by a solid divider.
Installation
Overview
A team section for Svelte with Ark UI, for Tollbrook, a freight brokerage. Three leaders each get a full-width band: at the start a large square initials plate with the name, the role and the years at the company ("Year 7, since the first load"), and at the end a short bio and an "Ask me about" line of topics. A solid divider splits each band, with + marks where it meets the band's rule, and the last band ends the block. On a phone the plate sits above its text, as a compact row with the name, and each bio shows three lines. It's built from Avatar, Badge and Guides, with a CSS entrance and your theme's tokens for every colour. For a leadership section of an about page, where three people deserve a paragraph each.
FAQ
How do I change the leaders and their topics?
Edit LEADERS at the top of the file. A leader is a name, a role, a tenure, a bio, an ask list of topics and a plate (one of three greyscale pairs). The initials come from the name. Three bands fill the block; with more, the section gets longer, so past four consider a grid instead.
Why is the tenure written as a year of the company?
A calendar year goes stale. "Year 7, since the first load" stays true as long as you update it once a year, and it tells the reader more than a start date would. Replace it with any text you like.
How is it marked up?
As a list of articles: each leader is an li holding an article with the name in an h3, and the topics are a list of their own. The plate is decorative, so it is hidden from screen readers; the name next to it says the same thing.
How does it fit on a phone?
Below lg each band stacks: the plate shrinks to a small square beside the name, role and tenure, and the text follows underneath. Each bio is clamped to three lines on screens narrower than sm so three leaders stay within about two screens; the full text is still in the page, so a screen reader reads it all.
How are the lines drawn?
Each band draws its own top rule with Guides, so the + marks land on the rule where it meets the rails, and the divider between plate and text is a start border with a mark where it meets that rule. No band draws a bottom rule, so the last one ends the block and the next block's top rule closes it.