ProductBox

Demos

Default

Fullscreen
import { Badge, Icon, Image, PlainButton, ProductBox } from 'marketing-ui'
import { IconHeart } from 'icons'

function Demo() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
      <ProductBox
        badge={<Badge variant='brand' label='Neu' />}
        background='white'
        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'
            iconStart={<Icon i={IconHeart} />}
          />
        }
      />
      <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} />}
          />
        }
      />
    </div>
  )
}

export default Demo

Props