The Media Object component provides a flexible and visually appealing way to present content with images, icons, or other media.
Last updated
Was this helpful?
The Media Object component is designed to be flexible, allowing you to create different layouts with your text and media easily. To achieve this, it uses a system of "slots":
Think of slots as containers where you can place different types of components.
The Media Object has three slots:
Left Slot: You can add an image, icon, or other media that you want to appear on the left side of your text content.
Content Slot: This is the main area for your text content. It will be positioned alongside the media you've added to the left or right slot.
Right Slot: Similar to the left slot, this allows you to add media that will appear on the right side of your text content
Once you've added your content, you can fine-tune the layout of the Media Object using several properties:
Inline: If you want the media and text to be aligned perfectly side-by-side, enable the "Inline" toggle. This will ensure that the top and bottom edges of the media and text are aligned.
Responsive: To ensure your Media Object looks great on different screen sizes, enable the "Responsive" toggle. This will automatically adjust the layout based on the user's device, optimizing the display for desktop and mobile views.
Vertical Align: This property controls how the text is vertically aligned with the media. Depending on your design preferences and the content you're displaying, you can align the text to the media's top, middle, or bottom.
Size: To control the overall size of the Media Object, you can choose from predefined sizes (small, medium, large). This affects the dimensions of the media and the text content, allowing you to create compact or spacious layouts as needed.
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.
With the Media Object component, you can create visually engaging and informative layouts that enhance the presentation of your content.
