Skip to main content

Multi Image

This is the <MultiImage /> component. Use the appearance to change the variants

Examples​

https://picsum.photos/id/237/200https://picsum.photos/id/238/200https://picsum.photos/id/239/200https://picsum.photos/id/240/200
<MultiImage
    dataTestId="multi-image-docusaurus"
    srcs={[
      'https://picsum.photos/id/237/200',
      'https://picsum.photos/id/238/200',
      'https://picsum.photos/id/239/200',
      'https://picsum.photos/id/240/200',
    ]}
 />
https://picsum.photos/id/237/200https://picsum.photos/id/238/200https://picsum.photos/id/239/200https://picsum.photos/id/240/200
<MultiImage
    dataTestId="multi-image-docusaurus"
    gap="10px"
    srcs={[
      'https://picsum.photos/id/237/200',
      'https://picsum.photos/id/238/200',
      'https://picsum.photos/id/239/200',
      'https://picsum.photos/id/240/200',
    ]}
 />

Basic Usage​

import { MultiImage } from '@candy/kitkat/image'

export const MyComponent = () => (
  <MultiImage
    dataTestId="multi-image-docusaurus"
    gap="10px"
    srcs={[
      'https://picsum.photos/id/237/200',
      'https://picsum.photos/id/238/200',
      'https://picsum.photos/id/239/200',
      'https://picsum.photos/id/240/200',
    ]}
  />
)

Props​

NameTypeDefaultDescription
dataTestId?string--The id for the data-testid attribute
filter?ImageFilters--The filter treatment applied to the MultiImage Component
gap?string--The gap between the images in the MultiImage Component
srcs?string[]--An array of urls that the MultiImage Component will display