team-profile — Lattice component
Lattice

team-profile

InventoryGridStructure

A roster of named people, each under a portrait, with the role they own.

Open in Playground
Variant

Use for the people slide — 'meet the leaders', 'your account team', the QBR roll-call. Each person is a portrait, a name, a role and one line. Anyone with no photo gets a monogram of their initials instead, so a half-photographed roster still reads as one designed wall rather than a set of holes: the monogram stays quiet beside real faces, and takes a categorical hue only when nobody in the roster has a photo.

org-chartonboardingkickoffpitch

Common mistakes

  • Leading with the portrait instead of the name. The top-level bullet is the person's NAME (- Ada Okafor); the portrait, role and note all nest under it. Writing - ![](ada.jpg) at the top level makes the photo the person and leaves the card with no name.
  • Writing the role as plain nested text instead of backticks. The one backticked nested line is the role, set as the label under the name. Written plain it becomes a second note line, so the card shows two body lines and no role.
  • Filling the alt text on the portrait. Write ![](photo.jpg) with an empty alt. The name is set right beside the face and IS the accessible label, so alt text only makes a screen reader say it twice — the engine drops it either way.
  • Adding a KEY INSIGHT or a closing note to a full bio roster. A coda takes 121px out of the stage, and bio is the one composition that cannot absorb it: its rows are already at their floor, so a sixth person clips. Every other composition reflows and is fine — the default turns its cards on their side, lead tightens its band, sides closes its gap. So keep a bio roster to five when the slide carries a coda or a footer, or move the line into the headline.
  • Expecting a lead hero to hold a long note when the roster is also long. The hero's note is the one that earns the room, and the ranked band widens a column per extra person to stay one row — so nine people fit, but each ranked cell is narrower than the last. Past six, give the note to the hero and leave the rest at name and role, the way the sample does; past nine the notes are what stop being readable and that is bench.
  • Numbering the roster with an ordered list (1. Ada Okafor). The roster is rebuilt as an unordered list either way, so the numbers are dropped and nothing warns you. If the order is just the order you thought of them in, write - Ada Okafor and lose nothing. If the numbers meant RANK, that is what lead is for — it gives the first person the hero cell and says the same thing without asking the reader to count.

Authoring

<!-- _class: team-profile -->

`Your account team`

## The claim the roster backs up.

- First person
  - ![](portrait.jpg)
  - `Their role`
  - One line on what they own.
- Second person
  - ![](portrait-2.jpg)
  - `Their role`
  - One line on what they own.
- Third person
  - `Their role`
  - One line on what they own.

Slots

SlotSelectorRequiredDescription
eyebrowp > code:only-childnoOptional kicker above the headline — a short label in backticks, e.g. Your account team.
titleh2noOptional headline above the roster. A claim earns its place ('Six people own this program end to end'); a bare label ('The team') does not.
peopleul > liyesOne top-level bullet per person, and the bullet IS their name. Everything about them nests under it.
portraitul > li > ul > li > imgnoThe person's photo, nested under their name as - ![](photo.jpg). Leave the alt empty — the name beside it is the accessible label. Omit it entirely and the engine draws a monogram from the initials instead.
roleul > li > ul > li > codenoThe one backticked nested line is the role, set as a small tracked label under the name — ` Head of Delivery `. Deliberately not a pill: a boxed chip under every one of twelve faces competes with the portraits it is meant to caption.
noteul > li > ul > linoAny remaining plain nested line is the note: one short line on what this person owns.
sideh3nosides only. Two ### subheadings, each followed by its own list, label the two rosters ('Your team' / 'Our team').

Anatomy

┌─────────────────────────────────────────┐
│  header                                 │
│  YOUR ACCOUNT TEAM                      │
│  Six people own this program.           │
│                                         │
│      ( o )       ( o )       ( o )      │
│       Ada        Marcus      Priya      │
│    (Sponsor)   (Director)  (Delivery)   │
│      Clears     Runs the     Staffs     │
│    blockers.    cadence.   the pods.    │
│                                         │
│  footer                           1/19  │
└─────────────────────────────────────────┘

Variant decision rule

  • default (no modifier) — Three to six people who each need a face, a role and one line — the workhorse 'meet the team' roster.
  • lead — One person is accountable and the rest report into the work: the hero cell and the rule beneath it say so without a sentence.
  • bench — The roster runs past eight and the notes matter less than the breadth — six up, face and role only.
  • sides — Two teams meet: the QBR roll-call, a joint steering group, a vendor and a client side that need labelling.
  • bio — Four or fewer leaders who each need a real line, and the roles read better scanned down a column than centered under a face.

Variants

lead — lead

The first person takes a hero cell; the rest rank beneath.

<!-- _class: team-profile lead -->

`team-profile lead`

## lead gives the first person the hero cell and ranks the rest beneath.

- Ada Okafor
  - ![](ada.svg)
  - `Executive Sponsor`
  - Signs the scope and owns the outcome.
- Marcus Vale
  - ![](marcus.svg)
  - `Program Director`
- Priya Raman
  - ![](priya.svg)
  - `Head of Delivery`
- Tomas Lindqvist
  - ![](tomas.svg)
  - `Solutions Architect`
- Nia Bello
  - ![](nia.svg)
  - `Data Lead`
Explore in Playground

bench — bench

The long roster, packed to a face, a name and a role.

<!-- _class: team-profile bench -->

`team-profile bench`

## bench packs the long roster down to a face, a name, and a role.

- Ada Okafor
  - ![](ada.svg)
  - `Executive Sponsor`
- Marcus Vale
  - ![](marcus.svg)
  - `Program Director`
- Hana Suzuki
  - `Field Engineer`
- Priya Raman
  - ![](priya.svg)
  - `Head of Delivery`
- Tomas Lindqvist
  - ![](tomas.svg)
  - `Solutions Architect`
- Owen Adeyemi
  - `Revenue Ops`
- Nia Bello
  - ![](nia.svg)
  - `Data Lead`
- Jonah Reyes
  - ![](jonah.svg)
  - `Customer Success`
- Clara Nunes
  - `Quality Lead`
- Sofia Marchetti
  - ![](sofia.svg)
  - `Security Lead`
- Kenji Sato
  - ![](kenji.svg)
  - `Support Manager`
- Idris Khan
  - `Release Manager`
Explore in Playground

sides — sides

Two labeled rosters facing each other across the slide.

<!-- _class: team-profile sides -->

`team-profile sides`

## sides faces two rosters across the table, each under its own label.

### Your team

- Ada Okafor
  - `VP Operations`
- Priya Raman
  - `Head of Delivery`
- Nia Bello
  - `Data Lead`

### Our team

- Marcus Vale
  - `Account Director`
- Tomas Lindqvist
  - `Solutions Architect`
- Jonah Reyes
  - `Customer Success`
Explore in Playground

bio — bio

One person per row, with room for a real sentence.

<!-- _class: team-profile bio -->

`team-profile bio`

## bio turns the grid on its side and gives the note a line of its own.

- Ada Okafor
  - ![](ada.svg)
  - `Executive Sponsor`
  - Fifteen years running operations across forty sites.
- Marcus Vale
  - ![](marcus.svg)
  - `Program Director`
  - Landed this migration twice under a regulator.
- Priya Raman
  - ![](priya.svg)
  - `Head of Delivery`
  - Owns the pods and the board date.
- Tomas Lindqvist
  - ![](tomas.svg)
  - `Solutions Architect`
  - Wrote the spec the plan hangs from.
Explore in Playground