Org Chart Showcase Hero Block for React

Edit ORG. It's one person, the top of the tree, and each person has initials, a name, a role and their direct reports, a list of people in the same shape (empty for the last level). The chart draws whatever you put there: add a fourth VP or a third report and the connectors follow, since they're drawn by each list item, not at fixed coordinates.

In CSS, with no SVG. Each team's list draws a short line down from its manager (before: on the ul), and each person draws a stub up to the team's rail (before: on the li) and their part of the rail itself (after:), which starts at the first person's centre and ends at the last one's. The insets are logical (start-1/2, first:after:start-1/2, last:after:end-1/2), so the chart mirrors in right-to-left layouts, and the lines can never miss a card the way fixed coordinates do. The VPs' row is a grid that each VP joins through a subgrid (grid-rows-subgrid), so the VP cards share one height and their teams start on one line, however the names wrap.

Nest another ul with the TEAM class under a report, with REPORT on its items, and give its cards their own style in CARD and LABEL. Three levels is about what fits under a hero headline, though; for a whole company, draw the top two levels here and link to the full directory.

As what it is: nested lists, labelled "Org chart". A screen reader announces the CEO, then a list of three VPs, each with a list of two reports, by name and role; the initials are hidden, since the name follows them. The headline is the block's one h1, and nothing in the chart takes focus.

The copy comes first and the band under it, so the Shine Button is on the first screen. Below sm, the VP cards stack the avatar over the name, and the reports shrink to their initials, with their names and roles still in the page for screen readers (sr-only sm:not-sr-only); from sm up, every card shows its name and role. The chart fits without scrolling down to 320px.

Use the org chart when structure is the point: who reports to whom, as in HR tools, people platforms and team directories. Use an avatar grid when you just want to show the team, or how many people use the product.