Avatars

Avatar

Default

<%= pb_rails("avatar", props: {
    name: "Terry Johnson",
    size: "xxs",
    image_url: "https://randomuser.me/api/portraits/men/44.jpg",
    status: "away"
  }) %>

<br>

<%= pb_rails("avatar", props: {
    name: "Terry Johnson",
    size: "xs",
    image_alt: "Terry Johnson Standing",
    image_url: "https://randomuser.me/api/portraits/men/44.jpg",
    status: "online"
  }) %>

<br>

<%= pb_rails("avatar", props: {
    name: "Terry Johnson",
    size: "sm",
    image_alt: "Terry Johnson Standing",
    image_url: "https://randomuser.me/api/portraits/men/44.jpg",
    status: "away"
  }) %>

<br>

<%= pb_rails("avatar", props: {
    name: "Terry Johnson",
    size: "md",
    image_alt: "Terry Johnson Standing",
    image_url: "https://randomuser.me/api/portraits/men/44.jpg",
    status: "offline"
  }) %>

<br>

<%= pb_rails("avatar", props: {
    name: "Terry Johnson",
    size: "lg",
    image_alt: "Terry Johnson Standing",
    image_url: "https://randomuser.me/api/portraits/men/44.jpg",
    status: "online"
  }) %>

<br>

<%= pb_rails("avatar", props: {
    name: "Terry Johnson",
    size: "xl",
    image_alt: "Terry Johnson Standing",
    image_url: "https://randomuser.me/api/portraits/men/44.jpg",
    status: "away"
  }) %>

Monogram

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

<%= pb_rails("avatar", props: { name: "Terry Johnson", size: "xxs" }) %>
<%= pb_rails("avatar", props: { name: "Terry Johnson", size: "xs" }) %>
<%= pb_rails("avatar", props: { name: "Terry Johnson", size: "sm" }) %>
<%= pb_rails("avatar", props: { name: "Terry Johnson", size: "md" }) %>
<%= pb_rails("avatar", props: { name: "Terry Johnson", size: "lg" }) %>
<%= pb_rails("avatar", props: { name: "Terry Johnson", size: "xl" }) %>

Bad Image Link

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

<%= pb_rails("avatar", props: { image_url: "", name: "Terry Johnson", size: "xxs" }) %>
<%= pb_rails("avatar", props: { image_url: true, name: "Terry Johnson", size: "xs" }) %>
<%= pb_rails("avatar", props: { image_url: 4, name: "Terry Johnson", size: "sm" }) %>
<%= pb_rails("avatar", props: { image_url: "https://google.com", name: "Terry Johnson", size: "md" }) %>
<%= pb_rails("avatar", props: { image_url: "", name: "Terry Johnson", size: "lg" }) %>
<%= pb_rails("avatar", props: { image_url: "https://randomuser.me/api/portraits/men/notapicture.jpg", name: "Terry Johnson", size: "xl" }) %>

Status

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

<%= pb_rails("avatar", props: {
    name: "Terry Johnson",
    size: "sm",
    image_alt: "Terry Johnson Status",
    image_url: "https://randomuser.me/api/portraits/men/44.jpg"
  }) %>

<br>

  <%= pb_rails("avatar", props: {
    name: "Terry Johnson",
    size: "sm",
    image_alt: "Terry Johnson Online",
    image_url: "https://randomuser.me/api/portraits/men/44.jpg",
    status: "online"
  }) %>

  <br>

<%= pb_rails("avatar", props: {
    name: "Terry Johnson",
    size: "sm",
    image_alt: "Terry Johnson Away",
    image_url: "https://randomuser.me/api/portraits/men/44.jpg",
    status: "away"
  }) %>

  <br>

<%= pb_rails("avatar", props: {
    name: "Terry Johnson",
    size: "sm",
    image_alt: "Terry Johnson Offline",
    image_url: "https://randomuser.me/api/portraits/men/44.jpg",
    status: "offline"
  }) %>

Avatar Action Button

Default

<div class="pb--doc-demo-row">

  <%= pb_rails("avatar_action_button", props: {
      link_aria_label: "Sophia Carden",
      name: "Sophia Carden",
      image_alt: "Sophia Carden",
      image_url: "https://randomuser.me/api/portraits/women/8.jpg"
  }) %>

</div>

Placement

<div class="pb--doc-demo-row">
  
  <%= pb_rails("avatar_action_button", props: {
      link_aria_label: "Sophia Carden",
      name: "Sophia Carden",
      image_alt: "Sophia Carden",
      image_url: "https://randomuser.me/api/portraits/women/8.jpg",
      placement: "bottom_left"
  }) %>

  <%= pb_rails("avatar_action_button", props: {
      link_aria_label: "Sophia Carden",
      name: "Sophia Carden",
      image_alt: "Sophia Carden",
      image_url: "https://randomuser.me/api/portraits/women/8.jpg",
      placement: "bottom_right"
  }) %>

    <%= pb_rails("avatar_action_button", props: {
      link_aria_label: "Sophia Carden",
      name: "Sophia Carden",
      image_alt: "Sophia Carden",
      image_url: "https://randomuser.me/api/portraits/women/8.jpg",
      placement: "top_left"
  }) %>

    <%= pb_rails("avatar_action_button", props: {
      link_aria_label: "Sophia Carden",
      name: "Sophia Carden",
      image_alt: "Sophia Carden",
      image_url: "https://randomuser.me/api/portraits/women/8.jpg",
      placement: "top_right"
  }) %>

</div>

Actions

<div class="pb--doc-demo-row">
  
  <%= pb_rails("avatar_action_button", props: {
      link_aria_label: "Add Sophia Carden",
      name: "Sophia Carden",
      image_alt: "Add Sophia Carden",
      image_url: "https://randomuser.me/api/portraits/women/8.jpg",
      action: "add",
  }) %>

  <%= pb_rails("avatar_action_button", props: {
      link_aria_label: "Remove Sophia Carden",
      name: "Sophia Carden",
      image_alt: "Remove Sophia Carden",
      image_url: "https://randomuser.me/api/portraits/women/8.jpg",
      action: "remove",
  }) %>

</div>

On Click

<div class="pb--doc-demo-row">
  
  <%= pb_rails("avatar_action_button", props: {
      link_aria_label: "Alert Sophia Carden",
      name: "Sophia Carden",
      id: "clickable",
      link_url: "http://www.google.com",
      image_alt: "Sophia Carden",
      image_url: "https://randomuser.me/api/portraits/women/8.jpg",
  }) %>

  <%= javascript_tag do %>
    document.querySelector('#clickable').addEventListener('click', () => alert('clickable clicked!'))
  <% end %>

</div>

Tooltip

<div class="pb--doc-demo-row">
  
  <%= pb_rails("avatar_action_button", props: {
      link_aria_label: "Sophia Carden",
      name: "Sophia Carden",
      link_url: "http://www.google.com",
      image_alt: "Sophia Carden",
      image_url: "https://randomuser.me/api/portraits/women/8.jpg",
      tooltip_text: "Tooltip Text",
      tooltip_id: "avatar_1",
  }) %>

</div>

Multiple Users

Default

<%= pb_rails("multiple_users", props: {
  users: [
    {
      name: "Patrick Welch",
      image_url: "https://randomuser.me/api/portraits/men/9.jpg",
    },
    {
      name: "Lucille Sanchez",
      image_url: "https://randomuser.me/api/portraits/women/6.jpg",
    },
    {
      name: "Beverly Reyes",
      image_url: "https://randomuser.me/api/portraits/women/74.jpg",
    },
    {
      name: "Keith Craig",
      image_url: "https://randomuser.me/api/portraits/men/40.jpg",
    },
    {
      name: "Alicia Cooper",
      image_url: "https://randomuser.me/api/portraits/women/46.jpg",
    }
  ]
}) %>

<br/><br/>

<%= pb_rails("multiple_users", props: {
  users: [
    {
      name: "Shawn Palmer",
      image_url: "https://randomuser.me/api/portraits/men/93.jpg",
    },
    {
      name: "Andrew Murray",
      image_url: "https://randomuser.me/api/portraits/men/75.jpg",
    }
  ]
}) %>

Reverse

<%= pb_rails("multiple_users", props: {
  reverse: true,
  users: [
    {
      name: "Patrick Welch",
      image_url: "https://randomuser.me/api/portraits/men/9.jpg",
    },
    {
      name: "Lucille Sanchez",
      image_url: "https://randomuser.me/api/portraits/women/6.jpg",
    },
    {
      name: "Beverly Reyes",
      image_url: "https://randomuser.me/api/portraits/women/74.jpg",
    },
    {
      name: "Keith Craig",
      image_url: "https://randomuser.me/api/portraits/men/40.jpg",
    },
    {
      name: "Alicia Cooper",
      image_url: "https://randomuser.me/api/portraits/women/46.jpg",
    }
  ]
}) %>

<br/><br/>

<%= pb_rails("multiple_users", props: {
  reverse: true,
  users: [
    {
      name: "Shawn Palmer",
      image_url: "https://randomuser.me/api/portraits/men/93.jpg",
    },
    {
      name: "Andrew Murray",
      image_url: "https://randomuser.me/api/portraits/men/75.jpg",
    }
  ]
}) %>

Size

xxs

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

<%= pb_rails("body", props: {
  text: "xs",
  color: "light"
}) %>
<%= pb_rails("multiple_users", props: {
  users: [
    {
      name: "Patrick Welch",
      image_url: "https://randomuser.me/api/portraits/men/9.jpg",
    },
    {
      name: "Lucille Sanchez",
      image_url: "https://randomuser.me/api/portraits/women/6.jpg",
    },
    {
      name: "Beverly Reyes",
      image_url: "https://randomuser.me/api/portraits/women/74.jpg",
    },
    {
      name: "Keith Craig",
      image_url: "https://randomuser.me/api/portraits/men/40.jpg",
    },
    {
      name: "Alicia Cooper",
      image_url: "https://randomuser.me/api/portraits/women/46.jpg",
    }
  ]
}) %>

<br />

<%= pb_rails("multiple_users", props: {
  margin_top: "xs",
  size: "xs",
  users: [
    {
      name: "Shawn Palmer",
      image_url: "https://randomuser.me/api/portraits/men/93.jpg",
    },
    {
      name: "Andrew Murray",
      image_url: "https://randomuser.me/api/portraits/men/75.jpg",
    }
  ]
}) %>

<br />

<%= pb_rails("body", props: {
  text: "xxs",
  margin_top: "xs",
  color: "light"
}) %>
<%= pb_rails("multiple_users", props: {
  size: "xxs",
  users: [
    {
      name: "Patrick Welch",
      image_url: "https://randomuser.me/api/portraits/men/9.jpg",
    },
    {
      name: "Lucille Sanchez",
      image_url: "https://randomuser.me/api/portraits/women/6.jpg",
    },
    {
      name: "Beverly Reyes",
      image_url: "https://randomuser.me/api/portraits/women/74.jpg",
    },
    {
      name: "Keith Craig",
      image_url: "https://randomuser.me/api/portraits/men/40.jpg",
    },
    {
      name: "Alicia Cooper",
      image_url: "https://randomuser.me/api/portraits/women/46.jpg",
    }
  ]
}) %>

<br />

<%= pb_rails("multiple_users", props: {
  margin_top: "xs",
  size: "xxs",
  users: [
    {
      name: "Shawn Palmer",
      image_url: "https://randomuser.me/api/portraits/men/93.jpg",
    },
    {
      name: "Andrew Murray",
      image_url: "https://randomuser.me/api/portraits/men/75.jpg",
    }
  ]
}) %>

Multiple Users Stacked

Default

<%= pb_rails("multiple_users_stacked", props: {
  users: [
    {
      name: "Patrick Welch",
      image_url: "https://randomuser.me/api/portraits/men/9.jpg",
    }
  ]
}) %>

<br/><br/>

<%= pb_rails("multiple_users_stacked", props: {
  users: [
    {
      name: "Patrick Welch",
      image_url: "https://randomuser.me/api/portraits/men/9.jpg",
    },
    {
      name: "Lucille Sanchez",
      image_url: "https://randomuser.me/api/portraits/women/6.jpg",
    }
  ]
}) %>

<br/><br/>

<%= pb_rails("multiple_users_stacked", props: {
  users: [
    {
      name: "Patrick Welch",
      image_url: "https://randomuser.me/api/portraits/men/9.jpg",
    },
    {
      name: "Lucille Sanchez",
      image_url: "https://randomuser.me/api/portraits/women/6.jpg",
    },
    {
      name: "Beverly Reyes",
      image_url: "https://randomuser.me/api/portraits/women/74.jpg",
    },
    {
      name: "Keith Craig",
      image_url: "https://randomuser.me/api/portraits/men/40.jpg",
    },
    {
      name: "Alicia Cooper",
      image_url: "https://randomuser.me/api/portraits/women/46.jpg",
    }
  ]
}) %>

Anna Black

Remodeling Consultant

Anna Black

Remodeling Consultant

Anna Black

<div class="pb--doc-demo-row">
  <div>
    <%= pb_rails("user", props: {
      name: "Anna Black",
      title: "Remodeling Consultant",
      orientation: "vertical",
      align: "center",
      size: "lg",
      avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
      }) %>
  </div>
  <div>
    <%= pb_rails("user", props: {
      name: "Anna Black",
      title: "Remodeling Consultant",
      orientation: "horizontal",
      align: "left",
      avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
      }) %>
  </div>
  <div>
    <%= pb_rails("user", props: {
      name: "Anna Black",
      orientation: "horizontal",
      align: "left",
      avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
      }) %>

     <br>

     <%= pb_rails("user", props: {
       name: "Anna Black",
       orientation: "horizontal",
       align: "left",
       avatar: true
     }) %>
  </div>
</div>

With Territory

Anna Black

PHL • Remodeling Consultant

Anna Black

PHL • Remodeling Consultant

Anna Black

PHL • Remodeling Consultant

Anna Black

PHL • Remodeling Consultant

<div class="pb--doc-demo-row">
  <div>
    <%= pb_rails("user", props: {
      name: "Anna Black",
      territory: "PHL",
      title: "Remodeling Consultant",
      orientation: "vertical",
      align: "center",
      size: "lg",
      avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
      }) %>
  </div>
  <div>
    <%= pb_rails("user", props: {
      name: "Anna Black",
      territory: "PHL",
      title: "Remodeling Consultant",
      orientation: "horizontal",
      align: "left",
      avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
      }) %>
  </div>
  <div>
  <%= pb_rails("user", props: {
      name: "Anna Black",
      territory: "PHL",
      title: "Remodeling Consultant",
      orientation: "horizontal",
      align: "center",
      size: "sm"}) %>
      <br>
    <%= pb_rails("user", props: {
      name: "Anna Black",
      territory: "PHL",
      title: "Remodeling Consultant",
      orientation: "horizontal",
      align: "center",
      size: "lg"}) %>
  </div>
</div>

Text Only

Anna Black

Remodeling Consultant

Anna Black

Remodeling Consultant

<div class="pb--doc-demo-row">
  <div>
    <%= pb_rails("user", props: {
      name: "Anna Black",
      title: "Remodeling Consultant",
      orientation: "horizontal",
      align: "center",
      size: "lg"}) %>
  </div>
  <div class="">
    <%= pb_rails("user", props: {
      name: "Anna Black",
      title: "Remodeling Consultant",
      orientation: "horizontal",
      align: "left"}) %>
  </div>
</div>

Horizontal Size

Anna Black

Remodeling Consultant

Anna Black

Remodeling Consultant

Anna Black

Remodeling Consultant

<div class="pb--doc-demo-row">
  <div>
    <%= pb_rails("user", props: {
      name: "Anna Black",
      title: "Remodeling Consultant",
      orientation: "horizontal",
      align: "left",
      size: "sm",
      avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
      }) %>
  </div>
  <div>
    <%= pb_rails("user", props: {
      name: "Anna Black",
      title: "Remodeling Consultant",
      orientation: "horizontal",
      align: "left",
      size: "md",
      avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
      }) %>
  </div>
  <div>
    <%= pb_rails("user", props: {
      name: "Anna Black",
      title: "Remodeling Consultant",
      orientation: "horizontal",
      align: "left",
      size: "lg",
      avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
      }) %>
  </div>
</div>

Vertical Size

Anna Black

Remodeling Consultant

Anna Black

Remodeling Consultant

Anna Black

Remodeling Consultant

<%= pb_rails("user", props: {
  name: "Anna Black",
  title: "Remodeling Consultant",
  orientation: "vertical",
  align: "center",
  size: "sm",
  avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
  }) %>

<br><br>

<%= pb_rails("user", props: {
  name: "Anna Black",
  title: "Remodeling Consultant",
  orientation: "vertical",
  align: "center",
  size: "md",
  avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
  }) %>

<br><br>

<%= pb_rails("user", props: {
  name: "Anna Black",
  title: "Remodeling Consultant",
  orientation: "vertical",
  align: "center",
  size: "lg",
  avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
  }) %>

Subtitle

Anna Black

PHL • Remodeling Consultant

User ID: 12345

Anna Black

PHL • Remodeling Consultant

User ID: 12345

<div class="pb--doc-demo-row">
  <%= pb_rails("user", props: {
    align: "center",
    avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
    name: "Anna Black",
    orientation: "vertical",
    size: "md",
    subtitle: "User ID: 12345",
    territory: "PHL",
    title: "Remodeling Consultant"
  }) %>

  <%= pb_rails("user", props: {
    align: "left",
    avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
    name: "Anna Black",
    orientation: "horizontal",
    size: "md",
    subtitle: "User ID: 12345",
    territory: "PHL",
    title: "Remodeling Consultant"
  }) %>
</div>

Block Content Subtitle

Anna Black

PHL • Remodeling Consultant

Admin

Anna Black

(349) 185-9988

(555) 555-5555

email@example.com

The kit accepts block content and whatever is passed as block content will display in the subtitle section.

<div class="pb--doc-demo-row">
  <%= pb_rails("user", props: {
    align: "left",
    avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
    name: "Anna Black",
    orientation: "horizontal",
    size: "md",
    territory: "PHL",
    title: "Remodeling Consultant"
  }) do %>
    <%= pb_rails("flex", props: { align: "center" }) do %>
      <%= pb_rails("icon", props: { icon: "users" }) %>
      <%= pb_rails("caption", props: { padding_left: "xs", text: "Admin" }) %>
    <% end %>
  <% end %>

  <%= pb_rails("user", props: {
    align: "left",
    avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
    name: "Anna Black",
    orientation: "horizontal",
    size: "md",
  }) do %>
    <%= pb_rails("contact", props: {
      contact_type: "cell",
      contact_value: "349-185-9988"
    }) %>
    <%= pb_rails("contact", props: {
      contact_value: 5555555555
    }) %>
    <%= pb_rails("contact", props: {
      contact_type: "email",
      contact_value: "email@example.com"
    }) %>
  <% end %>
</div>

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