Thumbnail

betav0.1.0

A 48px framed slot for a glyph or a small image. It is a Paper with its content centred and nothing else — no colour of its own, so it inherits the elevation mechanism and sits correctly on any surface. Used as the leading slot of a card header, and anywhere a small object needs a frame.

Open in Figma Machine contract (Thumbnail.meta.ts)

Variants

48px frame, glyph centred — the node's 12px inset falls out of the centring.

Examples

<Thumbnail>
  <Icon name="server" size={24} />
</Thumbnail>

// One layer above the surface it sits on (the Hero symbol's thumbnail).
<Thumbnail elevation={2}>
  <Icon name="server" size={24} />
</Thumbnail>

Props

Prop	Type
`children`	`ReactNode — normally an <Icon size={24} />. Centred in the 48px frame.`
`elevation`	`0 \| 1 \| 2 \| 3 — passed through to Paper. Default 1. Pass 2 for a frame one layer above the surface it sits on, as the Hero symbol draws its thumbnail.`
`className`	`string — merged onto the Paper.`

Accessibility

2.1 AAWCAG pass

The frame is decorative: it carries no text and no role. A glyph inside it that means something needs its own accessible name, through Icon's aria-label — the frame adds none.