Thumbnail

Small preview version of an image or video.

html

<figure class="thumb" style="width:72px;">
  <span class="thumb__frame" style="width:72px;height:72px;border-radius:10px;">
    <svg viewBox="0 0 48 48" width="100%" height="100%" aria-hidden="true"><rect width="48" height="48" fill="#BFD9F2"/><circle cx="24" cy="24" r="12" fill="#A8E6C1"/></svg>
    <span class="thumb__badge" aria-hidden="true"></span>
  </span>
  <figcaption class="thumb__label">Sunset dock</figcaption>
</figure>
<style>
.thumb { margin: 0; display: inline-flex; flex-direction: column; align-items: center; gap: 6px; font: 12px/1.3 system-ui, sans-serif; color: #241430; }
.thumb__frame { position: relative; display: block; overflow: hidden; border: 1px solid #24143022; }
.thumb__frame svg { display: block; }
.thumb__badge { position: absolute; top: -3px; right: -3px; width: 12px; height: 12px; border-radius: 50%; background: #E8A020; border: 2px solid #FAF7F2; }
.thumb__label { max-width: 120px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
</style>

tailwind

<figure class="thumb-tw m-0 inline-flex flex-col items-center gap-1.5 font-sans text-xs text-[#241430]" style="width:72px;">
  <span class="relative block overflow-hidden border border-[#24143022]" style="width:72px;height:72px;border-radius:10px;">
    <svg viewBox="0 0 48 48" width="100%" height="100%" class="block" aria-hidden="true"><rect width="48" height="48" fill="#BFD9F2"/><circle cx="24" cy="24" r="12" fill="#A8E6C1"/></svg>
    <span class="absolute -top-1 -right-1 w-3 h-3 rounded-full border-2 border-[#FAF7F2]" style="background:#E8A020;" aria-hidden="true"></span>
  </span>
  <figcaption class="max-w-[120px] text-center overflow-hidden text-ellipsis whitespace-nowrap">Sunset dock</figcaption>
</figure>

react

export function Thumbnail({
  size = 72,
  radius = 10,
  badge = true,
  label = "Sunset dock",
}) {
  return (
    <figure style={{ margin: 0, display: "inline-flex", flexDirection: "column", alignItems: "center", gap: 6,
      font: "12px/1.3 system-ui, sans-serif", color: "#241430", width: size }}>
      <span style={{ position: "relative", display: "block", overflow: "hidden", border: "1px solid #24143022",
        width: size, height: size, borderRadius: radius }}>
        <svg viewBox="0 0 48 48" width="100%" height="100%" style={{ display: "block" }} aria-hidden="true">
          <rect width="48" height="48" fill="#BFD9F2" />
          <circle cx="24" cy="24" r="12" fill="#A8E6C1" />
        </svg>
        {badge && (
          <span style={{ position: "absolute", top: -3, right: -3, width: 12, height: 12, borderRadius: "50%",
            background: "#E8A020", border: "2px solid #FAF7F2" }} aria-hidden="true" />
        )}
      </span>
      <figcaption style={{ maxWidth: 120, textAlign: "center", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
        {label}
      </figcaption>
    </figure>
  );
}