Skip to main content

Thumbnail

shadow

Thumbnail makes it easier to view larger images or other media by displaying a smaller preview of them. It can be used alone but also in other elements.

Basic usage​

Use in Items​

When used in Item. elements, its size adjusts to the size of the parent, and its position can be specified by adding a slot with a value of start for left positioning, or end for right positioning.

Custom styles​

When to use​

Use wje-thumbnail to improve readability, scannability, and contextual understanding of content.

When not to use​

Do not replace structured interactive data with media-only presentation when precision is needed.

Accessibility​

Provide alt text, maintain readable contrast, and include text equivalents for icon-only controls.

Best Practices​

  • Compress media and use lazy loading in larger collections.
  • Keep information priority consistent across cards/lists.
  • Avoid duplicating the same meaning in icon and text without added value.

Attributes and Properties​

No properties available for this component.

Events​

No events available for this component.

Methods​

No public methods available for this component.

CSS Shadow Parts​

No CSS shadow parts available for this component.

CSS Custom Properties​

NameDescription
--wje-thumbnail-widthDefines the width of the thumbnail. Accepts any valid CSS length unit such as px, rem, or %.
--wje-thumbnail-heightSpecifies the height of the thumbnail. Accepts any valid CSS length unit.
--wje-thumbnail-border-radiusSets the border radius of the thumbnail, determining how rounded its corners appear. Accepts any valid CSS length unit or CSS variable.

Slots​

NameDescription
thumbnail-slotThe slot for the thumbnail content.

Content