Foundation CSS Media Object

The Foundation CSS media object is a flexible and versatile component used for displaying content alongside an accompanying image, icon, or avatar. It's commonly used for representing articles, blog posts, comments, or user profiles in a structured and visually appealing format. Here's how to create a media object using Foundation CSS:

1. HTML Structure

Define the HTML structure for the media object by wrapping the content and media elements within a <div> element with the class media-object. The media object consists of two main parts: the media figure (image, icon, or avatar) and the media content (text, title, description).

Within the media object container, include the media figure with the appropriate class (e.g., media-object-section) and the media content with the class media-object-section. You can customize the appearance and layout of the media object using additional classes such as media-object-section modifiers for alignment and sizing.

<div class="media-object">
  <div class="media-object-section">
    <img src="image.jpg" alt="Image">
  </div>
  <div class="media-object-section">
    <h3>Media Object Title</h3>
    <p>Media object description or content goes here.</p>
  </div>
</div>

2. Example

Here's an example of a basic media object implemented using Foundation CSS:

<div class="media-object">
  <div class="media-object-section">
    <img src="avatar.jpg" alt="Avatar">
  </div>
  <div class="media-object-section">
    <h3>John Doe</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec lectus ut turpis semper fermentum.</p>
  </div>
</div>

Conclusion

The Foundation CSS media object provides a simple yet effective way to present content alongside media elements such as images, icons, or avatars. By leveraging the media object structure and applying appropriate classes, you can create visually appealing and well-organized layouts for various types of content on your website.

Archive