shadcn.io is not affiliated with official shadcn/ui
Advisory Board About Block for React
An advisory board for a legal-software company: five advisors in an accordion, each with the practices they cover, why they advise, and one piece of advice.
Installation
Overview
An advisory board for React with Base UI, written for Sagewood, a fictional case tool for small law firms. A compact header sits over five advisors in an accordion that runs from rail to rail. Each row shows initials, the name, how long they have advised ("Year 2", counted from the company rather than a calendar year) and the practices they cover. Opened, a row says why they advise Sagewood and quotes one piece of advice they gave. One row is open at a time, and the block ends on the last row so it does not draw a second rule above the next block. The page's rails and top rule come from the Guides spine. It's built from Accordion, Avatar, Badge and Guides, with a CSS entrance and your theme's tokens for every colour. For an about page that should name the people a company calls before it ships a decision. The people are fictional and the quotes are example data.
FAQ
How do I change the advisors?
The advisors are ADVISORS at the top of the file. Each has a name, a since such as "Year 2", practices, a why and an advice quote. The initials are derived from the name. The first advisor starts open. Add or remove rows freely: the accordion and its last-row rule are drawn from the array.
How is it read by a screen reader?
The heading is the section's only h2. Each advisor is an h3 whose button opens the row, so the outline lists the five names. The practices are badges, the reason is a paragraph and the advice is a quotation. The initials avatar is decorative, because the name is written beside it. The lines are drawn by a layer hidden from assistive technology.
How does the accordion work for a keyboard?
Enter or Space opens a row, and opening one closes the open one. Tab moves between the rows' buttons; this base does not add arrow-key movement between them.
Is a closed advisor's advice in the HTML?
No: a closed row's reason and quote are not in the page until the row opens.
Related
- Pro
A framed, sortable table of a product-feedback tool's seven-member customer council, with expertise badges, the year each member joined and an apply band with a Shine Button.
- Pro
Principles Rail About
Principles and processA split about section for a release-management tool: a sticky title at the start, and six principles as stations on a hairline rail, each opening to what it means and how it shows up.
- Pro
Repo Cards Open Source About
Press and recognitionThree repository cards for a developer toolkit, drawn like repo headers: owner and name, a description, a language letter, rolling star counts, forks, contributor initials and latest release, with a used-by line.
- Pro
Culture Rituals About
Culture and valuesA team's rituals sorted by how often they happen: three bands, every week, every quarter and every year, each with three cells that say what the ritual is, who comes and how long it takes.
- Pro
Guarantee Certificate About
Principles and processA home-warranty guarantee drawn as a certificate: a seal in SVG above the title, three promises with ticks, the fine print behind a disclosure that stays in the page, and a Shine Button to start a claim, in a card in card.
- Pro
Commitments Ledger About
Principles and processA ledger of a nonprofit CRM's public promises: an ordered list of rows with the promise, how far along it is as a word and a progress bar, who owns it and when it was last checked, and a tally counted from the rows.