shadcn.io is not affiliated with official shadcn/ui
Bento Grid Team Block for Solid
The leadership of a lighting-design studio as a bento that shares its hairlines: a two-by-two founder cell, four leader cells with a focus line each, and a closing cell that counts the studio with a dot for every person.
Installation
Overview
A leadership section for Solid with Ark UI, for Candlemere, a lighting-design studio. A centred header sits over a bento that shares its hairlines and runs from rail to rail, so the grid ends the block and the next block's top rule closes it. The co-founder fills a two-by-two cell: a large initials avatar, a Co-founder badge, a short bio and her city. Four leaders take one cell each, with a name, a specific role, a line on what they focus on and a city. One closing cell counts the studio ("24 people, 9 countries") beside a drawing of 24 dots, one for each person. Four columns from md; a phone has two, with the founder across both, the leaders two by two and the count across both. It's built from Avatar, Badge and Guides, with a CSS entrance and your theme's tokens for every colour. For about pages, investor pages and any studio that wants one person to lead and a few to follow.
FAQ
How do I change the founder and the leaders?
Edit FOUNDER and LEADERS at the top of the file. A leader is a name, a role, a focus phrase (the line reads "Focus: …") and a city; the initials come from the name and the avatar's tone from the leader's place in the list. Four leaders fill the two-by-two block beside the founder exactly. A different count leaves a hole that shows the border colour, so change the founder's row span or the closing cell with it.
How do the figures and the dots work?
PEOPLE and COUNTRIES are two constants, and the dots are drawn from PEOPLE: one for each person, twelve to a row, with every fifth one brighter, like lamps in a row. The drawing is hidden from assistive technology because the same count is in the text beside it. Another count draws more or fewer dots; a number that is not a multiple of twelve leaves a shorter last row.
How are the lines drawn, and how does the block end?
The grid has a one-pixel gap on a border-coloured background, and every cell is a background-coloured box, so the gap shows as a hairline between cells whatever their spans. The sides come from the page's rails, the top rule from Guides with + marks where it meets the rails, and the foot from the next block's top rule: the grid draws no rule of its own at its end.
How does it fit on a phone?
Below md the grid has two columns. The founder and the count each span both, and the four leaders sit two by two. A leader's focus line has no room in a half-width cell, so it is read by screen readers and not shown there; it shows from sm. Nothing scrolls sideways at 320 pixels.
Can I use photos instead of initials?
Yes: put an AvatarImage in each Avatar, before the fallback; the initials show until the picture loads, and whenever it fails. The avatars are decorative (the name is in the heading beside them), so a picture needs no alternative text. Square, greyscale pictures keep the grid as calm as the initials.