shadcn.io is not affiliated with official shadcn/ui
Leadership Spotlight Team Block for Vue
One 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.
Installation
Overview
A team section for Vue with Ark UI, for Swinbrook & Dale, a small-business lending platform. A compact header sits over one leader in a split band: a large initials plate with her name and role at the start and, behind a solid divider that meets the band's rule at a plus mark, a three-paragraph bio and three figures. Under it four executives stand in cells with overshooting lines, each with an initials avatar, a name, a role, a one-line background and a few expertise chips that wrap. On a phone the leader comes first and the executives stack in one column. It's built from Avatar, Badge and Guides, with a CSS entrance and your theme's tokens for every colour. The people, figures and backgrounds are examples; no real lender is meant.
FAQ
How do I change the leader and the executives?
Edit LEADER (a name, a role, a bio of three paragraphs and three figures) and EXECUTIVES (a name, a role, a one-line background and a few expertise chips) at the top of the file. Four executives fill the row from xl; two or three work, with the cells wider.
How is it marked up?
The leader's portrait is a figure: the initials plate captioned with the name in an h3 and the role. The three figures are a description list. The executives are a list; each has an h3 and a list of expertise labelled with their name.
How are the lines drawn?
The leader's band and the executives' section each draw a top rule from rail to rail; the divider in the split meets the band's rule at a plus. Each executive's cell has its own lines that overshoot its corners, and the cells are apart, so the lines never touch.