Image Box

Allow to set an image, with a discount badge and a count badge

How to use it

import { ImageBox } from '@engyalo/storefront-components'



export interface Props extends HTMLAttributes<BoxProps> {
  discount?: number
  quantity?: number
  imageUrl: string
  size?: string
  hideQuantity?: boolean
  hideDiscount?: boolean
  imageProps?: ImageProps

Props Considerations

  • size prop, has only one option Big, and is used to add an extra padding so big images are shown correctly
  • discount prop, will show the text sent in a badge at the upper left side of the image
  • quantity prop, will show the text sent in a badge at the upper right side of the image


Image size consideration

  • The image will fill out its parent so to control its size, you may use a Box component to set an specific width and the image will fill that width.

Lazy loading

  • The image is loaded by a lazy loading component to load only the needed images on screen, to avoid loading up lots of images on a list, for example the catalog.

Visual Example

Did this page help you?