ProductDetail

Demos

ProductDetail composes the packshot (ProductDetailPackshot), variant facets (ProductDetailDimensionGroup), and detail sections (ProductDetailContentItem) into a full product detail layout.

Default

Fullscreen
import {
  Badge,
  Facette,
  ProductDetail,
  ProductDetailContentItem,
  ProductDetailDimensionGroup,
  ProductDetailPackshot,
} from 'marketing-ui'

function Demo() {
  const packshotUrl =
    'https://images.pexels.com/photos/3802510/pexels-photo-3802510.jpeg?auto=compress&cs=tinysrgb&w=600'

  return (
    <ProductDetail
      name='XTREME Ceramic Spray Coating'
      readMoreLabel='Show more'
      readLessLabel='Show less'
      description={
        <p>
          Long-lasting ceramic protection with an extreme gloss finish and
          strong beading effect for all glossy exterior surfaces.
        </p>
      }
      packshot={
        <ProductDetailPackshot
          zoomSrc={packshotUrl}
          badge={<Badge variant='brand' label='New' labelSize='big' />}
        >
          <img
            src={packshotUrl}
            alt='XTREME Ceramic Spray Coating'
            style={{ maxWidth: '100%', height: 'auto' }}
          />
        </ProductDetailPackshot>
      }
      content={
        <ProductDetailContentItem>
          <ProductDetailDimensionGroup name='Size'>
            <Facette href='#' label='250 ml' active aria-label='250 ml' />
            <Facette href='#' label='750 ml' aria-label='750 ml' />
            <Facette href='#' label='5 L' disabled aria-label='5 litres' />
          </ProductDetailDimensionGroup>
        </ProductDetailContentItem>
      }
    />
  )
}

export default Demo

Props