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.

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.

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