PhiaUi.Components.Layout.MediaObject (phia_ui v0.1.17)

Copy Markdown View Source

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>

Summary

Functions

media_object(assigns)

Renders a media object layout.

Functions

media_object(assigns)

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.