<%= pb_rails("flex", props: {orientation: "column"}) do %>
    <%= pb_rails("avatar", props: {
        name: "Tori Johnson",
        size: "md",
        image_url: "https://randomuser.me/api/portraits/women/27.jpg",
        imagre_alt: "Tori Johnson",
        status: "offline"
    }) %> 
    <%= pb_rails("flex", props: {align_items: "center", justify_content: "center"}) do %>
      <%= pb_rails("title", props: {padding_right: "xs", text: "Tori Johnson", size: "4"}) %>
      <%= pb_rails("badge", props: {variant: "neutral", text: "inacitve", dark: true}) %>
    <% end %>   
    <%= pb_rails("body", props: {color: "light"}) do %>
        <b>User Experience Designer</b>
    <% end %>
    <%= pb_rails("body", props: {color: "light", text: "PHL • User Experience"}) %>
<% end %>