# `PhiaUi.Components.Layout.MediaObject`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/layout/media_object.ex#L1)

Classic media-object layout: a fixed media element (image/icon/avatar)
alongside a flexible body content block.

Used for comment threads, notification items, user rows, and product cards.

## Examples

    <%!-- Comment row --%>
    <.media_object>
      <:media>
        <.avatar src={@user.avatar} fallback={@user.initials} />
      </:media>
      <div>
        <p class="font-semibold">{@user.name}</p>
        <p class="text-sm text-muted-foreground">{@comment.body}</p>
      </div>
    </.media_object>

    <%!-- Reversed (media on the right) --%>
    <.media_object reversed>
      <:media><.icon name="hero-bell" class="h-6 w-6" /></:media>
      <p>Notification text</p>
    </.media_object>

    <%!-- Centered alignment --%>
    <.media_object align={:center} gap={3}>
      <:media><.avatar fallback="JD" /></:media>
      <span>Jane Doe</span>
    </.media_object>

# `media_object`

Renders a media object layout.
## Attributes

* `align` (`:atom`) - Vertical alignment between media and body. Defaults to `:start`. Must be one of `:start`, `:center`, or `:end`.
* `gap` (`:integer`) - Gap between media and body (0–12) → `gap-N`. Defaults to `4`.
* `reversed` (`:boolean`) - Places media to the right of the body. Defaults to `false`.
* `class` (`:string`) - Additional CSS classes merged via cn/1. Defaults to `nil`.
* Global attributes are accepted. HTML attributes forwarded to the root element.
## Slots

* `media` (required) - Media element: image, icon, or avatar.
* `inner_block` (required) - Body content alongside the media.

---

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