PhiaUi.Components.TeamCard (phia_ui v0.1.17)

TeamCard — displays a team member with avatar, name, role, department, email, and optional badge/action slots.

Variants

Variant	Description
`:default`	Centered layout, avatar size :lg
`:compact`	Centered layout, avatar size :md, denser spacing
`:horizontal`	Row layout, avatar left (size :md), content right

Examples

<.team_card name="Alice Smith" role="Engineer" department="Platform" email="alice@example.com" />

<.team_card name="Bob" variant={:compact} fallback="B">
  <:badges><span>Lead</span></:badges>
  <:actions><button>Message</button></:actions>
</.team_card>

<.team_card name="Carol" variant={:horizontal} role="Designer" />

Summary

Functions

team_card(assigns)

Renders a team member card.

Functions

team_card(assigns)

Renders a team member card.

The card layout is controlled by variant:

:default — centered column. Large avatar (:lg) above the member's name, role, department, and email. Badges and action buttons stack below.
:compact — centered column, medium avatar and tighter text sizes. Use in dense grids where space is limited.
:horizontal — flex row. Medium avatar on the left; name, role, department, email, badges, and actions on the right.

All text fields (role, department, email, badges, actions) are optional — the layout adapts cleanly when they are not provided.

Examples

<%!-- Minimal team member --%>
<.team_card name="Alice Smith" />

<%!-- Vertical card with all fields --%>
<.team_card
  name="Alice Smith"
  role="Senior Engineer"
  department="Platform"
  email="alice@example.com"
  src="/avatars/alice.jpg"
  fallback="AS"
>
  <:badges>
    <.badge>Elixir</.badge>
    <.badge variant={:outline}>Phoenix</.badge>
  </:badges>
  <:actions>
    <.button size={:sm}>Message</.button>
  </:actions>
</.team_card>

<%!-- Horizontal compact team list --%>
<div class="space-y-3">
  <.team_card
    :for={member <- @team}
    name={member.name}
    role={member.title}
    department={member.department}
    src={member.avatar_url}
    variant={:horizontal}
  />
</div>

Attributes

name (:string) (required) - Team member's display name.
role (:string) - Job title. Defaults to nil.
department (:string) - Department or team name. Defaults to nil.
src (:string) - Avatar image URL. Defaults to nil.
fallback (:string) - Initials for avatar fallback. Defaults to nil.
email (:string) - Email address. Defaults to nil.
variant (:atom) - Layout variant. Defaults to :default. Must be one of :default, :compact, or :horizontal.
class (:string) - Additional CSS classes. Defaults to nil.
Global attributes are accepted. HTML attributes forwarded to the outer card.

Slots

badges - Badge chips (role tags, skills, etc.).
actions - Action buttons.