Thumbnail

Render a next/image that fills a sized, clipped Box.

Thumbnail renders a relatively positioned, overflow="hidden" Box containing a next/image in fill mode. Use it for cover images, avatars and other images that should fill a box of a known size. It requires Next.js.

Launch recapHighlights from the spring release event.

Import#

typescript

import { Thumbnail } from "@reactberry/system/blocks";

Usage#

typescript

import { Thumbnail } from "@reactberry/system/blocks";
import { Box, Text } from "@reactberry/system/elements";

export default function ArticleCard() {
  return (
    <Box skin="surface" shape="rounded" overflow="hidden">
      <Thumbnail
        src="https://example.com/covers/launch.jpg"
        alt="Launch event stage"
        width="100%"
        aspect="16/9"
      />
      <Box p="m">
        <Text fontWeight="600">Launch recap</Text>
      </Box>
    </Box>
  );
}

Examples#

Sizes and shapes#

The image fills the wrapper, so size the wrapper with size, width and height, or width plus aspect. shape rounds the corners.

Object fit#

objectFit controls how an image with a different aspect ratio fits the wrapper. It defaults to "cover".

cover

contain

API#

Thumbnail#

Prop	Type	Default	Description
`src*`	`string`	—	Image URL passed to `next/image`.
`alt*`	`string`	—	Image alt text.
`objectFit`	`"fill""none""contain""cover""scale-down"`	—	How the image fits the wrapper. Defaults to `"cover"`.

All other BoxProps except as are spread onto the wrapper Box.

Accessibility#

alt is required and is passed to the rendered img.

Notes#

Without a size on the wrapper, it collapses to zero height and the image is not visible.
sizes is fixed at "100rem", so Next.js may request a larger image than the rendered size. It cannot be overridden through props.
objectFit is passed to next/image as a prop. In fill mode Next.js applies it as an inline object-fit style, but it also treats it as a legacy prop and logs a warning in development. The warning appears for every Thumbnail, because a value ("cover" by default) is always passed.
No other next/image props (such as priority, quality or placeholder) can be passed through; extra props go to the wrapper.
Remote src hosts must be allowed in your Next.js images configuration.
ThumbnailProps is not exported.