User

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.

See this kit in action in our sample UI

Default

Anna Black

Remodeling Consultant

Anna Black

Remodeling Consultant

Anna Black

Code Example

<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

Code Example

<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

Code Example

<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

Code Example

<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

Code Example

<%= 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

Code Example

<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.

Code Example

<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>

UI Samples using User Kit

Get the full picture. See how this kit is used in our samples.

Analytics Dashboard

Crm Client List

Music App

Available Props

classname
dark
margin
margin_bottom
margin_left
margin_right
margin_top
margin_x
margin_y
max_width
padding
padding_bottom
padding_left
padding_right
padding_top
padding_x
padding_y
z_index
number_spacing
shadow
line_height
display
cursor
flex_direction
flex_wrap
justify_content
justify_self
align_items
align_content
align_self
flex
flex_grow
flex_shrink
order
id
data
aria
children
align
avatar
avatar_url
name
orientation
size
subtitle
title
territory