previously Vue Storefront Build Better Storefronts

Thumbnail

SfThumbnail is a component that allows the user to display a color, gradient, icon, or image in a thumbnail style. One common use case from our blocks is using this component as avatar or thumbnail for filters.

Examples

Sizes

Thumbnail supports various sizes that can be set with the size prop: 'sm', 'base', lg and 'xl'

Single color

The most simple use case of thumbnail can be achieved by seting a single color with any of Tailwind's background bg- property.

Gradient

Gradients can be applied with any of Tailwind's bg-gradient- classes.

Image

You can pass an image as children to achieve avatar-like look of thumbnail.

Icon

Similar to images, you can also pass an icon as children.

Playground