Foundation CSS Media Object Basics

Foundation CSS is an open-source and responsive front-end framework created by ZURB in September 2011 that makes it simple to create stunning responsive websites, apps, and emails that operate on any device. Many companies, like Facebook, eBay, Mozilla, Adobe, and even Disney, use it. This framework is based on bootstrap, which is similar to SaaS. It’s more complex, versatile, and configurable. It also comes with a command-line interface, making it simple to use with module bundlers. Email framework provides you with responsive HTML emails, which can be read on any device. Foundation for Apps allows you to build fully responsive web applications.

Media Object adds the media with some content by using media object classes. When we want to demonstrate something with media then we can use these classes. We can use the media-object class to create the division and the media-object-section to create the sections.

Foundation CSS Media Object Basics Classes:

• media-object: It is used to create the division for the media and content.
• media-object-section: It is used to create the sections.

Syntax:

<div class="media-object">
 <div class="media-object-section">
 .....
 </div>
 <div class="media-object-section">
 .....
 </div>
</div>

Example 1: The following code demonstrates the Media object basics with some content.

Output:

👁 Image

Example 2: The following code demonstrates the Media object basics with video, content, and image.

Output:

👁 Image

Reference: https://get.foundation/sites/docs/media-object.html#basics