Ctrlk
YouTube ChannelBook A Demo🪄 Build with AIJoin The Community
For the complete documentation index, see llms.txt. This page is also available as Markdown.

Media Object

The Avonni Media Object component provides a flexible layout that aligns a media element (such as an icon, avatar, or image) alongside body content, following the Lightning Design System media object pattern.

Overview

The Media Object component uses three slots to organize your content:

  • Figure (Left): Place an image, icon, or other media that appears on the left side of the content.

  • Content: The main area for your text content, positioned alongside the figure.

  • Figure Inverse (Right): An alternative media area that appears on the right side of the content.

Media Object and Slots disposal

Example Use Cases

  • Product Listings: Display product images alongside their descriptions and prices.

  • News Articles: Show article images or author avatars next to the text.

  • User Profiles: Present user avatars with their names and details.

  • Call-to-Action Sections: Combine images with compelling text and buttons.

See it in a real project

Contact Local Weather: Live weather from an external API, on the Contact record.

Configuration

To configure the Media Object, select it on the canvas. The configuration panel opens on the right. The sections below mirror the Properties tab.

The Properties tab of the Edit Media Object panel
The whole Properties tab. The Media Object has no Interactions tab, only Properties and Style.

Properties

Inline

When enabled, the Media Object shrinks to fit its content instead of spanning the full width, and the figure moves above the body instead of sitting beside it. Leave it off to keep the figure and the body side by side.

The Media Object with Inline off and on
With Inline off, the figure sits beside the body. With it on, the component shrinks to its content and the figure moves above the body.

Because Inline stacks the figure above the body, Vertical Align only has a visible effect when Inline is off.

Responsive

When enabled, the layout automatically adapts to different screen sizes, optimizing the display for both desktop and mobile views.

Vertical Align

Controls how the figure and body are aligned vertically within the container. Options: Start (top), Center, and End (bottom). Defaults to Start. Requires Inline to be off.

The three Vertical Align values on the same media object
The three values of Vertical Align, with a figure shorter than its body.

Size

Controls the overall size of the Media Object. Options: Small, Medium (default), and Large. Size sets the spacing between the figure and the body.

The three Size values on the same media object
The three values of Size, which widen the gap between the figure and the body.

Set Component Visibility

All components support conditional visibility — see Component Visibility.

Styling

Configure the Media Object's appearance from the Style tab of the Edit Media Object panel.

Controls the outer spacing around the component.

  • Top / Right / Bottom / Left: Adjust the space on each side.

Controls the inner spacing between the component's content and its edges.

  • Top / Right / Bottom / Left: Adjust the inner spacing on each side.

Last updated

Was this helpful?