shadcn.io is not affiliated with official shadcn/ui
Founders Face to Face Team Block for React
Two founders of a grant-writing tool side by side, each with a list of what they did before, what they built and what they own now, and a centre column reading Met in Year 0 with a line on how they met.
Installation
Overview
A founders section for React with Base UI, for Hallam & Oduya, a grant-writing tool. A centred header says who the two people are, and under a hairline band a row of three cells sits between the rails. At each side a founder: an initials avatar, a name, a role and a list of three facts (what they did before, what they built, what they own now). Between them a centre column, bounded by two solid rules that meet the top rule at + marks, reads "Met in Year 0" with a line on how they met. On a phone the founders stack with the meeting between them, as a band. It compares two people; it is not a letter (see Founder Letter) or a timeline. It's built from Data List, Avatar and Guides, with CSS transitions and your theme's tokens for every colour. For small companies whose two founders are the story.
FAQ
How do I change the founders and the meeting?
Edit FOUNDERS at the top of the file. A founder is an id, a name, a role and a facts list; each fact is a label and a value. The facts are the same three labels for both, so the two columns read as a comparison, but the labels are yours to change. The "Met in Year 0" text and the line under it are in the block's markup, in the centre cell. Everyone and everything here is invented.
How is it read by a screen reader?
The three cells are one list named "Founders of Hallam & Oduya", so a screen reader announces three items: the first founder, the meeting and the second founder. Each founder's name is a heading, and each of their facts is a term and a description in a description list: "Before", then what it was. The avatar and the handshake icon are decorations and are hidden.
Why Year 0?
Years in the blocks are relative so a page never goes stale: Year 0 is the year the founders met, and Year 1 is the year the company began. Write your own wording if you prefer a date.
How does it fit on a phone?
Below lg the three cells stack in reading order: the first founder, the meeting as a band between two hairlines with its text centred, then the second founder. Nothing scrolls sideways at 320 pixels.
How are the lines drawn, and how does the block end?
Guides draws the top rule; from lg the centre cell's two borders are the dividers and a second Guides puts + marks where they meet the top rule. The last fact of each founder has no closing rule, and the cells end the block, so the next block's top rule closes it.
Related
- Pro
Advisory Board Table Team
Leaders and org chartsSeven advisors of a climate-risk model company in a captioned table from rail to rail: an initials avatar and a name, their role and firm, their specialty and the year they began advising.
- Pro
Investors Table Team
Leaders and org chartsThe backers of an escrow service as a figures band (raised, rounds, investors) over a captioned table of firms, their partners, whether each led or took part, and the round it joined.
- Pro
Converging Founder Paths About
Company storyTwo founders of a pair-programming editor, each with an ordered list of what they did before they met, joined by a drawing into one shared line.
- Pro
Founder Letter with Margin Notes About
Company storyA founder letter for a document-signing company, set on a sheet with margin notes that line up beside each paragraph and fold under it on a narrow screen.
- Pro
Leadership Spotlight Team
Leaders and org chartsOne 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.
- Pro
Collaboration Ring Graph Team
Leaders and org chartsNine people of a hospital rota company on a ring joined by chords: pick one and their chords go strong, the people they work with stay in tone, and a list says who they work with most and for how many hours a week.