Person Contact

This kit can be used to display a person contact information. It includes multiples kits like: Person, contact and caption kit. Use this kit for both Nitro users and Homeowners.

See this kit in action in our sample UI

Default

import React from 'react'

import PersonContact from 'playbook-ui'

const PersonContactDefault = (props) => {
  return (
    <div>
      <PersonContact
          contacts={[
          {
            contactType: 'email',
            contactValue: 'email@example.com',
          },
          {
            contactValue: '5555555555',
          },
          {
            contactType: 'work',
            contactValue: '3245627482',
          },
        ]}
          firstName="Pauline"
          lastName="Smith"
      />
    </div>
  )
}

export default PersonContactDefault

Multiple People

import React from 'react'

import PersonContact from 'playbook-ui'

const PersonContactMultiple = (props) => {
  return (
    <div>
      <PersonContact
          contacts={[
          {
            contactType: 'email',
            contactValue: 'email@example.com',
          },
          {
            contactValue: '5555555555',
          },
          {
            contactType: 'work',
            contactValue: '3245627482',
          },
        ]}
          firstName="Harvey"
          lastName="Walters"
      />
      <PersonContact
          contacts={[
          {
            contactValue: '5555555555',
          },
        ]}
          firstName="Brenda"
          lastName="Walters"
      />
    </div>
  )
}

export default PersonContactMultiple

With Detail

import React from 'react'

import PersonContact from 'playbook-ui'

const PersonContactWithDetail = (props) => {
  return (
    <div>
      <PersonContact
          contacts={[
          {
            contactType: 'email',
            contactValue: 'email@example.com',
          },
          {
            contactValue: '5555555555',
            contactDetail: 'Home',
          },
          {
            contactType: 'work',
            contactValue: '3245627482',
            contactDetail: 'Work',
          },
        ]}
          firstName="Harvey"
          lastName="Walters"
      />
    </div>
  )
}

export default PersonContactWithDetail

With Wrong Numbers

import React from 'react'

import PersonContact from 'playbook-ui'

const PersonContactWithWrongNumbers = (props) => {
  return (
    <>
      <PersonContact
          contacts={[
            {
              contactType: 'email',
              contactValue: 'email@example.com',
            },
            {
              contactValue: '5555555555',
            },
            {
              contactType: 'wrong-phone',
              contactValue: '3245627482',
            },
            {
              contactType: 'phone',
              contactValue: '3048615385',
            },
          ]}
          firstName="Pauline"
          key="person-contact-1"
          lastName="Smith"
      />
    </>
  )
}

export default PersonContactWithWrongNumbers

Thing To Avoid

• Don’t unstack the contacts: email & phone.
• Keep the fonts exact in size and weight, don’t change the color variations.

UI Samples using Person Contact Kit

Get the full picture. See how this kit is used in our samples.

Crm Client List

Available Props

Contribute to Playbook

When you start designing a new feature, you may come across a Design Token or Component that isn’t defined in Playbook. If so, you should open an issue or reach out to the team to make a contribution.

Contribute on GitHub

As the highest-rated residential remodeler in the nation, our international technology team builds a custom suite of products that continuously transform our business.

Power

Tech @ Power

Open Positions

About Power

Connect

Dribbble

Github

Connect Chat