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.

Horizontal


let img = Image("andrew", bundle: .module)
let name = "Andrew K"
let title = "Rebels Developer"

VStack(alignment: .leading, spacing: Spacing.small) {
  PBUser(
    name: name,
    image: img,
    territory: "PHL",
    title: title
  )

  PBUser(
    name: name,
    territory: "PHL",
    title: title
  )

  PBUser(
    name: name,
    image: img,
    size: .small,
    title: title
  )

  PBUser(
    name: name,
    image: img,
    size: .small
  )
}

Vertical


let img = Image("andrew", bundle: .module)
let name = "Andrew K"
let title = "Rebels Developer"

VStack(alignment: .leading, spacing: Spacing.small) {
  PBUser(
    name: name,
    image: img,
    orientation: .vertical,
    size: .small,
    title: title
  )

  PBUser(
    name: name,
    image: img,
    orientation: .vertical,
    title: title
  )

  PBUser(
    name: name,
    image: img,
    orientation: .vertical,
    size: .large,
    title: title
  )
}

Text Only


let img = Image("andrew", bundle: .module)
let name = "Andrew K"
let title = "Rebels Developer"

VStack(spacing: Spacing.small) {
  PBUser(
    name: name,
    displayAvatar: false,
    size: .large,
    territory: "PHL",
    title: title
  )

  PBUser(
    name: name,
    displayAvatar: false,
    territory: "PHL",
    title: title
  )
}

Horizontal Size


let img = Image("andrew", bundle: .module)
let name = "Andrew K"
let title = "Rebels Developer"

VStack(alignment: .leading, spacing: Spacing.small) {
  PBUser(
    name: name,
    image: img,
    size: .small,
    territory: "PHL",
    title: title
  )

  PBUser(
    name: name,
    image: img,
    territory: "PHL",
    title: title
  )

  PBUser(
    name: name,
    image: img,
    size: .large,
    territory: "PHL",
    title: title
  )
}

Presence Indicator

VStack(alignment: .leading, spacing: Spacing.small) {
  PBUser(
    name: name,

    image: img,
    size: .small,
    territory: "PHL",
    title: title,
    status: .online
  )
  PBUser(
    name: name,
    image: img,
    territory: "PHL",
    title: title,
    status: .away
  )
  PBUser(
    name: name,
    image: img,
    size: .large,
    territory: "PHL",
    title: title,
    status: .offline
  )
}

Props

Name	Type	Description	Default	Values
name	`String`	Sets the User's name	`""`
nameFont	`Typography`	Font styling for the user's name	`.init(font: .title4, variant: .bold)`
image	`Image?`	Sets image for the avatar	`nil`
orientation	`Orientation`	Changes the orientation of the User	`.horizontal`	`.horizontal` `.vertical`
size	`Size`	Changes the size of the User	`.medium`	`.xxSmall` `.xSmall` `.small` `.medium` `.large` `.xLarge`
territory	`String?`	Adds the User's territory	`nil`
title	`String?`	Adds a title	`nil`
subtitle	`AnyView?`	Adds a subtitle view	`nil`
status	`PBOnlineStatus.Status?`	An indicator for the current status of the user	`nil`	`.online` `.away` `.offline`
displayAvatar	`Bool`	Displays the User's avatar	`true`	`true` `false`
territoryTitleFont	`PBFont`	Font for territory and title text	`.subcaption`	`.title1` `.body` `.caption` `.subcaption` `.badgeText` `.title4`
isActive	`Bool`	Sets whether the user is active	`true`	`true` `false`
hasInactiveBadge	`Bool`	Shows inactive badge when user is not active	`false`	`true` `false`
spacing	`CGFloat`	Controls spacing between elements	`Spacing.small`	`.none` `.xxSmall` `.xSmall` `.small` `.medium` `.large` `.xLarge`

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