The multiple users kit is used to show that more than one user is associated to an action or item.
<%= 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", } ] }) %>