Persons

import { Image, Person, Persons } from 'marketing-ui'

function Demo() {
  return (
    <Persons>
      <Person
        variant='vertical'
        image={
          <Image
            data-image-size='person-image'
            src='https://images.pexels.com/photos/614810/pexels-photo-614810.jpeg'
          />
        }
        copy={
          <>
            <p>Car care, Caravan, Bike</p>
            <p>André Preiß</p>
            <p>Sonax GmbH</p>
          </>
        }
        phone='+49 (0)2041-766718'
        email='[email protected]'
      />
      <Person
        variant='vertical'
        image={
          <Image
            data-image-size='person-image'
            src='https://images.pexels.com/photos/614810/pexels-photo-614810.jpeg'
          />
        }
        copy={
          <>
            <p>Car care, Caravan, Bike</p>
            <p>André Preiß</p>
            <p>Sonax GmbH</p>
          </>
        }
        phone='+49 (0)2041-766718'
        email='[email protected]'
      />
      <Person
        variant='vertical'
        copy={
          <>
            <p>Car care, Caravan, Bike</p>
            <p>André Preiß</p>
            <p>Sonax GmbH</p>
          </>
        }
        phone='+49 (0)2041-766718'
        email='[email protected]'
      />
      <Person
        variant='vertical'
        copy={
          <>
            <p>Car care, Caravan, Bike</p>
            <p>André Preiß</p>
            <p>Sonax GmbH</p>
          </>
        }
        phone='+49 (0)2041-766718'
        email='[email protected]'
      />
    </Persons>
  )
}

export default Demo

import { Flex, Image, Person } from 'marketing-ui'

function Demo() {
  return (
    <Flex gap={{ default: 'tiny' }}>
      <Person
        image={
          <Image
            data-image-size='person-image'
            src='https://images.pexels.com/photos/614810/pexels-photo-614810.jpeg'
          />
        }
        copy={
          <>
            <p>Car care, Caravan, Bike</p>
            <p>André Preiß</p>
            <p>Sonax GmbH</p>
          </>
        }
        phone='+49 (0)2041-766718'
        email='[email protected]'
      />
      <Person
        copy={
          <>
            <p>Car care, Caravan, Bike</p>
            <p>André Preiß</p>
            <p>Sonax GmbH</p>
          </>
        }
        phone='+49 (0)2041-766718'
        email='[email protected]'
      />
    </Flex>
  )
}

export default Demo

import { Flex, Image, Person } from 'marketing-ui'

function Demo() {
  return (
    <Flex gap={{ default: 'tiny' }}>
      <Person
        variant='vertical'
        image={
          <Image
            data-image-size='person-image'
            src='https://images.pexels.com/photos/614810/pexels-photo-614810.jpeg'
          />
        }
        copy={
          <>
            <p>Car care, Caravan, Bike</p>
            <p>André Preiß</p>
            <p>Sonax GmbH</p>
          </>
        }
        phone='+49 (0)2041-766718'
        email='[email protected]'
      />
      <Person
        variant='vertical'
        copy={
          <>
            <p>Car care, Caravan, Bike</p>
            <p>André Preiß</p>
            <p>Sonax GmbH</p>
          </>
        }
        phone='+49 (0)2041-766718'
        email='[email protected]'
      />
    </Flex>
  )
}

export default Demo