## Feature Examples
### Structure
- description: Component consist of 3 optional content areas:
imagetitledescription
- example:
```jsx
}
title={
Title
}
description={
Description
}
/>
;
```
### Size
- description: Adjust the component size using size prop. It supports 3 sizes:
medium (default) - use in all common cases.small - use in more dense and narrow layouts.tiny - use in more dense and narrow layouts.
- example:
```jsx
;
```
### Dimensions
- description: Set thumbnail dimensions in pixels or percentage with height and width properties.
- example:
```jsx
;
```
### Content alignment
- description: Control vertical alignment of thumbnail content with contentAlignment prop. It supports 2 options:
center (default) - use in all common cases.top - use when thumbnail list contain items with different content lengths.
- example:
```jsx
}
height={240}
contentAlignment="center"
width={165}
/>
}
height={240}
contentAlignment="top"
width={165}
/>
;
```
### Text position
- description: Control thumbnail text position with textPosition prop. Choose between:
inside (default) - use for text only thumbnails or thumbnails that require more emphasis.outside - use for side panel thumbnails or 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 image as a background of a thumbnail with backgroundImage prop.
Use it for gallery type selections, such as product cover image selection.
- example:
```jsx
;
```
### States
- description: Control the state of a component with:
selected - use it to mark active selection.disabled - use it to mark item that cannot be selected or deselected.Remove selected item checkmark icon with 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 statusMessage.
View more inline status message examples in
- example:
```jsx
;
```
### Custom content
- description: Render any component or set of them as a child item to the thumbnail content area.
When passed, a title will be displayed below the thumbnail.
- example:
```jsx
Content
;
```
## Common Use Case Examples
### List of options
- description: Use a thumbnail to list down a larger list of options using icons as visual clues.
- 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 type selections.
- example:
```jsx
() => {
const [selected, setSelected] = React.useState(0);
return (
setSelected(0)}
/>
setSelected(1)}
/>
setSelected(2)}
/>
setSelected(3)}
/>
setSelected(4)}
/>
);
};
```
### Custom content
- description: Render custom content inside of a thumbnail to provide more details about the selection option.
In example, add graphics, images or custom actions such as links to read 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,
})}
|
);
};
```
### In settings panel
- description: Use thumbnails with illustrations to visually clarify the result of the selection the user makes.
- example:
```jsx
() => {
const [selectedDirection, setSelectedDirection] = React.useState(0);
const [selectedAlignment, setSelectedAlignment] = React.useState(1);
return (
{}} skin="floating" width="288px">
);
};
```