Dev Tools

Thumbnail

Clickable card used as a navigation element in category overviews and hub pages. Image, heading, and optional description — entire card links to a detail page.

Import

import Thumbnail from '../../components/utility/Thumbnail.astro';

Props

PropTypeRequiredDefaultDescription
href string Yes — Link destination for the card
imageId string No — Figma frame name — used to look up the image in Sanity. When missing, a gray placeholder fills the media slot.
heading string Yes — Card title — rendered as body-xl
description string No — Short description below the heading — rendered as body-md secondary

Anatomy

  • Card padding (around image): 8px
  • Text block padding (heading + description): 16px
  • Heading → description: 8px
  • Card radius: 16px · Image radius: 12px
  • Image aspect ratio: 16 / 10, object-fit: cover

States

StateFillBorderShadow
Normal --color-fill-surface-action --color-border-surface-action --shadow-surface-action
Hover --color-fill-surface-action-hovered --color-border-surface-action-hovered --shadow-surface-action-hover

Sizing

Thumbnail fills 100% of its grid cell. Size is controlled by the parent — wrap thumbnails in <Columns count={2} /> for 50% cards or <Columns count={3} /> for 33% cards. The grid gap (16px) comes from Columns.

Usage

<Columns count={2}>
  <Thumbnail
    href="/brand/logo"
    imageId="brand-overview-1"
    heading="Logo"
    description="Primary marks, clear space, and usage rules."
  />
  <Thumbnail
    href="/brand/typography"
    imageId="brand-overview-3"
    heading="Typography"
    description="Type families, scales, and hierarchy."
  />
</Columns>

Live examples

Two columns — heading + description

Logo

Primary marks, clear space, and usage rules.

Typography

Type families, scales, and hierarchy.

Three columns — heading only

Color

Motion

Icons

Three columns — heading + description

Voice & Tone

How we sound across channels.

Photography

Real people, real moments.

Illustration

Style guide for custom artwork.

Notes

  • The whole card is a single <a> — no nested interactive elements inside.
  • When imageId is omitted, a neutral placeholder renders at the same aspect ratio. Always pass a real Sanity image in production content.
  • Thumbnail is a grid item — it doesn't register in content-flow. Place it inside Columns, never directly in .content-flow.
  • Fill, border, and shadow all transition on hover (150ms ease).
Page tokens