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 = () => {
    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 = () => {
    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

Avatar Action Button

Default

import React from 'react'

import AvatarActionButton from 'playbook-ui'

const AvatarActionButtonDefault = (props) => (
  <div className="pb--doc-demo-row">
    <AvatarActionButton
        imageAlt="Sophia Carden"
        imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
        linkAriaLabel="Sophia Carden"
        name="Sophia Carden"
    />
  </div>
)

export default AvatarActionButtonDefault

Placement

import React from 'react'

import AvatarActionButton from 'playbook-ui'

const AvatarActionButtonPlacement = (props) => (
  <div className="pb--doc-demo-row">
    <AvatarActionButton
        imageAlt="Sophia Carden"
        imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
        linkAriaLabel="Sophia Carden"
        name="Sophia Carden"
        placement="bottom_left"
    />
    <AvatarActionButton
        imageAlt="Sophia Carden"
        imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
        linkAriaLabel="Sophia Carden"
        name="Sophia Carden"
        placement="bottom_right"
    />
    <AvatarActionButton
        imageAlt="Sophia Carden"
        imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
        linkAriaLabel="Sophia Carden"
        name="Sophia Carden"
        placement="top_left"
    />
    <AvatarActionButton
        imageAlt="Sophia Carden"
        imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
        linkAriaLabel="Sophia Carden"
        name="Sophia Carden"
        placement="top_right"
    />
  </div>
)

export default AvatarActionButtonPlacement

Actions

import React from 'react'

import AvatarActionButton from 'playbook-ui'

const AvatarActionButtonActions = (props) => (
  <div className="pb--doc-demo-row">
    <AvatarActionButton
        action="add"
        imageAlt="Add Sophia Carden"
        imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
        linkAriaLabel="Add Sophia Carden"
        name="Sophia Carden"
    />
    <AvatarActionButton
        action="remove"
        imageAlt="Remove Sophia Carden"
        imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
        linkAriaLabel="Remove Sophia Carden"
        name="Sophia Carden"
    />
  </div>
)

export default AvatarActionButtonActions

On Click

import React from 'react'

import AvatarActionButton from 'playbook-ui'

const AvatarActionButtonOnClick = (props) => (
  <div className="pb--doc-demo-row">
    <AvatarActionButton
        imageAlt="Sophia Carden"
        imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
        linkAriaLabel="Alert Sophia Carden"
        linkUrl="https://www.google.com"
        name="Sophia Carden"
        onClick={() => alert('clicked!')}
    />
  </div>
)

export default AvatarActionButtonOnClick

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 from 'playbook-ui'
import Title from 'playbook-ui'
import 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

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

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