Cmpnts

Menu

Molecules

Lockup

A primary line of text with a secondary one under it, such as a name and an email.

Full sun Mycorrhizal fungi and leaf mulch
Code
HTML
<span class="lockup">
  <span class="small-heading">Full sun</span>
  <span class="small-text text-muted">Mycorrhizal fungi and leaf mulch</span>
</span>

Why it exists

Interfaces are full of things with two lines: a name and an email, a plot and its soil. Without a shared part, each one gets its own small layout, and they drift apart.

A Lockup has no options, on purpose. It stacks its lines and lets them shrink, which is the only part that’s hard to get right in a tight row. Everything else is decided elsewhere: type by the text atom on each line, alignment by a text utility, and what sits beside it by a layout primitive.

When to use

  • For two lines that belong together: in a list, a Table cell, a Button or beside an Avatar or Thumbnail.
  • Not for one line: that is a text atom alone.
  • Not for a title, body and actions: that is a Card.

Rules

  • Lines take any text atom: .small-heading over .small-text.text-muted in lists and Tables, .heading over .text for a profile. The Lockup sets no type.
  • Truncation: add .truncate to a line; the Lockup and its lines have min-inline-size: 0, so they shrink in flex and grid.

A name beside an Avatar

An Avatar beside a Lockup. The name is visible, so the Avatar is decorative.

Marcus Chen mchen@urbanmail.net
Code
HTML
<div class="inline">
  <span class="avatar avatar--sm" aria-hidden="true">MC</span>
  <span class="lockup">
    <span class="small-heading">Marcus Chen</span>
    <span class="small-text text-muted">mchen@urbanmail.net</span>
  </span>
</div>

Do and Don’t

DoDon’t
Put a text atom on each line.Use <b> and <small> for the lines.
Hide the Avatar beside a visible name with aria-hidden.Make a screen reader say the name twice.
Add .truncate to a line that may run long.Set a width on the Lockup to stop it pushing its container wider.
Use .text-center or .text-end on the Lockup.Look for a lockup--* modifier.

In Storybook

See also

  • Avatar and Avatar Group: Who someone is, as a photo, initials or an icon in a shape.
  • Thumbnail: A small picture of a thing, such as album art, a product shot or a file preview.
  • Text and Heading: The type styles, from a display title to small text, and the List.

Search the docs