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 into the default slot to achieve avatar-like look of thumbnail.
Icon
Similar to images, you can also pass an icon into the default slot.