<%= 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" }) %>
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" }) %>
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" }) %>
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" }) %>
<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>
<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>
<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>
<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>
<%= 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", } ] }) %>
<%= 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", } ] }) %>
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", } ] }) %>
<%= 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", } ] }) %>
<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>
<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>
<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>
<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>
<%= 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" }) %>
<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>
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>