# `PhiaUi.Components.TeamCard`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/cards/team_card.ex#L1)

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

# `team_card`

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.

---

*Consult [api-reference.md](api-reference.md) for complete listing*