Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Team blocks

Pro

Department Quote Wall Team Block for React

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A team section for React with Base 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.

Is anything interactive?

No. It is a wall to read, with no controls; use the stories viewer or the cohort slider if you want one.

What happens under reduced motion?

The heading's entrance and the wall's fade are removed; nothing moves.

  • Pro

    Stories Viewer Team

    Carousels and reels

    Five teammates of a crop-planning app as a stories viewer: five segments that fill in turn, one sentence at a time in large type, a visible Pause, Previous and Next buttons, arrow keys and swipe.

  • Pro

    Lens Roster Team

    Culture and values

    Six people of a pension app in rows rail to rail, with a Why I joined or Why I stay picker that swaps every row's one-line answer at once while names, roles and tenures stay put.

  • Pro

    Cohort Slider Team

    Culture and values

    Forty-three people of a payroll service by the year they joined: a slider labelled The year you joined, a group of avatars for who came that year, and two quotes from that year in cells split by a hairline.

  • Pro

    Spotlight Reel Team

    Carousels and reels

    Six people of a seed-saving cooperative as master and detail: a vertical list of names and roles at the start, and at the end the chosen person as type, with their words at display size, a bio and two figures.

  • Pro

    Bento Grid Testimonials

    Quote grids

    A quote-only bento drawn with hairlines: one large lead story beside four shorter quotes, in cells that share their lines, on the page's drafting lines.

  • Pro

    Leadership Spotlight Team

    Leaders and org charts

    One leader as a split band, a large initials plate with a three-paragraph bio and three figures, over four executives in cells with overshoot, each with a one-line background and expertise chips that wrap.

All 126 team blocks