Person

This kit is broken down into a first name last name format with normal and bold weighted text.

See this kit in action in our sample UI

Default

Use this kit to display users, homeowners, or person of contact.

import React from 'react'

import Person from 'playbook-ui'

const PersonDefault = (props) => {
  return (
    <Person
        firstName="Kyle"
        lastName="Fadigan"
    />
  )
}

export default PersonDefault

Things To Avoid

• Avoid using this kit just for it’s design, it should only be used for displaying people names ONLY.
• Do not change the style and format. Keep the colors true to the original kit.

UI Samples using Person 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