User

This kit was created for having a systematic way of displaying users with avatar, titles, name and territory. This is a versatile kit with features than can be added to display more info.

See this kit in action in our sample UI

Default

import React from 'react'

import { User } from 'playbook-ui'

const UserDefault = (props) => {
  return (
    <div className="pb--doc-demo-row">

      <div>
        <User
            align="center"
            avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
            name="Anna Black"
            orientation="vertical"
            size="lg"
            title="Remodeling Consultant"
        />
      </div>

      <div>
        <User
            align="left"
            avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
            name="Anna Black"
            orientation="horizontal"
            title="Remodeling Consultant"
        />
      </div>

      <div>
        <User
            align="left"
            avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
            name="Anna Black"
            orientation="horizontal"
        />

        <br />

        <User
            align="left"
            avatar
            name="Anna Black"
            orientation="horizontal"
        />
      </div>

    </div>
  )
}

export default UserDefault

Light Weight

Prop

Name will use font-weight: 700 by default, if you want a lighter font weight, use the bold prop set to false. Name will then use font-weight: 300.

import React from 'react'

import { User } from 'playbook-ui'

const UserLightWeight = (props) => {
  return (
    <div className="pb--doc-demo-row">

      <div>
        <User
            align="center"
            avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
            bold={false}
            name="Anna Black"
            orientation="vertical"
            size="lg"
            title="Remodeling Consultant"
        />
      </div>

      <div>
        <User
            align="left"
            avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
            bold={false}
            name="Anna Black"
            orientation="horizontal"
            title="Remodeling Consultant"
        />
      </div>

      <div>
        <User
            align="left"
            avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
            bold={false}
            name="Anna Black"
            orientation="horizontal"
        />

        <br />

        <User
            align="left"
            avatar
            bold={false}
            name="Anna Black"
            orientation="horizontal"
        />
      </div>

    </div>
  )
}

export default UserLightWeight

With Territory

import React from 'react'

import { User } from 'playbook-ui'

const UserWithTerritory = (props) => {
  return (
    <div className="pb--doc-demo-row">

      <div>
        <User
            align="center"
            avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
            name="Anna Black"
            orientation="vertical"
            size="lg"
            territory="PHL"
            title="Remodeling Consultant"
        />
      </div>

      <div>
        <User
            align="left"
            avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
            name="Anna Black"
            orientation="horizontal"
            territory="PHL"
            title="Remodeling Consultant"
        />
      </div>

      <div>
        <User
            align="center"
            name="Anna Black"
            orientation="horizontal"
            size="sm"
            territory="PHL"
            title="Remodeling Consultant"
        />

        <br />

        <User
            align="left"
            name="Anna Black"
            orientation="horizontal"
            size="lg"
            territory="PHL"
            title="Remodeling Consultant"
        />
      </div>

    </div>
  )
}

export default UserWithTerritory

Text Only

import React from 'react'

import { User } from 'playbook-ui'

const UserTextOnly = (props) => {
  return (
    <div className="pb--doc-demo-row">
      <User
          align="center"
          name="Anna Black"
          orientation="horizontal"
          size="lg"
          title="Remodeling Consultant"
      />
      <User
          align="left"
          name="Anna Black"
          orientation="horizontal"
          title="Remodeling Consultant"
      />
    </div>
  )
}

export default UserTextOnly

Horizontal Size

import React from 'react'

import { User } from 'playbook-ui'

const UserDefault = (props) => {
  return (
    <div className="pb--doc-demo-row">
      <User
          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
          name="Anna Black"
          size="sm"
          title="Remodeling Consultant"
      />

      <User
          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
          name="Anna Black"
          size="md"
          title="Remodeling Consultant"
      />

      <User
          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
          name="Anna Black"
          size="lg"
          title="Remodeling Consultant"
      />
    </div>
  )
}

export default UserDefault

Vertical Size

import React from 'react'

import { User } from 'playbook-ui'

const UserVerticalSize = (props) => {
  return (
    <div>
      <User
          align="center"
          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
          name="Anna Black"
          orientation="vertical"
          size="sm"
          title="Remodeling Consultant"
      />
      <br />
      <br />
      <User
          align="center"
          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
          name="Anna Black"
          orientation="vertical"
          size="md"
          title="Remodeling Consultant"
      />
      <br />
      <br />
      <User
          align="center"
          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
          name="Anna Black"
          orientation="vertical"
          size="lg"
          title="Remodeling Consultant"
      />
    </div>
  )
}

export default UserVerticalSize

Subtitle

import React from "react"

import { User } from 'playbook-ui'

const UserSubtitle = (props) => {
  return (
    <div className="pb--doc-demo-row">
      <User
          align="center"
          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
          name="Anna Black"
          orientation="vertical"
          size="lg"
          subtitle="User ID: 12345"
          territory="PHL"
          title="Remodeling Consultant"
      />

      <User
          align="left"
          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
          name="Anna Black"
          orientation="horizontal"
          subtitle="User ID: 12345"
          territory="PHL"
          title="Remodeling Consultant"
      />
    </div>
  )
}

export default UserSubtitle

Block Content Subtitle

The subtitle prop accepts strings as well as nodes. Whatever node is passed will display in the subtitle section.

import React from "react"

import { Caption, Contact, Flex, Icon, User } from 'playbook-ui'

const MentorSubtitle = (
  <Flex>
    <Icon icon="users" />
    <Caption
        paddingLeft="xs"
        text="Admin"
    />
  </Flex>
)

const ContactSubtitle = (
  <>
    <Contact
        contactType="cell"
        contactValue="349-185-9988"
    />
    <Contact
        contactValue="5555555555"
    />
    <Contact
        contactType="email"
        contactValue="email@example.com"
    />
  </>
)

const UserBlockContentSubtitleReact = (props) => {
  return (
    <div className="pb--doc-demo-row">
      <User
          align="left"
          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
          name="Anna Black"
          orientation="horizontal"
          subtitle={MentorSubtitle}
          territory="PHL"
          title="Remodeling Consultant"
      />

      <User
          align="left"
          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
          name="Anna Black"
          orientation="horizontal"
          subtitle={ContactSubtitle}
      />
    </div>
  )
}

export default UserBlockContentSubtitleReact

Font Options

Passing a nameStyle prop changes the type kit used for the user name. You can choose between title, body, caption, and detail. title is the default.

Passing a titleStyle prop changes the type kit used for the user title. You can choose between body, caption, and detail. body is the default.

The size of the caption is determined by the size prop.

import React from 'react'

import { User } from 'playbook-ui'

const UserFontOptions = (props) => {
  return (
    <div>
      <div className="pb--doc-demo-row">
        <div>
          <User
              align="center"
              avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
              name="Anna Black"
              nameStyle= "body"
              orientation="horizontal"
              size= "md"
              territory= "PHL"
              title="Remodeling Consultant"
          />
        </div>

        <div>
          <User
              align="left"
              avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
              name="Anna Black"
              nameStyle= "detail"
              orientation="horizontal"
              size= "md"
              territory= "PHL"
              title= "Remodeling Consultant"
          />
        </div>
      </div>
    </div>
  )
}

export default UserFontOptions

UI Samples using User Kit

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

Analytics Dashboard

Crm Client List

Music App

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