[Library] Team

Catalogue accessStandard

Team roster

The whole team as a ruled directory: ten hairline rows, each carrying a name, a tracked role and one line of what that person does, under a column header. Built to be read down rather than looked at, and it holds twenty people without changing shape. Core blocks only, no images. States no colour and no font of its own.

Variation View
Before you copy
Open in a new window

Identical markup in every theme. Manrope typeface rgb(255, 255, 255) ground 1280px viewport

The whole team as a directory. Ten ruled rows, each carrying a name, a tracked role and one line of what that person actually does, under a small column header. It is built to be read down rather than looked at, and it holds twenty people without changing shape.

The signature moment

Density

team-grid gives six people a monogram plate each and half a screen. This one gives ten people ten hairlines and asks you to read them. That is the whole idea, and everything in the pattern serves it:

  • One rule per person, and nothing else. No plate, no box, no picture. The row is a hairline and three fields, so a name costs a line of vertical space rather than a card.
  • 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 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: six people in this shape look thin, and twenty look like a practice.

What it inherits from your theme

  • 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, 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.

What it decides for itself

  • Fixed column proportions, and only two of them. The name column is 26% and the role column 22%; 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 name, role, 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 of ten rows cannot afford to be wrong about.
  • 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.

What you change first

  1. The people. Ten names, ten roles, ten sentences. 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.
  3. The columns. If your roles are long, move the name column to 22% and the role column to 26%. Those two numbers are the only geometry in the pattern.
  4. The header labels. Name / Role / The work is copy, not furniture. A consultancy might want Name / Practice / Sector.
The variation64 words
  • By desk. The same rows, grouped under three tracked desk labels, each group opening with its own top rule. It changes the composition rather than the dial and holds every other promise the base makes: the same colour chains, the same fields, the same hairlines. Take it when the question a visitor arrives with is which part of the studio somebody sits in.
Back to the library

Continue exploring

Next in Team

Explore all 3 Team patterns