Thumbnail

The Thumbnail component displays an image or SVG as a small representation, often used in galleries, lists, or as a preview of a larger image. This component supports several sizes and fit options to accommodate different design requirements.

Effective Practices

When using the Thumbnail component, consider the following best practices:

Accessibility: Always provide meaningful alternative text (alt) for thumbnails that convey content.
Responsiveness: Choose the appropriate size and fit to ensure thumbnails look good on all device screens.
Use Case Specificity: Use isDisabled to visually indicate that an image is not interactive or currently unavailable.
Image Source: Be mindful of the source images’ resolutions and aspect ratios to maintain image quality without distortion.

Usage Guidelines

Thumbnails can be configured with different sizes, fit types, and states (disabled or not). Below are the configurations available:

Sizes

sm
Small size for thumbnails, use where space is extremely limited.

<Thumbnail
  src="https://placehold.co/50x50/304DDB/FFF"
  alt="A small thumbnail"
  size="sm"
/>

md
The default size, suitable for most use cases.

<Thumbnail
  src="https://placehold.co/100x100/304DDB/FFF"
  alt="A medium thumbnail"
  size="md"
/>

lg
Large size, use when the thumbnail needs to be more prominent.

<Thumbnail
  src="https://placehold.co/200x200/304DDB/FFF"
  alt="A large thumbnail"
  size="lg"
/>

Fit

cover
Scales the image to cover the entire frame, maintaining its aspect ratio. Parts of the image may be clipped if its aspect ratio does not match that of the frame.

<Thumbnail
  src="https://placehold.co/100x300/304DDB/FFF"
  alt="Thumbnail covering available space"
  fit="cover"
/>

contain
Scales the image to ensure it fits entirely within the frame, maintaining its aspect ratio. The image will be letterboxed if its aspect ratio differs from the frame, showing margins on one or both sides.

Thumbnail scaled to contain within space

<Thumbnail
  src="https://placehold.co/300x100/304DDB/FFF"
  alt="Thumbnail scaled to contain within space"
  fit="contain"
/>

State

isDisabled
Use to indicate that the thumbnail is not interactive or is unavailable at the moment.

<Thumbnail
  src="https://placehold.co/100x100/304DDB/FFF"
  alt="Disabled thumbnail"
  isDisabled
/>

Props

interface ThumbnailProps

alt string

The alt text for the thumbnail.

src string | ReactElement, string | JSXElementConstructor>

The source of the image to display can either be a URL string or an SVG element.

fit ? "cover" | "contain" | null

Optional fit style for the thumbnail image.

Defaults to cover

isDisabled ? boolean

Optionally disables the thumbnail.

size ? "sm" | "md" | "lg" | null

Optional size of the thumbnail.

Defaults to md