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.
<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" }) %>