Thumbnail
A square tile for a file — an image's picture, or another file's type — with room for a remove button in a corner.
-
.aparte-attachments
On this page
<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>.aparte-thumbnail is a fixed square that clips what you put in it: an image, or a label with
the file’s type when there is no picture. It is the tile attachments
are drawn with, in the composer and in a message.
It looks like an avatar and is a different thing: an avatar stands for a person and falls back to initials; a thumbnail stands for a file, falls back to its type, and leaves room in a corner for a remove button or a badge.
Customize
Section titled “Customize”| Variable | Default |
|---|---|
--aparte-attachments-max-height | 140px |
--aparte-thumb-name-color | #ffffff |
--aparte-thumb-name-scrim | linear-gradient(to top, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0)) |
--aparte-thumb-name-padding | 14px 5px 4px |
--aparte-thumb-remove-size | 18px |
--aparte-thumb-remove-inset | 3px |
--aparte-thumb-remove-bg | rgba(0, 0, 0, 0.6) |
--aparte-thumb-remove-bg-hover | rgba(0, 0, 0, 0.85) |
--aparte-thumb-remove-color | #ffffff |
--aparte-thumb-radius | var(--aparte-radius-lg) |
--aparte-thumbnail-size | 56px |
--aparte-thumbnail-size-sm | 40px |
--aparte-thumbnail-size-lg | 72px |
--aparte-thumbnail-bg | var(--aparte-surface-2) |
--aparte-thumbnail-border | var(--aparte-border) |
--aparte-thumbnail-radius | var(--aparte-radius-lg) |
Classes
Section titled “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
Accessibility
Section titled “Accessibility”- An image needs an
alt, or the file’s name next to it; a remove button needs a name that says which file it removes.
Related
Section titled “Related”- Attachments — the files a message carries, drawn with these tiles.
- Avatar — the same shape for a person.