shadcn.io is not affiliated with official shadcn/ui
Department Quote Wall Team Block for Radix UI
Four departments of a farm-lease marketplace as bands: each names its department and headcount at the start and gives one display quote from someone in it at the end, split by a solid divider.
Installation
Overview
A team section for React with Radix UI, for Barrowby, a farm-lease marketplace. Four bands, one for each department (Engineering, Design, Support and Sales), run from rail to rail. Each band names its department and its headcount in a badge at the start and, behind a solid divider that meets the band's rule at a plus mark, gives one quote at display size from someone in it with their initials avatar, name and role small under it. On a phone the name sits above the quote. The last band ends the block. It's built from Avatar, Badge and Guides, with a CSS entrance and your theme's tokens for every colour. The people and quotes are examples.
FAQ
How do I change the departments and the quotes?
Edit DEPARTMENTS at the top of the file: a name, a headcount, a quote and the speaker with their speakerRole. The total in the heading is added up from the headcounts. Keep a quote to one or two sentences, since it is set at display size.
How is it marked up?
A list of four items, each with the department in an h3 and the quote in a figure with a blockquote and a figcaption. The headcount badge is read as "18 people".
How are the lines drawn, and how does the block end?
Each band draws its own top rule, and the quote cell draws the divider with a plus where it meets the rule. The last band has no bottom rule, so the next block's top rule closes the wall.
How does it fit on a phone?
Below md each band is one column: the department and its badge, then the quote, then the speaker. All four are shown; nothing is collapsed.