Media objects

Image (or icon) beside a content block; configurable alignment and position.

Preview

Basic (left, top-aligned)

Lorem ipsum

Repudiandae sint consequuntur vel. Amet ut nobis explicabo numquam expedita quia omnis voluptatem. Minus quidem ipsam quia iusto.

Aligned to center

Lorem ipsum

Repudiandae sint consequuntur vel. Amet ut nobis explicabo numquam expedita quia omnis voluptatem. Minus quidem ipsam quia iusto.

Media on the right

Lorem ipsum

Repudiandae sint consequuntur vel. Amet ut nobis explicabo numquam expedita quia omnis voluptatem. Minus quidem ipsam quia iusto.

Responsive (stacks on mobile)

Lorem ipsum

Repudiandae sint consequuntur vel. Amet ut nobis explicabo numquam expedita quia omnis voluptatem. Minus quidem ipsam quia iusto.

React preview

LiveView (HEEx)

alias DesignSystem.UI.{Avatars, MediaObjects}

<MediaObjects.media_object>
  <:media>
    <Avatars.avatar size="md" src={@user.avatar_url} />
  </:media>
  <h3>{@user.name}</h3>
  <p>{@user.bio}</p>
</MediaObjects.media_object>

React (JSX)

import { Avatar, MediaObject } from "../ui/index.mjs"

<MediaObject media={<Avatar size="md" src={user.avatarUrl} />}>
  <h3>{user.name}</h3>
  <p>{user.bio}</p>
</MediaObject>