## Feature Examples
### Structure
- description: Thumbnails have 3 optional content areas: - `image` - `title` - `description`
- example:
```jsx
}
title={
Title
}
description={
Description
}
/>
;
```
### Size
- description: Adjust the component size using `size` prop. It supports 3 sizes: - `medium` (default) is the standard used in common cases. - `small` is used for smaller elements and more compact designs. - `tiny` is best for dense layouts.
- example:
```jsx
;
```
### Skin
- description: Change the thumbnail appearance using the `skin` prop. Two skin options are currently available. Use the `secondary` skin in panels that include thumbnails, such as environments like the Wix Harmony Editor.
- example:
```jsx
}
contentAlignment="top"
width={165}
height={200}
/>
}
contentAlignment="top"
width={165}
height={200}
/>
;
```
### Dimensions
- description: Set the dimensions of a thumbnail in pixels or percentages with the `height` and `width` properties.
- example:
```jsx
;
```
### Content alignment
- description: Control the vertical alignment of thumbnail content with the `contentAlignment` prop. It supports 2 options: - `center` (default) is the standard used for common cases. - `top` is used when the thumbnail list contains items with different content lengths.
- example:
```jsx
}
height={240}
contentAlignment="center"
width={165}
/>
}
height={240}
contentAlignment="top"
width={165}
/>
;
```
### Text position
- description: Control the thumbnail text position with the `textPosition` prop. - `inside` (default) is used for text-only thumbnails or thumbnails that require more emphasis. - `outside` is used for side panel thumbnails or for a large group of illustrated thumbnails.
- example:
```jsx
}
contentAlignment="top"
width={165}
height={200}
/>
}
contentAlignment="top"
textPosition="outside"
width={165}
height={200}
/>
;
```
### Background image
- description: Render an image as a thumbnail background with the `backgroundImage` prop. This works well for gallery selections, such as product cover images.
- example:
```jsx
;
```
### States
- description: Control the state of a component with: - `selected` to mark active selection. - `disabled` to mark an item that cannot be selected or deselected. Remove the selected item checkmark icon with the `hideSelectedIcon` prop.
- example:
```jsx
}
width={140}
/>
;
```
### Status message
- description: Add text that explains the status or what action the user should take with the `statusMessage` prop. Show the status message inline, directly below the thumbnails, by wrapping it in a `` and adding `statusMessage`. View more inline status message examples in ``.
- example:
```jsx
;
```
### Custom content
- description: Place any image, component or set of components inside the thumbnail content area.
- example:
```jsx
Content;
```
## Common Use Case Examples
### List of options
- description: Use a thumbnail to create a list of options with icons as visual cues.
- example:
```jsx
() => {
const [selected, setSelected] = React.useState(0);
const renderCell = ({ id, title, src }) => (
{title}}
selected={selected === id}
onClick={() => setSelected(id)}
>
);
return (
Decide how you want to respond to the trigger
{renderCell({
id: 0,
title: 'Send email to contacts',
src: 'contacts.svg',
})}
{renderCell({
id: 1,
title: 'Send a chat message',
src: 'chat_message.svg',
})}
{renderCell({
id: 2,
title: 'Get notified by email',
src: 'email_notify.svg',
})}
{renderCell({
id: 3,
title: 'Create a task',
src: 'task.svg',
})}
);
};
```
### Gallery selection
- description: Use a thumbnail with `backgroundImage` to construct gallery selections.
- example:
```jsx
() => {
const [selected, setSelected] = React.useState(0);
return (
setSelected(0)}
/>
setSelected(1)}
/>
setSelected(2)}
/>
setSelected(3)}
/>
setSelected(4)}
/>
);
};
```
### Custom content with details
- description: Render custom content inside of a thumbnail to give more details about each option. For example, add graphics, images or links to learn more.
- example:
```jsx
() => {
const [selected, setSelected] = React.useState(0);
const renderThumbnail = ({ title, subtitle, id }) => (
setSelected(id)}>
{title}
{subtitle}
);
return (
{renderThumbnail({
title: 'Public',
subtitle: 'Anyone can view this group',
id: 0,
})}
{renderThumbnail({
title: 'Private',
subtitle: 'Only approved members can view this group',
id: 1,
})}
{renderThumbnail({
title: 'Hidden',
subtitle: 'Group is hidden and requires an invite to join',
id: 2,
})}
);
};
```
### Settings panel
- description: Use illustrations in thumbnails to demonstrate the result of the user's selection.
- example:
```jsx
() => {
const [selectedDirection, setSelectedDirection] = React.useState(0);
const [selectedAlignment, setSelectedAlignment] = React.useState(1);
return (
{}} skin="floating" width="288px">
);
};
```