Thumbnail

A small picture of a thing, such as album art, a product shot or a file preview.

Code

HTML

<img class="thumbnail" src="/examples/thumb.svg" alt="Green abstract artwork" />

Why it exists

In a track list, a basket or a file list, people often look for the picture before they read the words. A Thumbnail gives a picture a place in those rows without needing a Card around it, and without borrowing an Avatar, which says “person”.

Its size is set on the block side, and the width follows from the aspect. Pictures of different shapes still line up in a row, and the row doesn’t jump when an image arrives.

Most of the time it repeats what the words beside it already say, so it usually takes an empty alt. It only needs its own description when it says something the text doesn’t.

When to use

• For a picture of a thing: in a track list, a basket or a file list.
• Not for a person: that is an Avatar.
• Not for a Card’s own image: that is .card__thumb.
• Not for an icon on a tint: that is an Icon Box.

Rules

• Never interactive. A Button or link that opens the thing contains one, and the control carries the name.
• Naming follows context. Beside a visible title: alt="" (an icon Thumbnail takes aria-hidden="true"). On its own, or when the picture says what the text doesn’t: a real alt.

Name It for What It Adds

3

Code

HTML

<!-- Beside a visible title -->
<img class="thumbnail" src="/examples/thumb.svg" alt="" />

<!-- On its own -->
<img class="thumbnail thumbnail--lg" src="/examples/thumb.svg" alt="Studio headphones, black" />

<!-- No picture: an icon for the kind of thing -->
<span class="thumbnail" aria-hidden="true">
  <svg class="icon" width="1em" height="1em" aria-hidden="true" focusable="false"><use href="#Music"/></svg>
</span>

<!-- A count on a corner: the span holds the picture and the name -->
<span class="thumbnail thumbnail--lg" role="img" aria-label="Fern, 3 new tracks">
  <img src="/examples/thumb.svg" alt="" />
  <span class="badge badge--accent badge--top-end" aria-hidden="true"><span class="badge__text">3</span></span>
</span>

In a Row

<ul role="list">
<li class="inline">
  <img class="thumbnail" src="/examples/thumb.svg" alt="" />
  <div class="lockup">
    <span class="small-heading">Celestial Horizon</span>
    <span class="small-text text-muted">Aura &amp; Tycho</span>
  </div>
</li>
</ul>

Do and Don’t

In Storybook

• Thumbnail variants and states
• Thumbnail tokens

See also

• Avatar and Avatar Group: Who someone is, as a photo, initials or an icon in a shape.
• Icon and Icon Box: A small glyph that helps people recognise something, on its own or in a frame.
• Card: A surface with named parts, such as a header, a body and a footer, for one thing a person can read, compare or act on.
• Lockup: A primary line of text with a secondary one under it, such as a name and an email.