wix-style-react/src/Image/docs/Image.content.js

wix-style-react

export default {
  description:
    'Image allows users to create a space to display images and other graphics.',
  do: [
    'Use it to display static images such as product thumbnails or event covers.',
  ],
  dont: [
    'Don’t use it to display a user photo. Use <Avatar/> instead.',
    'Don’t use it to display images that can be uploaded, updated or removed. Use a built-in <ImageViewer/> solution instead.',
  ],
  featureExamples: [
    {
      title: 'Dimensions',
      description:
        'Specify image dimensions in pixels or percentage with `width` and `height` props.',
      example: '_dimensions',
    },
    {
      title: 'Border',
      description:
        'Enable image border with `showBorder` prop to separate image from the background when it blends too much.',
      example: '_border',
    },
    {
      title: 'Border radius',
      description:
        'Control the rounded corners of the image box with `borderRadius` prop. Radius level can be specified for every corner.',
      example: '_borderRadius',
    },
    {
      title: 'States',
      description: `Supports 2 states:<br/>
        &emsp;- no image source - use it to display a default placeholder graphic to indicate that there’s no uploaded or linked media at the moment.<br/>
        &emsp;- with \`src\` link - use it to pass a link to a media file.<br/>`,
      example: '_states',
    },
    {
      title: 'Background Fill',
      description: `Control background fill with \`transparent\` prop. Enable it to remove background colour for PNG images or vector graphics.`,
      example: '_backgroundFill',
    },
    {
      title: 'Fit mode',
      description: `Control how the image is displayed when its dimensions do not match container size with \`fit\` prop.
        It supports all default <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit">object-fit</a>object-fit values, but most commonly used are the following ones:<br/>
        &emsp;- \`contain\` - maintains aspect ratio while fitting image within element content box.<br/>
        &emsp;- \`cover\` - maintains aspect ratio and clips image to fill the content box.<br/>
        &emsp;- \`none\` - loads the original image size and positions it in the center of the content box.<br/>
        &emsp;- \`tile\` - repeats the image when its dimensions are smaller than content box size.<br/>`,
      example: '_fitMode',
    },
    {
      title: 'Position',
      description: `Control image placement inside of a bounding box with \`position\` prop. 
        A specified position will be used as a starting point from where an image will be laid down following defined fit mode.`,
      example: '_position',
    },
  ],
  commonUseCaseExamples: [
    {
      title: 'Mixed border radius',
      description:
        'Use the image with a mixed corner radius level in cases when it touches the edges of a card it is wrapped into.',
      example: '_mixedBorderRadius',
    },
    {
      title: 'Product list',
      description:
        'Use \\<Image/> to display product thumbnails in lists and widgets.',
      example: '_productList',
    },
  ],
};