Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Team blocks

Pro

Values Accordion Team Block for Solid

Five working values at an accessibility-audit company as a single-open accordion in a split: each value is a habit you could watch, and opened it shows what it looks like in the work and one teammate's words.

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 culture section for Solid with Ark UI, for Stoneby, an accessibility audit tool. The first column holds a title, one sentence and, at its foot, the five faces behind the quotes; a hairline divider, meeting the top rule with a + mark, separates it from a single-open accordion that runs to the end of the block. Each value is written as a habit you could watch ("Test with the tools people really use", "Say what we have not checked"), not a slogan. Opened, a value says what it looks like in the work and shows one teammate's words, with their name and role. One value is always open, so there is always a quote on screen. On a phone the header stacks above the rows and a rule with + marks replaces the divider. It's built from Accordion, Avatar, Avatar Group and Guides, with CSS transitions and your theme's tokens for every colour. The people and the quotes are made up for the example.

FAQ

How do I change the values and the quotes?

Edit VALUES at the top of the file. A value is an id, a title (the habit), a behaviour sentence, a quote and the speaker and role who said it. The numbers beside the titles, the "5 habits" in the header and the faces at the foot of the first column all come from that list, so adding a value needs no other change.

Why can't I close the open value?

It is a single-open accordion that always keeps one value open. That is on purpose: the block keeps roughly the same height and always shows a quote. Opening another value closes the first. To let people close everything, allow the accordion to collapse (set collapsible and remove the guard in change).

How does it work with a keyboard and a screen reader?

Each value is a button inside its own h3 under the section's h2, and the open one says it is expanded. Tab moves between the rows and Enter or Space opens one. The Up and Down arrows also move between rows. The quote is a real blockquote in a figure, with the speaker in its caption, and the faces at the foot of the first column are decoration.

Is the text of a closed value still in the page?

Yes. The accordion keeps closed rows in the document, so find-in-page reaches every quote.

Does the block change height when I open another value?

A little, by a line or two, because the quotes differ in length. The accordion is the last thing in the block, so nothing above it moves; the content below follows its end.

How does it fit on a phone?

Below the lg breakpoint the title stacks above the rows and a rule with + marks takes the divider's place; the faces at the foot of the header move under the sentence. Nothing scrolls sideways at 320 pixels, and a long habit wraps onto two lines.

All 126 team blocks