## Feature Examples

### Dimensions
- description: Specify image dimensions in pixels or percentage with `width` and `height` props.
- example:
```jsx
<Image width="33%" height="180px" />;
```

### Border
- description: To separate images from backgrounds, enable the image border`showBorder`.
- example:
```jsx
<StorybookComponents.Stack width="25%">
  <Image showBorder />
</StorybookComponents.Stack>;
```

### Border radius
- description: Control the rounded corners of the image box with the `borderRadius` prop. Radius levels can be specified for every corner.
- example:
```jsx
<StorybookComponents.Stack>
  <Image />
  <Image borderRadius={'24px'} />
  <Image borderRadius={'36px 0px 0px 36px'} />
</StorybookComponents.Stack>;
```

### States
- description: Use the `src` prop to display a link to a media file. If the `src` prop is added without a link, the default placeholder shows.
- example:
```jsx
<StorybookComponents.Stack>
  <Image />
  <Image src="example.jpg" />
</StorybookComponents.Stack>;
```

### Background fill
- description: To remove the background color for PNG images or vector graphics, use the `transparent` prop.
- example:
```jsx
<StorybookComponents.Stack>
  <Image fit="contain" height="240" src="example.jpg" />
  <Image fit="contain" height="240" src="example.jpg" transparent />
  <Image fit="contain" src="PromotionalPromoteMarketingHomeEmail.svg" />
  <Image
    fit="contain"
    src="PromotionalPromoteMarketingHomeEmail.svg"
    transparent
  />
</StorybookComponents.Stack>;
```

### Fit mode
- description: Control how images are displayed when their dimensions don't match the size of their containers with the `fit` prop. It supports all default [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) values, but there are four that are most commonly used: - `contain` maintains the aspect ratio while fitting images within containers. - `cover` maintains the aspect ratio and clips images to fill containers. - `none` loads the original image size and positions it in the center of the container. - `tile` repeats images when their dimensions are smaller than the containers.
- example:
```jsx
<StorybookComponents.Stack>
  <Image fit="contain" height="300" src="example.jpg" />
  <Image fit="cover" height="300" src="example.jpg" />
  <Image fit="none" height="300" src="example.jpg" />
</StorybookComponents.Stack>;
```

### Position
- description: Control image placement inside of a bounding box with the `position` property. Specify the starting position of the image from where its fit will be defined.
- example:
```jsx
<StorybookComponents.Stack>
  <Image src="example.jpg" fit="none" position="top" />
  <Image src="example.jpg" fit="none" position="center left" />
  <Image src="example.jpg" fit="none" position="bottom right" />
</StorybookComponents.Stack>;
```

## Common Use Case Examples

### Mixed border radius
- description: Use images with mixed corner radius levels in cases when they touch the edges of cards.
- example:
```jsx
() => {
  const renderImage = () => (
    <Image
      src="TravelExample7.jpg"
      borderRadius="15px 0px 0px 15px"
      height="200px"
      width="230px"
    />
  );

  const renderContent = () => (
    <Box
      direction="vertical"
      verticalAlign="space-between"
      padding="24px 29px 27px"
      backgroundColor="D80"
      flexGrow={1}
    >
      <Box direction="vertical">
        <Text weight="bold">Sunset</Text>
        <Text size="tiny" weight="thin" secondary>
          Jul 15, 2021 7:30pm, Cypher City
        </Text>
      </Box>
      <Box align="right" verticalAlign="middle" minWidth={115} gap="12px">
        <IconButton priority="secondary" size="small">
          <Icons.More />
        </IconButton>
        <Button priority="secondary" size="small">
          Edit
        </Button>
      </Box>
    </Box>
  );

  return (
    <Box minHeight={200}>
      {renderImage()}
      {renderContent()}
    </Box>
  );
};
```

### Product list
- description: Use images to display product thumbnails in lists and widgets.
- example:
```jsx
() => {
  const records = [
    {
      name: 'Hoodie',
      sku: 25232564,
      inStock: true,
      price: '$14.00',
      image: <Image src="ProductExample1.jpg" />,
    },
    {
      name: 'Watch',
      sku: 35246432,
      inStock: true,
      price: '$29.00',
      image: <Image src="ProductExample2.jpg" />,
    },
    {
      name: 'Glasses',
      sku: 4864310,
      inStock: false,
      price: '$69.00',
      image: <Image src="ProductExample3.jpg" />,
    },
    {
      name: 'Leather shoes',
      sku: 125156422,
      inStock: true,
      price: '$7.00',
      image: <Image src="ProductExample4.jpg" />,
    },
  ];

  const Status = ({ isInStock }) => (
    <Text size="small" secondary>
      {isInStock ? 'In Stock' : 'Out Of Stock'}
    </Text>
  );

  const secondaryAction = [
    {
      icon: <Icons.Duplicate />,
      text: 'Duplicate',
      onClick: () => {},
    },
    {
      icon: <Icons.Delete />,
      text: 'Delete',
      onClick: () => {},
    },
  ];

  const columns = [
    {
      title: '',
      render: (row) => row.image,
      width: '60px',
    },
    {
      title: 'Name',
      render: (row) => row.name,
      width: '30%',
    },
    {
      title: 'SKU',
      render: (row) => row.sku,
      width: '20%',
    },
    {
      title: 'Stock',
      render: (row) => <Status isInStock={row.inStock} />,
      width: '20%',
    },
    {
      title: 'Price',
      render: (row) => row.price,
      width: '10%',
    },
    {
      title: '',
      render: (row) => <TableActionCell secondaryActions={secondaryAction} />,
      width: '10%',
    },
  ];

  return (
    <Card>
      <Table data={records} columns={columns}>
        <TableToolbar>
          <TableToolbar.ItemGroup position="start">
            <TableToolbar.Item>
              <TableToolbar.Title>Products</TableToolbar.Title>
            </TableToolbar.Item>
          </TableToolbar.ItemGroup>
        </TableToolbar>
        <Table.Content />
      </Table>
    </Card>
  );
};
```

## Accessibility Examples

### Alt text
- description: By default, all images have empty `alt` text. - For decorative images, leave alt text empty. - For informative images that need to be described to screen readers, add alt text which describes the image in context. - For images that have links, the alt text should also tell the screen reader where the link goes. Use this [_alt decision tree_](https://www.w3.org/WAI/tutorials/images/decision-tree/) to determine whether an image needs alt text.
- example:
```jsx
<Image width="33%" src="example.jpg" alt="" />;
```