Skip to content

SECTION

People row

A person in a list, with a status hard right. Put it in a rule stack and a whole team reads as one framed list.

Three people

NN
Your Name Design engineer — lead
OWNER
AB
Collaborator Backend, part time
ACTIVE
CD
Client contact Product, Company
GUEST
HTML
<div class="rule-stack rule-stack-on-sunk" style="width:100%">
  <div class="rule-row people-row">
    <div class="byline">
      <span class="avatar avatar-40">NN</span>
      <div class="byline-text">
        <span class="byline-name">Your Name</span>
        <span class="byline-role">Design engineer — lead</span>
      </div>
    </div>
    <span class="chip chip-selected">OWNER</span>
  </div>
  <div class="rule-row people-row">
    <div class="byline">
      <span class="avatar avatar-40 avatar-deep">AB</span>
      <div class="byline-text">
        <span class="byline-name">Collaborator</span>
        <span class="byline-role">Backend, part time</span>
      </div>
    </div>
    <span class="chip">ACTIVE</span>
  </div>
  <div class="rule-row people-row">
    <div class="byline">
      <span class="avatar avatar-40 avatar-quiet">CD</span>
      <div class="byline-text">
        <span class="byline-name">Client contact</span>
        <span class="byline-role">Product, Company</span>
      </div>
    </div>
    <span class="chip chip-muted">GUEST</span>
  </div>
</div>

Reference

Read from sections/people-row.css when this page was built, so it cannot fall behind the stylesheet.

CLASSES.people-row.byline.chip
READS--ds-gap--ds-gap-row--ds-pad-row-lg--ds-people-name-basis

Notes

THE NAME GIVES WAY, THE STATUS DOES NOT

The tag is flex: 0 0 auto and the byline takes the slack. The other way round ellipsises the one word on the row that comes from a fixed vocabulary — and a truncated status is worse than a wrapped name, because the reader cannot guess it back.

Below the width where a name and a status can share a line, the status drops beneath rather than both being squeezed.