Skip to main content

Image

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

Examples​

image-test
<Image src={marketingBannerImage} alt="image-test" />
image-test
 <Image src={marketingBannerImage} appearance="square" alt="img-test" />
image-test
 <Image src={marketingBannerImage} appearance="square" alt="img-test" />
image-test
 <Image src={marketingBannerImage} appearance="banner" /> (square on mobile, unset on desktop)
 <Image src="" alt="img-test"  /> or <Image brokenImage /> 
 <Image src="" appearance="logo" alt="img-test"  />

Basic Usage​

import Image from '@candy/kitkat/image'

export const MyComponent = () => <Image src="" alt="title" />

Props​

  • appearance
    • unset (default)
    • banner
    • square ("cards, square images")
  • brokenImage
  • css
  • maxWidth
  • src
  • title ( required) used as alt