Thumbnail

A framed image with an inset hairline and an optional touch of lift. Fixed-size stamps for rows, or a frame that follows the original image.

Sunlight crossing the floor of a room with textured earth walls — Inset edge

Install

npm install @patternmode/thumbnail

import { Thumbnail } from "@patternmode/thumbnail";
import "@patternmode/thumbnail/styles.css";

// Fixed-size image in a row.
<Thumbnail src="/room.jpg" alt="Sunlit room" size={48} />;

// Preserve the photograph's aspect ratio.
<Thumbnail
  src="/room.jpg"
  alt="Sunlit room"
  size={null}
  className="w-full"
  raised
/>;

Core API

`Thumbnail`

A media frame with an inset edge. Accepts ordinary span props and a ref.

src: stringImage URL. Renders a plain image element.
alt: string""Image description; use an empty string when adjacent text describes it.
children: ReactNodeYour own image, video, or canvas. Takes precedence over src.
size: number | string | null"2rem"Square edge length. Numbers are pixels; null lets the media determine height.
radius: number | string"3px"Corner radius. Numbers are pixels.
fit: "cover" | "contain""cover"Crop to fill the frame or keep the whole image visible.
position: string"center"Object position for an off-centre crop.
raised: booleanfalseAdds a small downward shadow to separate the image from its surface.