# Team roster by desk > The studio as a directory in three named desks: a tracked desk label, its own top rule, then hairline rows carrying a small square portrait, a name, a tracked role and one line of what that person does. Built for the visitor whose question is which part of the studio somebody sits in. Example portraits are included; replace them with photographs of your own team. States no colour and no font of its own. Canonical: https://patternpaste.com/pattern/team-roster-desks.html Section: Team Access: Included in Pattern Paste access. Needs: Requires a block theme on WordPress 6.7 to 7.0. Classic themes and page builders are outside our supported setup. Adaptive patterns use the block theme’s colour, spacing and typography presets; styled variations declare their own colours or type. Blocks: column, columns, group, heading, image, paragraph Keywords: team, roster, directory, desks, staff, people Promise: Identical markup in every theme. --- ## The signature moment: the label is the only thing that ranks anything A team page usually ranks people: a founder first, a partner next, everybody else after. This one refuses to and ranks the WORK instead. Three desk labels, each closing its own group with a rule of its own, and inside a desk nobody is above anybody. That reads as an organisation chart without drawing one. A visitor arriving from a services page wants to know who does the thing they are here about, not who is senior, and three short labels answer that faster than ten job titles can. The label is a small tracked capital, sitting clear of its rule on the same left edge as everything else, so the three groups read as three shelves of the same object rather than three sections. The device costs nothing structurally: a desk is a group with a top rule and its rows inside it, so adding a fourth desk is copying a group and moving rows between them is cut and paste. Every rule is `currentColor`, so the whole section survives a dark style variation without a single change. ## What it inherits from your theme - **Typeface.** No font family is stated anywhere. The tension between the desk label, 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 tints a desk is a directory that has chosen a colour for you. - **Spacing scale.** The air inside a row, the gap between the portrait and the name, and the gap between one desk and the next are core spacing presets, so the density follows your theme. - **The rules.** Every hairline is `currentColor`, never a colour we chose. ## What it decides for itself - **A desk is a group, not a heading.** The label is a paragraph, tracked and uppercase. A heading in this catalogue may not state its own case or tracking, and a desk name is a label rather than a level of the document outline: three `h3`s between an `h2` and nothing would say the wrong thing about the page. - **Each desk carries its own top rule, and each row its own bottom rule.** So a desk is closed at both ends, a deleted row takes its hairline with it, and a deleted desk leaves nothing behind. - **There is no column header.** `team-roster` earns one because the list is unbroken; here the desk labels already interrupt the column, and a header repeated three times would be noise while a header shown once would be stranded above the first desk only. - **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 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 below 782px. - **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, so the name and role edges stay aligned down every desk while the sentence absorbs the difference. - **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. - **No links, no actions.** There is nothing tappable on a row. ## What you change first 1. **The desks.** Three labels is the number that reads; two is a split and five is a list of one-person teams. `Practice / Delivery / Making` is copy, not furniture: a consultancy might want `Advisory / Delivery / Research`. 2. **Who sits where.** Rows are identical and independent, so moving a person between desks is moving one group of blocks. Two people to a desk is the floor; a desk of one reads as an apology. 3. **The sentence.** One line each, about seventy characters, and it should say what that person does at that desk rather than repeat the role above it. 4. **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. ## Included images 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](/image-credits/) for the sources. Pasting an image URL does not import a Media Library attachment.