ProductGrid

Demos

Default

Fullscreen
import {
  Icon,
  Image,
  PlainButton,
  ProductBox,
  ProductGrid,
  ProductGridItem,
} from 'marketing-ui'
import { IconArrowsRepeat, IconGroup1, IconHeart, IconMedal } from 'icons'

function Demo() {
  return (
    <ProductGrid
      heading='All Products'
      count='192 Products'
      pagination={
        <PlainButton
          iconStart={<Icon i={IconArrowsRepeat} />}
          label='Load more'
        />
      }
    >
      {new Array(6).fill(1).map(() => {
        return (
          <ProductGridItem>
            <ProductBox
              brand='SONAX'
              series='XTREME'
              name='XTREME Ceramic ScheibenKlar 2 in 1'
              packshot={
                <Image
                  data-image-size='product-box-packshot'
                  src='https://res.cloudinary.com/dznnkcrlw/image/upload/v1760695340/not16bfakvwp6fwt6n9t.png'
                />
              }
              price='24,99 €'
              actions={
                <>
                  <PlainButton
                    aria-label='Add to favorites'
                    variant='white'
                    iconStart={<Icon i={IconHeart} />}
                  />
                  <PlainButton
                    aria-label='Group'
                    variant='invert'
                    iconStart={<Icon i={IconGroup1} />}
                  />
                  <PlainButton
                    aria-label='Medal'
                    variant='invert'
                    iconStart={<Icon i={IconMedal} />}
                  />
                </>
              }
            />
          </ProductGridItem>
        )
      })}
    </ProductGrid>
  )
}

export default Demo

Props