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

Skeleton

Fullscreen
import { ProductBoxSkeleton } from 'marketing-ui'

function Demo() {
  return (
    <div
      style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(2, 1fr)',
        gap: '1rem',
      }}
    >
      <ProductBoxSkeleton />
      <ProductBoxSkeleton background='white' />
    </div>
  )
}

export default Demo

Props