User

Avatar

Default

import React from 'react'

import { Avatar } from 'playbook-ui'

const AvatarDefault = (props) => {
  return (
    <div>
      <Avatar
          imageAlt="Terry Johnson Standing"
          imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
          name="Terry Johnson"
          size="xxs"
          status="online"
      />
      <br />
      <Avatar
          imageAlt="Terry Johnson Standing"
          imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
          name="Terry Johnson"
          size="xs"
          status="online"
      />
      <br />
      <Avatar
          imageAlt="Terry Johnson Standing"
          imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
          name="Terry Johnson"
          size="sm"
          status="online"
      />
      <br />
      <Avatar
          imageAlt="Terry Johnson Standing"
          imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
          name="Terry Johnson"
          size="md"
          status="away"
      />
      <br />
      <Avatar
          imageAlt="Terry Johnson Standing"
          imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
          name="Terry Johnson"
          size="lg"
          status="offline"
      />
      <br />
      <Avatar
          imageAlt="Terry Johnson Standing"
          imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
          name="Terry Johnson"
          size="xl"
          status="offline"
      />
    </div>
  )
}

export default AvatarDefault

Monogram

This is used when there is no avatar for a particular user.

import React from 'react'

import { Avatar } from 'playbook-ui'

const AvatarDefault = (props) => {
  return (
    <div>
      <Avatar
          name="Terry Johnson"
          size="xxs"
      />
      <Avatar
          name="Terry Johnson"
          size="xs"
      />
      <Avatar
          name="Terry Johnson"
          size="sm"
      />
      <Avatar
          name="Terry Johnson"
          size="md"
      />
      <Avatar
          name="Terry Johnson"
          size="lg"
      />
      <Avatar
          name="Terry Johnson"
          size="xl"
      />
    </div>
  )
}

export default AvatarDefault

Bad Image Link

A monagram is used as a fallback when an invalid or missing image url is provided.

import React from 'react'

import { Avatar } from 'playbook-ui'

const AvatarNoImage = (props) => {
  return (
    <div>
      <Avatar
          imageUrl="Just some text here"
          name="Terry Johnson"
          size="xxs"
      />
      <Avatar
          imageUrl="Just some text here"
          name="Terry Johnson"
          size="xs"
      />
      <Avatar
          imageUrl={4}
          name="Terry Johnson"
          size="sm"
      />
      <Avatar
          imageUrl="https://google.com"
          name="Terry Johnson"
          size="md"
      />
      <Avatar
          imageUrl=""
          name="Terry Johnson"
          size="lg"
      />
      <Avatar
          imageUrl="https://randomuser.me/api/portraits/men/notapicture.jpg"
          name="Terry Johnson"
          size="xl"
      />
    </div>
  )
}

export default AvatarNoImage

Status

The Status prop is used to display a user's online status like popular chat apps.

import React from 'react'

import { Avatar } from 'playbook-ui'

const AvatarStatus = (props) => {
  return (
    <>
      <Avatar
          imageAlt="Terry Johnson Status"
          imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
          name="Terry Johnson"
          size="sm"
      />

      <br />

      <Avatar
          imageAlt="Terry Johnson Online"
          imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
          name="Terry Johnson"
          size="sm"
          status="online"
      />

      <br />

      <Avatar
          imageAlt="Terry Johnson Away"
          imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
          name="Terry Johnson"
          size="sm"
          status="away"
      />

      <br />

      <Avatar
          imageAlt="Terry Johnson Offline"
          imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
          name="Terry Johnson"
          size="sm"
          status="offline"
      />

      <br />
    </>
  )
}

export default AvatarStatus

Icon Circle Component Overlay

NOTE: All componentOverlay implementations require a placement prop, that accepts any of the following values: top-right, top-left, bottom-right, bottom-left, top-center, bottom-center, left-center, and right-center.

When passing the iconCircle component as an overlay, you must also specify an icon, and you may optionally control the color by passing an approved value as a variant.

import React from "react";

import { Avatar } from 'playbook-ui'

const AvatarCircleIconComponentOverlay = (props) => {
    return (
        <div>
        <Avatar
            componentOverlay={{
                component: "iconCircle",
                placement: "bottom-right",
                icon: "shield",
                variant: "royal"
            }}
            imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
            marginBottom="sm"
            size="sm"
        />

        <Avatar
            componentOverlay={{
                component: "iconCircle",
                placement: "bottom-right",
                icon: "check",
                variant: "green"
            }}
            imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
            marginBottom="sm"
            size="md"
        />

        <Avatar
            componentOverlay={{
                component: "iconCircle",
                placement: "top-left",
                icon: "lock",
                variant: "red"
            }}
            imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
            marginBottom="sm"
            size="lg"
        />

        <Avatar
            componentOverlay={{
                component: "iconCircle",
                placement: "left-center",
                icon: "star",
                variant: "yellow"
            }}
            imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
            marginBottom="sm"
            size="xl"
        />
    </div>
    )
}

export default AvatarCircleIconComponentOverlay

Badge Component Overlay

When passing the badge component as an overlay, you must also specify its text content,and you may optionally control the color by passing an approved value as a variant.

import React from "react";

import { Avatar } from 'playbook-ui'

const AvatarBadgeComponentOverlay = (props) => {
    return (
        <div>
            <Avatar
                componentOverlay={{
                    component: "badge",
                    placement: "bottom-right",
                    text: "12",
                }}
                imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
                marginBottom="sm"
                size="sm"
            />

            <Avatar
                componentOverlay={{
                    component: "badge",
                    placement: "top-left",
                    text: "12"
                }}
                imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
                marginBottom="sm"
                size="md"
            />

            <Avatar
                componentOverlay={{
                    component: "badge",
                    placement: "top-center",
                    text: "On Roadtip",
                    variant: "info"
                }}
                imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
                marginBottom="sm"
                size="lg"
            />

            <Avatar
                componentOverlay={{
                    component: "badge",
                    placement: "bottom-center",
                    text: "Out of Office",
                    variant: "error"
                }}
                imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
                marginBottom="sm"
                size="xl"
            />
        </div>
    )
}

export default AvatarBadgeComponentOverlay

Grayscale

import React from 'react'

import { Avatar } from 'playbook-ui'

const AvatarGrayscale = (props) => {
  return (
    <Avatar
        grayscale
        imageAlt="Terry Johnson Standing"
        imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
        name="Terry Johnson"
    />
  )
}

export default AvatarGrayscale

Multiple Users

Default

import React from 'react'

import { MultipleUsers } from 'playbook-ui'

const MultipleUsersDefault = (props) => {
  return (
    <div>
      <MultipleUsers
          users={[
        {
          name: 'Patrick Welch',
          imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
        },
        {
          name: 'Lucille Sanchez',
          imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
        },
        {
          name: 'Beverly Reyes',
          imageUrl: 'https://randomuser.me/api/portraits/women/74.jpg',
        },
        {
          name: 'Keith Craig',
          imageUrl: 'https://randomuser.me/api/portraits/men/40.jpg',
        },
        {
          name: 'Alicia Cooper',
          imageUrl: 'https://randomuser.me/api/portraits/women/46.jpg',
        },
      ]}
      />

      <br />
      <br />

      <MultipleUsers
          users={[
        {
          name: 'Shawn Palmer',
          imageUrl: 'https://randomuser.me/api/portraits/men/93.jpg',
        },
        {
          name: 'Andrew Murray Cooper Craig',
        },
      ]}
      />
    </div>
  )
}

export default MultipleUsersDefault

Reverse

import React from 'react'

import { MultipleUsers } from 'playbook-ui'

const MultipleUsersReverse = (props) => {
  return (
    <div>
      <MultipleUsers
          reverse
          users={[
          {
            name: 'Patrick Welch',
            imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
          },
          {
            name: 'Lucille Sanchez',
            imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
          },
          {
            name: 'Beverly Reyes',
            imageUrl: 'https://randomuser.me/api/portraits/women/74.jpg',
          },
          {
            name: 'Keith Craig',
            imageUrl: 'https://randomuser.me/api/portraits/men/40.jpg',
          },
          {
            name: 'Alicia Cooper',
            imageUrl: 'https://randomuser.me/api/portraits/women/46.jpg',
          },
        ]}
      />

      <br />
      <br />

      <MultipleUsers
          reverse
          users={[
          {
            name: 'Shawn Palmer',
            imageUrl: 'https://randomuser.me/api/portraits/men/93.jpg',
          },
          {
            name: 'Andrew Murray',
          },
        ]}
      />
    </div>
  )
}

export default MultipleUsersReverse

Size

User avatar default size is xs or 28px, but you can pass in xxs to change avatar size to 20px.

import React from 'react'

import { Body, MultipleUsers } from 'playbook-ui'

const MultipleUsersSize = (props) => {
  return (
    <div>
      <Body
          color="light"
          text="xs"
      />
      <MultipleUsers
          users={[
        {
          name: 'Patrick Welch',
          imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
        },
        {
          name: 'Lucille Sanchez',
          imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
        },
        {
          name: 'Beverly Reyes',
          imageUrl: 'https://randomuser.me/api/portraits/women/74.jpg',
        },
        {
          name: 'Keith Craig',
          imageUrl: 'https://randomuser.me/api/portraits/men/40.jpg',
        },
        {
          name: 'Alicia Cooper',
          imageUrl: 'https://randomuser.me/api/portraits/women/46.jpg',
        },
      ]}
      />

      <br />

      <MultipleUsers
          marginTop="xs"
          size="xs"
          users={[
            {
              name: 'Shawn Palmer',
              imageUrl: 'https://randomuser.me/api/portraits/men/93.jpg',
            },
            {
              name: 'Andrew Murray Cooper Craig',
              imageUrl: 'https://randomuser.me/api/portraits/men/75.jpg',
            },
          ]}
      />

      <Body
          color="light"
          marginTop="xs"
          text="xxs"
      />
      <MultipleUsers
          size="xxs"
          users={[
            {
              name: 'Patrick Welch',
              imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
            },
            {
              name: 'Lucille Sanchez',
              imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
            },
            {
              name: 'Beverly Reyes',
              imageUrl: 'https://randomuser.me/api/portraits/women/74.jpg',
            },
            {
              name: 'Keith Craig',
              imageUrl: 'https://randomuser.me/api/portraits/men/40.jpg',
            },
            {
              name: 'Alicia Cooper',
              imageUrl: 'https://randomuser.me/api/portraits/women/46.jpg',
            },
          ]}
      />

      <br />

      <MultipleUsers
          marginTop="xs"
          size="xxs"
          users={[
            {
              name: 'Shawn Palmer',
              imageUrl: 'https://randomuser.me/api/portraits/men/93.jpg',
            },
            {
              name: 'Andrew Murray Cooper Craig',
              imageUrl: 'https://randomuser.me/api/portraits/men/75.jpg',
            },
          ]}
      />
    </div>
  )
}

export default MultipleUsersSize

Multiple Users Stacked

Default

import React from 'react'

import { MultipleUsersStacked } from 'playbook-ui'

const MultipleUsersStackedDefault = (props) => {
  return (
    <div>
      <MultipleUsersStacked
          users={[
        {
          name: 'Patrick Welch',
          imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
        },
      ]}
      />
      <br />
      <br />
      <MultipleUsersStacked
          users={[
        {
          name: 'Patrick Welch',
          imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
        },
        {
          name: 'Lucille Sanchez',
          imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
        },
      ]}
      />
      <br />
      <br />
      <MultipleUsersStacked
          users={[
        {
          name: 'Patrick Welch',
          imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
        },
        {
          name: 'Lucille Sanchez',
          imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
        },
        {
          name: 'Beverly Reyes',
          imageUrl: 'https://randomuser.me/api/portraits/women/74.jpg',
        },
        {
          name: 'Keith Craig',
          imageUrl: 'https://randomuser.me/api/portraits/men/40.jpg',
        },
        {
          name: 'Alicia Cooper',
          imageUrl: 'https://randomuser.me/api/portraits/women/46.jpg',
        },
      ]}
      />
    </div>
  )
}

export default MultipleUsersStackedDefault

Bubble

import React from 'react'

import { MultipleUsersStacked } from 'playbook-ui'

const MultipleUsersStackedBubble = (props) => {
  return (
    <div>
      <MultipleUsersStacked
          users={[
        {
          name: 'Patrick Welch',
          imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
        },
      ]}
          variant="bubble"
      />
      <br />
      <br />
      <MultipleUsersStacked
          users={[
        {
          name: 'Patrick Welch',
          imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
        },
        {
          name: 'Lucille Sanchez',
          imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
        },
      ]}
          variant="bubble"
      />
      <br />
      <br />
      <MultipleUsersStacked
          users={[
        {
          name: 'Patrick Welch',
          imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
        },
        {
          name: 'Lucille Sanchez',
          imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
        },
        {
          name: 'Beverly Reyes',
          imageUrl: 'https://randomuser.me/api/portraits/women/74.jpg',
        },
      ]}
          variant="bubble"
      />
      <br />
      <br />
      <MultipleUsersStacked
          users={[
        {
          name: 'Patrick Welch',
          imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
        },
        {
          name: 'Lucille Sanchez',
          imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
        },
        {
          name: 'Beverly Reyes',
          imageUrl: 'https://randomuser.me/api/portraits/women/74.jpg',
        },
        {
          name: 'Keith Craig',
          imageUrl: 'https://randomuser.me/api/portraits/men/40.jpg',
        },
        {
          name: 'Alicia Cooper',
          imageUrl: 'https://randomuser.me/api/portraits/women/46.jpg',
        },
      ]}
          variant="bubble"
      />
    </div>
  )
}

export default MultipleUsersStackedBubble

Sizes

import React from 'react'

import { Flex, Title, MultipleUsersStacked } from 'playbook-ui'

const MultipleUsersStackedSize = (props) => {
  const sizes = [
    { label: 'S', size: 'sm' },
    { label: 'M', size: 'md' },
    { label: 'L', size: 'lg' },
    { label: 'XL', size: 'xl' },
  ]

  const usersList = [
    [
      {
        name: 'Patrick Welch',
        imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
      },
    ],
    [
      {
        name: 'Patrick Welch',
        imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
      },
      {
        name: 'Lucille Sanchez',
        imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
      },
    ],
    [
      {
        name: 'Patrick Welch',
        imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
      },
      {
        name: 'Lucille Sanchez',
        imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
      },
      {
        name: 'Beverly Reyes',
        imageUrl: 'https://randomuser.me/api/portraits/women/74.jpg',
      },
    ],
    [
      {
        name: 'Patrick Welch',
        imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
      },
      {
        name: 'Lucille Sanchez',
        imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
      },
      {
        name: 'Beverly Reyes',
        imageUrl: 'https://randomuser.me/api/portraits/women/74.jpg',
      },
      {
        name: 'Keith Craig',
        imageUrl: 'https://randomuser.me/api/portraits/men/40.jpg',
      },
      {
        name: 'Alicia Cooper',
        imageUrl: 'https://randomuser.me/api/portraits/women/46.jpg',
      },
    ],
  ]

  return (
    <>
      {sizes.map(({ label, size }) => (
        <Flex key={size}
            orientation="column"
        >
          <Title paddingTop='sm' >{label}</Title>
          <Flex>
            {usersList.map((users, index) => (
              <Flex key={index}
                  paddingRight='sm'
              >
                <MultipleUsersStacked
                    size={size}
                    users={users}
                    variant="bubble"
                />
              </Flex>
            ))}
          </Flex>
          <br />
        </Flex>
      ))}
    </>
  )
}

export default MultipleUsersStackedSize

User

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

Grayscale Avatar

import React from 'react'

import { User } from 'playbook-ui'

const UserGrayscale = (props) => {
  return (
    <User
        avatarGrayscale
        avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
        name="Anna Black"
        title="Remodeling Consultant"
    />
  )
}

export default UserGrayscale

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

Github

Connect Chat