COMPONENT

Byline

A person: their mark, their name, and what they do. Put it under an article title, beneath a testimonial, or in the middle of a list row.

A credit

Your Name Design engineer, independent

HTML

<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, independent</span>
  </div>
</div>

The avatar size is the caller's

A dense list wants 32, an article credit 40, a testimonial 56. The byline holds the arrangement and otherwise stays out of your way.

A dense list 32px

A testimonial 56px

HTML

<div class="byline">
  <span class="avatar avatar-32 avatar-quiet">AB</span>
  <div class="byline-text">
    <span class="byline-name">A dense list</span>
    <span class="byline-role">32px</span>
  </div>
</div>
<div class="byline">
  <span class="avatar avatar-56 avatar-deep">CD</span>
  <div class="byline-text">
    <span class="byline-name">A testimonial</span>
    <span class="byline-role">56px</span>
  </div>
</div>

Reference

Read from components/byline.css when this page was built, so it cannot fall behind the stylesheet.

CLASSES.byline.byline-text.byline-name.byline-role

READS--ds-font-body--ds-font-display--ds-gap-loose--ds-gap-tight--ds-ink--ds-ink-faint--ds-text-caption--ds-text-ui

Notes

THIS IS AN EXTRACTION, NOT A NEW IDEA

The design this system came from draws the same three parts in three places, and the library had already written it once inside the testimonial. The second copy is where you extract; this was the third. The testimonial uses this now and has no byline rules of its own.

Baking a size in would need a modifier per size — which is the avatar's job, and it already does it.