User

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

Icon Circle Component Overlay

NOTE: All componentOverlay implementations require a placement prop, that accepts any of the following values: top-right, top-left, bottom-right, bottom-left, top-center, bottom-center, left-center, and right-center.

When passing the iconCircle component as an overlay, you must also specify an icon, and you may optionally control the color by passing an approved value as a variant.

  <%= pb_rails("avatar", props: {
    component_overlay: {
        component: "icon_circle",
        icon: "shield",
        placement: "bottom-right",
        variant: "royal"
    },
    name: "Terry Johnson",
    size: "sm",
    image_url: "https://randomuser.me/api/portraits/men/44.jpg",
    margin_bottom: "sm"
  }) %>

  <%= pb_rails("avatar", props: {
    component_overlay: {
        component: "icon_circle",
        icon: "check",
        placement: "top-right",
        variant: "green"
    },
    name: "Terry Johnson",
    size: "md",
    image_url: "https://randomuser.me/api/portraits/men/44.jpg",
    margin_bottom: "sm"
  }) %>

  <%= pb_rails("avatar", props: {
    component_overlay: {
        component: "icon_circle",
        icon: "lock",
        placement: "top-left",
        variant: "red"
    },
    name: "Terry Johnson",
    size: "lg",
    image_url: "https://randomuser.me/api/portraits/men/44.jpg",
    margin_bottom: "sm"
  }) %>

  <%= pb_rails("avatar", props: {
    component_overlay: {
        component: "icon_circle",
        icon: "star",
        placement: "left-center",
        variant: "yellow"
    },
    name: "Terry Johnson",
    size: "xl",
    image_url: "https://randomuser.me/api/portraits/men/44.jpg",
    margin_bottom: "sm"
  }) %>

Badge Component Overlay

On Roadtrip

Out of Office

When passing the badge component as an overlay, you must also specify its text content,and you may optionally control the color by passing an approved value as a variant.

 <%= pb_rails("avatar", props: {
      component_overlay: {
          component: "badge",
          text: "12",
          placement: "bottom-right"
      },
      name: "Terry Johnson",
      size: "sm",
      image_url: "https://randomuser.me/api/portraits/men/44.jpg",
      margin_bottom: "sm"
    }) %>

    <%= pb_rails("avatar", props: {
      component_overlay: {
          component: "badge",
          text: "12",
          placement: "top-left"
      },
      name: "Terry Johnson",
      size: "md",
      image_url: "https://randomuser.me/api/portraits/men/44.jpg",
      margin_bottom: "sm"
    }) %>

    <%= pb_rails("avatar", props: {
      component_overlay: {
          component: "badge",
          text: "On Roadtrip",
          placement: "top-center",
          variant: "info"
      },
      name: "Terry Johnson",
      size: "lg",
      image_url: "https://randomuser.me/api/portraits/men/44.jpg",
      margin_bottom: "sm"
    }) %>

    <%= pb_rails("avatar", props: {
      component_overlay: {
          component: "badge",
          text: "Out of Office",
          placement: "bottom-center",
          variant: "error"
      },
      name: "Terry Johnson",
      size: "xl",
      image_url: "https://randomuser.me/api/portraits/men/44.jpg",
      margin_bottom: "sm"
    }) %>

Grayscale

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

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

Bubble

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

<br/><br/>

<%= pb_rails("multiple_users_stacked", props: {
  variant: "bubble",
  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: {
  variant: "bubble",
  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",
    },
  ]
}) %>

<br/><br/>

<%= pb_rails("multiple_users_stacked", props: {
  variant: "bubble",
  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",
    }
  ]
}) %>

Sizes

S

M

L

XL

<%= pb_rails("title", props: {size: 4, text: "S", padding_top: "sm"}) %>

<%= pb_rails("flex") do %>
  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>

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

  <% end %>
  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
    <%= pb_rails("multiple_users_stacked", props: {
      size: "sm",
      variant: "bubble",
      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",
        }
      ]
    }) %>
  <% end %>
  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
    <%= pb_rails("multiple_users_stacked", props: {
        size: "sm",
        variant: "bubble",
        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",
          },
        ]
      }) %>
  <% end %>
  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
    <%= pb_rails("multiple_users_stacked", props: { 
      size: "sm",
      variant: "bubble",
      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",
        }
      ]
    }) %>
  <% end %>
<% end %>

<%= pb_rails("title", props: {size: 4, text: "M", padding_top: "sm"}) %>

<%= pb_rails("flex") do %>
  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>

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

  <% end %>
  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
    <%= pb_rails("multiple_users_stacked", props: {
      size: "md",
      variant: "bubble",
      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",
        }
      ]
    }) %>
    <% end %>
  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
      <%= pb_rails("multiple_users_stacked", props: {
        size: "md",
        variant: "bubble",
        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",
          },
        ]
      }) %>
  <% end %>
  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
    <%= pb_rails("multiple_users_stacked", props: {
      size: "md",
      variant: "bubble",
      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",
        }
      ]
    }) %>
  <% end %>
<% end %>

<%= pb_rails("title", props: {size: 4, text: "L", padding_top: "sm"}) %>

<%= pb_rails("flex") do %>
  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>

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

  <% end %>
  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
    <%= pb_rails("multiple_users_stacked", props: {
      size: "lg",
      variant: "bubble",
      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",
        }
      ]
    }) %>
  <% end %>
  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
      <%= pb_rails("multiple_users_stacked", props: {
        size: "lg",
        variant: "bubble",
        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",
          },
        ]
      }) %>
  <% end %>
  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
    <%= pb_rails("multiple_users_stacked", props: {
      size: "lg",
      variant: "bubble",
      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",
        }
      ]
    }) %>
  <% end %>
<% end %>

<%= pb_rails("title", props: {size: 4, text: "XL", padding_top: "sm"}) %>

<%= pb_rails("flex") do %>
  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>

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

  <% end %>
  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
    <%= pb_rails("multiple_users_stacked", props: {
      size: "xl",
      variant: "bubble",
      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",
        }
      ]
    }) %>
  <% end %>
  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
      <%= pb_rails("multiple_users_stacked", props: {
        size: "xl",
        variant: "bubble",
        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",
          },
        ]
      }) %>
  <% end %>
  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
    <%= pb_rails("multiple_users_stacked", props: {
      size: "xl",
      variant: "bubble",
      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",
        }
      ]
    }) %>
  <% end %>
<% end %>

User

Default

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>

Light Weight

Anna Black

Remodeling Consultant

Anna Black

Remodeling Consultant

Anna Black

Prop

Name will use font-weight: 700 by default, if you want a lighter font weight, use the bold prop set to false. Name will then use font-weight: 300.

<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",
      bold: false
      }) %>
  </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",
      bold: false
      }) %>
  </div>
  <div>
    <%= pb_rails("user", props: {
      name: "Anna Black",
      orientation: "horizontal",
      align: "left",
      avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
      bold: false
      }) %>

     <br>

     <%= pb_rails("user", props: {
       name: "Anna Black",
       orientation: "horizontal",
       align: "left",
       avatar: true,
       bold: false
     }) %>
  </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>

Font Options

Anna Black

PHL • Remodeling Consultant

Anna Black

PHL • Remodeling Consultant

Passing a name_style prop changes the type kit used for the user name. You can choose between title, body, caption, and detail. title is the default.

Passing a title_style prop changes the type kit used for the user title. You can choose between body, caption, and detail. body is the default.

The size of the caption is determined by the size prop.

<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",
    name_style: "body",
    orientation: "horizontal",
    size: "md",
    territory: "PHL",
    title: "Remodeling Consultant"
  }) %>
  <%= pb_rails("user", props: {
    align: "left",
    avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
    name: "Anna Black",
    name_style: "detail",
    orientation: "horizontal",
    size: "md",
    territory: "PHL",
    title: "Remodeling Consultant"
  }) %>
</div>

Grayscale Avatar

Anna Black

Remodeling Consultant

<%= pb_rails("user", props: {
  name: "Anna Black",
  title: "Remodeling Consultant",
  avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
  avatar_grayscale: true,
}) %>

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

Github

Connect Chat