shadcn.io is not affiliated with official shadcn/ui
Founders Face to Face Team Block for Vue
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 Vue with Ark 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.