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.
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.
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.
Properties
Inline
When enabled, the figure and body are aligned as inline-block elements side by side. Disable this to let them stack or span full width.
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.
Size
Controls the overall size of the Media Object. Options: Small, Medium (default), and Large.
Set Component Visibility
All components support conditional visibility — see Component Visibility.
Last updated
Was this helpful?