Team roster

The whole team as a directory. Hairline rows under a small column header, each carrying a square portrait the size of a thumb, a name, a tracked role and one line of what that person actually does. It is built to be read down rather than looked at, and the row is the only unit in it, so ten rows and twenty rows are the same section.

A directory and a portrait section usually want opposite things. The directory wants rows a visitor can run an eye down; the portrait section wants faces big enough to recognise. This one takes the row as the unit and puts the face inside it, at 72px, beside the name rather than above it.

That is the whole idea, and everything else serves it:

• The portrait is part of the name, not a column of its own. The picture and the name sit in one flex row inside the name column, so they stay together when core stacks the row on a phone. A separate image column would have put the face on its own line at 390 and turned a directory into a list of cards.
• One rule per person, and nothing else. No plate, no box, no frame around the picture. The row is a hairline, a face and three fields.
• The column header. A tiny tracked Name / Role / The work sits above the first rule, which is the device that turns a list into a directory. It is the only row that does not stack on a phone, so the section still announces its columns at 390.
• The bio is one line, on purpose. Held to about seventy characters, every row is the same height, so the rules are evenly spaced and the eye runs down the faces and names instead of stopping to read.

Density is a composition, not an absence of one. The proof is that the section gets better as it gets longer: the portraits turn the list into a column of people, and a column of people is worth more the more of them there are.

1. The people. Ten names, ten roles, ten sentences, ten faces. The sentence is the thing worth writing: it is one line, it is the only place a person gets a voice, and "Runs the practice and still draws every stair detail herself" does more for a studio than a paragraph of biography.
2. The length. Rows are independent and identical. Copy the last one for an eleventh person, delete one for a ninth. Nothing about the layout is tuned to ten, and the section reads better long than short.
3. The pictures. Point each row at your media library. They do not have to be shot square, but they do have to be cropped to the head and shoulders first: the frame centres what you give it, so a standing photograph loses the top of the head and keeps the shirt. At 72px the head is the only thing that carries.
4. The columns. If your roles are long, move the name column to 30% and the role column to 28%. Those two numbers are the only geometry in the pattern.
5. The header labels. Name / Role / The work is copy, not furniture. A consultancy might want Name / Practice / Sector.

• Typeface. No font family is stated anywhere. The tension between the name at reading size and the role in tracked caps is set entirely in your face.
• Palette. Ground on your base, all type on your contrast, both as fallback chains ending on a colour WordPress guarantees. No second ground and no third colour: a directory that stripes its rows is a directory that has chosen a colour for you.
• Spacing scale. The air above and below each row, the gap between the portrait and the name, and the gap between the header and the first rule are core spacing presets, so row density follows your theme.
• The rules. Every hairline is currentColor, so the list survives a dark style variation without a single change.

• The portrait is a 4.5rem square, and the picture in it is a head crop. A square is the frame that matches a row: 72px, about the height of two lines of type, so the face sits inside the row instead of setting its height. What makes it read is the picture rather than the frame. Each example points at a separate head-and-shoulders file, not at a standing portrait squared off: core/image has no focal point, so a square asked of a full-length shot centres on the chest and takes the crown off the head, and at 72px a waist-up frame is a torso with a face on top of it.
• The frames include example portraits. Their public image URLs travel with the copied pattern. Choose Replace to select photographs of your own team, keeping the crop and layout already set.
• Fixed column proportions, and only two of them. The name column is 34% and the role column 24%; the bio column states no width and takes what is left. Two fixed and one fluid is what keeps the name and role edges aligned down the page at every width while the sentence absorbs the difference.
• The rules belong to the rows, not to a separator. Each row group carries its own 1px bottom border and the list carries the top one, so the list is closed at both ends and a deleted row takes its rule with it. A core/separator would have needed is-style-wide to run the full measure at all, and would then have had to be deleted in pairs.
• It stacks into a readable list, not a broken table. Below 782px core puts each field on its own line, so a row becomes face and name, then role, then sentence, which is the right shape for a phone. The header row is the one exception and stays in three columns, which is why its third label is two short words.
• Reading sizes, not preset sizes. The bio and the name state their own clamp() with floors of 15px and 16px. Core's small preset is 13px, which is a size a directory cannot afford to be wrong about.
• Type never sits on a photograph. Every field is beside the picture, on the section's own ground.
• No links, no actions. There is nothing tappable on a row. A roster whose every line is a link is a listing, and this catalogue has a listing section for that.

The copied markup includes example portraits of fictional people. The public image URLs keep the examples visible after pasting. Select an image or cover and choose Replace to use your own Media Library files. See image credits for the sources. Pasting an image URL does not import a Media Library attachment.