Thumbnail

Width Open in a tab

The classes below, on plain markup, in their own document — so what you are looking at is core's stylesheet and nothing else.

The markup

<span class="aparte-thumbnail aparte-thumbnail--lg"><img class="aparte-thumbnail__image"
      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 3'%3E%3Crect width='2' height='3' fill='%23b07d33'/%3E%3C/svg%3E"
      alt="A screenshot"></span>
<span class="aparte-thumbnail"><span class="aparte-thumbnail__label">PDF</span></span>
<span class="aparte-thumbnail aparte-thumbnail--sm"><span class="aparte-thumbnail__label">MD</span></span>

The thumbnail. A media tile: a fixed square that clips whatever is dropped

into it, with room for a control in a corner.

Distinct from .aparte-avatar, which is the same shape for a different reason: an avatar stands for a PERSON and falls back to initials, so it carries type styling and a text colour. A thumbnail stands for a FILE and falls back to an icon or a label, so it carries none of that — and it is position: relative because a remove button or a badge sits on it, which an avatar never has.

Classes

.aparte-attachments · .aparte-thumb · .aparte-thumb--file · .aparte-thumb--image · .aparte-thumb__name · .aparte-thumbnail · .aparte-thumbnail--lg · .aparte-thumbnail--sm · .aparte-thumbnail__image · .aparte-thumbnail__label

The tokens these read are on the CSS variables reference; every class of the kit, on one page, is the classes reference.