shadcn.io is not affiliated with official shadcn/ui
Alumni Network About Block for React
Where a mentoring platform's alumni went: a ranked list of destinations with bars, and one alumna on a framed card with the line from her old role to her new one.
Installation
Overview
Where alumni went, for React with Base UI, written for Graduand, a fictional mentoring platform for early-career engineers. A compact header gives the total, worked out by adding the rows, then the block splits. At the start, five destinations rank by how many people took them, each with a count and a bar drawn against the longest row, so the bars share one scale. At the end, one alumna sits on a framed card: her initials, the destination she stands for, the line from her role here to what she does now, and one sentence. On a phone the card comes first and the list follows under a rule. The page's rails and top rule come from the Guides spine, and the list ends the block so the next block's rule is the only line under it. It's built from Avatar, Badge and Guides, with a CSS entrance and your theme's tokens for every colour. There is no state and no script, so it can render on the server. For an about page that should say where people went without a directory of faces. The people, the company she founded and the counts are example data.
FAQ
How do I change the destinations and the card?
The destinations are DESTINATIONS at the top of the file, each a label and a count. The total in the header and the longest bar are computed from those counts, so a new row updates both. The card is ALUMNA: a name, a from, a to and a note. The badge on the card names the destination she belongs to; change it if you point the card at another row.
How is it read by a screen reader?
The heading is an h2, and "Destinations" is an h3 over an ordered list, so the rank is the list's own numbering as well as the figure beside each label. Each row reads the label and then the count. The bar is decorative, because the count is written. The card is a figure: the name is its caption, the arrow between the two roles is skipped, and the sentence is a quotation. The initials are decorative.
Why is the longest bar full and the others shorter?
Every bar is that row's count as a share of the largest count, rounded. The largest destination fills the track and the others sit in proportion, so a reader can compare them without a second axis. Change a count and its bar follows.
How does it fit on a phone?
The card is first in the page, so it shows before the list, and the list opens under a rule from rail to rail. On a wide screen the list takes the start column and the card the end column, with the divider meeting the block's top rule. Nothing scrolls sideways at 320 pixels, and in a right-to-left layout the arrow between the two roles turns around.
Why does the card have corner marks and the list does not?
The card is one framed figure, so its lines overshoot the corners. The list is a column of rows separated by hairlines, and it runs to the foot of the block. The page's side rails are the same pair every block uses, so this one joins the block above and the block below.
Related
- Pro
Headcount Stacked Chart About
Team and officesHeadcount over six years as stacked columns by department, where choosing a year (focus, hover or tap) lists its departments with counts and shares.
- Pro
Team Breakdown Bars About
Team and officesA team counted three ways in 100% bars (by function, location and tenure), where choosing a segment in the legend names its share and count under the bar.
- Pro
Repo Cards Open Source About
Press and recognitionThree repository cards for a developer toolkit, drawn like repo headers: owner and name, a description, a language letter, rolling star counts, forks, contributor initials and latest release, with a used-by line.
- Pro
Day Track Hiring Process
CareersA hiring process section for an applicant tracking company's own about page: five stages drawn to scale over fourteen days, five cells saying what to expect at each, and a promise to reply within two days.
- Pro
Culture Rituals About
Culture and valuesA team's rituals sorted by how often they happen: three bands, every week, every quarter and every year, each with three cells that say what the ritual is, who comes and how long it takes.
- Pro
Numbers Narrative About
Company storyA company's story told through four figures: a title stuck at the start while the reader scrolls, and rows that pair each large number with two sentences on how it happened.