PhiaUi.Components.ProfileCard (phia_ui v0.1.17)

ProfileCard — a user profile display card with avatar, name, role, online status, and composable slots.

Renders a Card containing an avatar (with optional status dot), the user's name, an optional role/title, and three optional content slots: biography text, tags/labels, and action buttons.

Layout variants

`:variant`	Layout
`:vertical`	Centered column — avatar on top
`:horizontal`	Row — avatar left, content right

Status dot colours

When :status is provided, a small coloured dot is overlaid on the bottom-right corner of the avatar:

`:status`	Dot colour
`:online`	`emerald-500`
`:offline`	`gray-400`
`:busy`	`red-500`
`:away`	`amber-500`

Examples

<%!-- Minimal card --%>
<.profile_card name="Alice Smith" fallback="AS" />

<%!-- With role and online status --%>
<.profile_card
  name="Alice Smith"
  role="Senior Engineer"
  src="/avatars/alice.jpg"
  fallback="AS"
  status={:online}
/>

<%!-- Horizontal layout with bio, tags, and actions --%>
<.profile_card name="Bob" fallback="B" variant={:horizontal} role="Designer">
  <:bio>Open-source enthusiast and Elixir advocate.</:bio>
  <:tags>
    <span class="text-xs bg-muted rounded px-1 py-0.5">Elixir</span>
    <span class="text-xs bg-muted rounded px-1 py-0.5">Phoenix</span>
  </:tags>
  <:actions>
    <.button size={:sm}>Follow</.button>
    <.button size={:sm} variant={:outline}>Message</.button>
  </:actions>
</.profile_card>

<%!-- Team grid --%>
<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
  <.profile_card
    :for={member <- @team_members}
    name={member.name}
    role={member.title}
    src={member.avatar_url}
    fallback={member.initials}
    status={member.status}
  />
</div>

Summary

Functions

profile_card(assigns)

Renders a user profile card.

Functions

profile_card(assigns)

Renders a user profile card.

Wraps all content inside a PhiaUi.Components.Card. The inner layout is controlled by the variant attribute:

:vertical — avatar centered above the name/role text (default)
:horizontal — avatar on the left, name/role/bio/tags/actions on the right

The optional status dot is a <span> with ring-2 ring-background so it renders cleanly over any card background colour.

Examples

<.profile_card name="Alice" fallback="AL" status={:online} />

<.profile_card name="Bob" role="CTO" variant={:horizontal}>
  <:bio>Building the future of developer tooling.</:bio>
  <:actions><.button size={:sm}>Follow</.button></:actions>
</.profile_card>

Attributes

name (:string) (required) - Display name.
role (:string) - Job title or role. Defaults to nil.
src (:string) - Avatar image URL. Defaults to nil.
fallback (:string) - Initials for the avatar fallback. Defaults to nil.
status (:atom) - Online presence status. Defaults to nil. Must be one of nil, :online, :offline, :busy, or :away.
variant (:atom) - Layout variant: :vertical (centered) or :horizontal (row). Defaults to :vertical. Must be one of :vertical, or :horizontal.
class (:string) - Additional CSS classes. Defaults to nil.
Global attributes are accepted. HTML attributes forwarded to the outer card.

Slots

bio - Short biography text.
tags - Tag chips or labels.
actions - Action buttons (follow, message, etc.).