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

Versatile list item component with media, title, description, and trailing actions.

Provides a consistent layout for list items across the application —
settings rows, contact lists, notification items, file browsers, and more.
Pure HEEx, no JavaScript required.

## Components

| Function            | Element | Purpose                                    |
|---------------------|---------|--------------------------------------------|
| `item/1`            | `div`/`a` | Container with media, content, actions   |
| `item_title/1`      | `p`     | Primary text, `font-medium`                |
| `item_description/1`| `p`     | Secondary text, `text-muted-foreground`    |

## Variants

| Variant    | Style                                              |
|------------|----------------------------------------------------|
| `"default"`| Transparent background, hover accent                |
| `"outline"`| Border with `border-border`                         |
| `"muted"`  | `bg-muted/50` background                            |

## Basic example

    <.item>
      <:media><.avatar src="/avatar.jpg" fallback="JD" /></:media>
      <.item_title>John Doe</.item_title>
      <.item_description>Software Engineer</.item_description>
      <:trailing>
        <.badge>Admin</.badge>
      </:trailing>
    </.item>

## As a link

    <.item navigate={~p"/users/42"}>
      <.item_title>View Profile</.item_title>
      <.item_description>Click to open</.item_description>
    </.item>

# `item`

Renders a versatile list item with optional media, content, and trailing actions.

## Examples

    <.item>
      <.item_title>Settings</.item_title>
      <.item_description>Manage your account</.item_description>
    </.item>

    <.item variant="outline" navigate={~p"/profile"}>
      <:media><.icon name="user" /></:media>
      <.item_title>Profile</.item_title>
      <:trailing><.icon name="chevron-right" size={:sm} /></:trailing>
    </.item>

## Attributes

* `variant` (`:atom`) - Visual variant. Defaults to `:default`. Must be one of `:default`, `:outline`, or `:muted`.
* `href` (`:string`) - Renders as an `<a>` tag. Defaults to `nil`.
* `navigate` (`:string`) - LiveView `navigate`. Defaults to `nil`.
* `patch` (`:string`) - LiveView `patch`. Defaults to `nil`.
* `class` (`:string`) - Additional CSS classes. Defaults to `nil`.
* Global attributes are accepted. Additional HTML attributes.
## Slots

* `media` - Leading avatar, icon, or thumbnail.
* `inner_block` (required) - Main content area.
* `trailing` - Trailing metadata or actions.

# `item_description`

Renders secondary description text inside an `item/1`.
## Attributes

* `class` (`:string`) - Additional CSS classes. Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `inner_block` (required)

# `item_title`

Renders the primary title text inside an `item/1`.
## Attributes

* `class` (`:string`) - Additional CSS classes. Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `inner_block` (required)

---

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