Multiple Users Stacked

Multiple users stacked is used in tight spaces, where we need to indicate that multiple users are associated to a specific action or item.

Default


let oneUser = [andrew]
let twoUsers = [andrew, picAndrew]
let multipleUsers = [andrew, picAndrew, andrew, andrew]

HStack(spacing: Spacing.xSmall) {
  PBMultipleUsersStacked(users: oneUser, size: .default)
  PBMultipleUsersStacked(users: twoUsers, size: .default)
  PBMultipleUsersStacked(users: multipleUsers, size: .default)
}

Small


let oneUser = [andrew]
let twoUsers = [andrew, picAndrew]
let multipleUsers = [andrew, picAndrew, andrew, andrew]

HStack(spacing: Spacing.xSmall) {
  PBMultipleUsersStacked(users: oneUser)
  PBMultipleUsersStacked(users: twoUsers)
  PBMultipleUsersStacked(users: multipleUsers)
}

xSmall


let oneUser = [andrew]
let twoUsers = [andrew, picAndrew]
let multipleUsers = [andrew, picAndrew, andrew, andrew]

 HStack(spacing: Spacing.xSmall) {
  PBMultipleUsersStacked(users: oneUser, size: .xSmall)
  PBMultipleUsersStacked(users: twoUsers, size: .xSmall)
  PBMultipleUsersStacked(users: multipleUsers, size: .xSmall)
}

Props

Name	Type	Description	Default	Values
Users	`[PBUser]`	Sets the user's avatars
Size	`Size`	Changes the size of the avatars	`.small`	`.default` `.small` `.xSmall`

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