
## Feature Examples


### Structure
- description: <p>Thumbnails have 3 optional content areas:</p><li><code>image</code></li><li><code>title</code></li><li><code>description</code></li>
- example: 
```jsx 
<StorybookComponents.Stack>
  <Thumbnail
    image={<Image />}
    title={
      <StorybookComponents.Placeholder>Title</StorybookComponents.Placeholder>
    }
    description={
      <StorybookComponents.Placeholder>
        Description
      </StorybookComponents.Placeholder>
    }
  />
</StorybookComponents.Stack>;
```

### Size
- description: <p>Adjust the component size using <code>size</code> prop. It supports 3 sizes:</p><li><code>medium</code> (default)  is the standard used in common cases.</li><li><code>small</code>  is used for smaller elements and more compact designs.</li><li><code>tiny</code> is best for dense layouts.</li>
- example: 
```jsx 
<StorybookComponents.Stack flexDirection="column">
  <Thumbnail size="medium" title="Medium" description="Size" />
  <Thumbnail size="small" title="Small" description="Size" />
  <Thumbnail size="tiny" title="Tiny" description="Size" />
</StorybookComponents.Stack>;
```

### Skin
- description: <p>Change the thumbnail appearance using the <code>skin</code> prop. Two skin options are currently available. Use the <code>secondary</code> skin in panels that include thumbnails, such as environments like the Wix Harmony Editor.</p>
- example: 
```jsx 
<StorybookComponents.Stack>
  <Thumbnail
    title="Skin"
    description="Default"
    image={<Image />}
    contentAlignment="top"
    width={165}
    height={200}
  />
  <Thumbnail
    title="Skin"
    skin="secondary"
    description="Secondary"
    image={<Image />}
    contentAlignment="top"
    width={165}
    height={200}
  />
</StorybookComponents.Stack>;
```

### Dimensions
- description: <p>Set the dimensions of a thumbnail in pixels or percentages with the <code>height</code> and <code>width</code> properties.</p>
- example: 
```jsx 
<StorybookComponents.Stack flexDirection="column">
  <Thumbnail title="Title" width="50%" height="120px" />
  <Thumbnail title="Title" width="25%" height="60px" />
</StorybookComponents.Stack>;
```

### Content alignment
- description: <p>Control the vertical alignment of thumbnail content with the <code>contentAlignment</code> prop. It supports 2 options:</p><li><code>center</code> (default) is the standard used for common cases. </li><li><code>top</code> is used when the thumbnail list contains items with different content lengths. </li>
- example: 
```jsx 
<StorybookComponents.Stack>
  <Thumbnail
    title="Center"
    description="Alignment"
    image={<Image width="90px" />}
    height={240}
    contentAlignment="center"
    width={165}
  />
  <Thumbnail
    title="Top"
    description="Alignment"
    image={<Image width="90px" />}
    height={240}
    contentAlignment="top"
    width={165}
  />
</StorybookComponents.Stack>;
```

### Text position
- description: <p>Control the thumbnail text position with the <code>textPosition</code> prop. </p><li><code>inside</code> (default) is used for text-only thumbnails or thumbnails that require more emphasis.</li><li><code>outside</code> is used for side panel thumbnails or for a large group of illustrated thumbnails.</li>
- example: 
```jsx 
<StorybookComponents.Stack>
  <Thumbnail
    title="Inside"
    description="Description"
    image={<Image />}
    contentAlignment="top"
    width={165}
    height={200}
  />
    <Thumbnail
    title="Outside"
    description="Alignment"
    image={<Image height="100%"/>}
    contentAlignment="top"
    textPosition="outside"
    width={165}
    height={200}
  />
</StorybookComponents.Stack>;
```

### Background image
- description: <p>Render an image as a thumbnail background with the <code>backgroundImage</code> prop.</p><p></p><p>This works well for gallery selections, such as product cover images.</p>
- example: 
```jsx 
<Thumbnail
  backgroundImage="example.jpg"
  width={240}
  height={240}
  title="Title"
/>;
```

### States
- description: <p>Control the state of a component with:</p><li><code>selected</code> to mark active selection.</li><li><code>disabled</code> to mark an item that cannot be selected or deselected.</li><p></p><p>Remove the selected item checkmark icon with the <code>hideSelectedIcon</code> prop.</p>
- example: 
```jsx 
<StorybookComponents.Stack gap="12px">
  <Thumbnail title="Default" width={140} />
  <Thumbnail title="Selected" selected width={140} />
  <Thumbnail title="Disabled" disabled width={140} />
  <Thumbnail
    title="Disabled with image"
    disabled
    image={<Image />}
    width={140}
  />
  <Thumbnail
    title="Disabled with image background"
    disabled
    backgroundImage="example.jpg"
    height={120}
    width={140}
  />
</StorybookComponents.Stack>;
```

### Status message
- description: <p>Add text that explains the status or what action the user should take with the <code>statusMessage</code> prop.</p><p></p><p>Show the status message inline, directly below the thumbnails, by wrapping it in a <code><FormField/></code> and adding <code>statusMessage</code>.</p><p></p><p>View more inline status message examples in <code><FormField/></code>.</p>
- example: 
```jsx 
<FormField status="error" statusMessage="This is an error message.">
  <StorybookComponents.Stack gap="12px">
    <Thumbnail title="Option 1" width={140} />
    <Thumbnail title="Option 2" width={140} />
    <Thumbnail title="Option 3" width={140} />
  </StorybookComponents.Stack>
</FormField>;
```

### Custom content
- description: <p>Place any image, component or set of components inside the thumbnail content area.</p><p></p>
- example: 
```jsx 
<Thumbnail title="Title" width="50%">
  <StorybookComponents.Stack padding="24px">
    <StorybookComponents.Placeholder>Content</StorybookComponents.Placeholder>
  </StorybookComponents.Stack>
</Thumbnail>;
```




    


## Common Use Case Examples


### List of options
- description: <p>Use a thumbnail to create a list of options with icons as visual cues.</p>
- example: 
```jsx 

() => {
  const [selected, setSelected] = React.useState(0);

  const renderCell = ({ id, title, src }) => (
    <Cell span={2}>
      <Thumbnail
        size="small"
        title={<Text>{title}</Text>}
        selected={selected === id}
        onClick={() => setSelected(id)}
      >
        <Proportion>
          <Box height="100%" width="100%" align="center" verticalAlign="middle">
            <Image src={src} height="24px" width="24px" transparent />
          </Box>
        </Proportion>
      </Thumbnail>
    </Cell>
  );

  return (
    <Card>
      <Card.Header title="Add label to contact" />
      <Divider />
      <Card.Content>
        <Layout>
          <Cell span={12}>
            <Text>Decide how you want to respond to the trigger</Text>
          </Cell>
          {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',
          })}
        </Layout>
      </Card.Content>
    </Card>
  );
};

```

### Gallery selection
- description: <p>Use a thumbnail with <code>backgroundImage</code> to construct gallery selections.</p>
- example: 
```jsx 
() => {
  const [selected, setSelected] = React.useState(0);

  return (
    <Layout cols={1}>
      <FormField label="Cover Image">
        <Box gap="12px">
          <Thumbnail
            backgroundImage="TravelExample1.jpg"
            width={64}
            height={64}
            selected={selected === 0}
            onClick={() => setSelected(0)}
          />
          <Thumbnail
            backgroundImage="TravelExample2.jpg"
            width={64}
            height={64}
            selected
            selected={selected === 1}
            onClick={() => setSelected(1)}
          />
          <Thumbnail
            backgroundImage="TravelExample3.jpg"
            width={64}
            height={64}
            selected={selected === 2}
            onClick={() => setSelected(2)}
          />
          <Thumbnail
            backgroundImage="TravelExample4.jpg"
            width={64}
            height={64}
            selected={selected === 3}
            onClick={() => setSelected(3)}
          />
          <Thumbnail
            backgroundImage="TravelExample5.jpg"
            width={64}
            height={64}
            selected={selected === 4}
            onClick={() => setSelected(4)}
          />
        </Box>
      </FormField>
    </Layout>
  );
};
```

### Custom content
- description: <p>Render custom content inside of a thumbnail to give more details about each option.</p><p></p><p>For example, add graphics, images or links to learn more. </p>
- example: 
```jsx 

() => {
  const [selected, setSelected] = React.useState(0);

  const renderThumbnail = ({ title, subtitle, id }) => (
    <Thumbnail selected={selected === id} onClick={() => setSelected(id)}>
      <Box padding="18px">
        <Box gap="12px" verticalAlign="middle">
          <Icons.Public />
          <Box direction="vertical">
            <Text size="medium" weight="bold">
              {title}
            </Text>
            <Box>
              <Text size="small" secondary>
                {subtitle}
              </Text>
            </Box>
          </Box>
        </Box>
      </Box>
    </Thumbnail>
  );

  return (
    <Card>
      <Card.Header title="Group info" />
      <Card.Divider />
      <Card.Content>
        <Layout cols={12}>
          <Cell span={8}>
            <Layout cols={1}>
              <FormField label="Name">
                <Input placeholder="Enter group name" />
              </FormField>
              <FormField
                label="Privacy"
                infoContent="Choose who can see and join this group"
              >
                <Layout cols={1} gap="12px">
                  {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,
                  })}
                </Layout>
              </FormField>
            </Layout>
          </Cell>
        </Layout>
      </Card.Content>
    </Card>
  );
};

```

### Settings panel
- description: <p>Use illustrations in thumbnails to demonstrate the result of the user’s selection. </p>
- example: 
```jsx 
() => {
  const [selectedDirection, setSelectedDirection] = React.useState(0);
  const [selectedAlignment, setSelectedAlignment] = React.useState(1);

  return (
    <SidePanel onCloseButtonClick={() => {}} skin="floating" width="288px">
      <SidePanel.Header title="Text Input Layout" />
      <SidePanel.Content noPadding>
        <SidePanel.Field>
          <FieldSet
            legend="Direction"
            direction="horizontal"
            columns="auto auto"
          >
            <Thumbnail
              size="tiny"
              selected={selectedDirection === 0}
              onClick={() => setSelectedDirection(0)}
              hideSelectedIcon
              height={54}
              noPadding
              image={
                <Image
                  src="ThumbnailIllustration_LTR.svg"
                  transparent
                  fit="none"
                />
              }
              noPadding
              title="Left to right"
              textPosition="outside"
            />
            <Thumbnail
              size="tiny"
              selected={selectedDirection === 1}
              onClick={() => setSelectedDirection(1)}
              hideSelectedIcon
              height={54}
              noPadding
              image={
                <Image
                  src="ThumbnailIllustration_RTL.svg"
                  transparent
                  fit="none"
                />
              }
              noPadding
              title="Right to left"
              textPosition="outside"
            />
          </FieldSet>
        </SidePanel.Field>
        <SidePanel.Field>
          <FieldSet
            legend="Alignment"
            direction="horizontal"
            columns="38px 38px 38px"
          >
            <Thumbnail
              size="tiny"
              selected={selectedAlignment === 0}
              onClick={() => setSelectedAlignment(0)}
              hideSelectedIcon
              height={38}
              noPadding
              image={
                <Image
                  src="ThumbnailIllustration_AlignLeft.svg"
                  transparent
                  fit="none"
                />
              }
              noPadding
              textPosition="outside"
            />
            <Thumbnail
              size="tiny"
              selected={selectedAlignment === 1}
              onClick={() => setSelectedAlignment(1)}
              hideSelectedIcon
              height={38}
              noPadding
              image={
                <Image
                  src="ThumbnailIllustration_AlignCenter.svg"
                  transparent
                  fit="none"
                />
              }
              noPadding
              textPosition="outside"
            />
            <Thumbnail
              size="tiny"
              selected={selectedAlignment === 2}
              onClick={() => setSelectedAlignment(2)}
              hideSelectedIcon
              height={38}
              noPadding
              image={
                <Image
                  src="ThumbnailIllustration_AlignRight.svg"
                  transparent
                  fit="none"
                />
              }
              noPadding
              textPosition="outside"
            />
          </FieldSet>
        </SidePanel.Field>
      </SidePanel.Content>
    </SidePanel>
  );
};
```


