Foundation CSS Media Object Basics

Last Updated : 02 Mar, 2022

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.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <!-- Compressed CSS -->
    <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> 
</head> 
  
<body> 
    <center> 
        <h2 style="color: green;"> 
            GeeksforGeeks 
        </h2> 
        <h3>Foundation CSS Media Object Basics</h3> 
    </center> 
  
    <div class="media-object"> 
        <div class="media-object-section"> 
            <div class="thumbnail"> 
                <img src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> 
            </div> 
        </div> 
        <div class="media-object-section main-section"> 
            <h4> <strong>GeeksforGeeks</strong> </h4> 
            <p>A Computer Science portal for geeks. 
               It contains well written, well thought  
               and well explained computer science and 
               programming articles.</p> 
  
            <p>A Computer Science portal for geeks. 
               It contains well written, well thought  
               and well explained computer science and 
               programming articles.</p> 
  
        </div> 
    </div> 
</body> 
  
</html>

Output:

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

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <!-- Compressed CSS -->
    <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> 
</head> 
  
<body style="padding: 1%;"> 
    <center> 
        <h2 style="color: green;"> 
            GeeksforGeeks 
        </h2> 
        <h3>Foundation CSS Media Object Basics</h3> 
    </center> 
    <div class="media-object"> 
        <div class="media-object-section"> 
            <iframe width="380" height="300" src= 
"https://www.youtube.com/embed/lQwp_5Hi76Q"> 
            </iframe> 
        </div> 
  
        <div class="media-object-section main-section"> 
            <h4> <strong>GeeksforGeeks</strong> </h4> 
            <p>A Computer Science portal for geeks. 
               It contains well written, well thought  
               and well explained computer science and 
               programming articles.</p> 
  
            <p>A Computer Science portal for geeks. 
               It contains well written, well thought  
               and well explained computer science and 
               programming articles.</p> 
  
        </div> 
        <div class="media-object-section"> 
            <div class="thumbnail"> 
                <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20210201163555/gfg-300x300.jpeg"> 
            </div> 
        </div> 
    </div> 
</body> 
  
</html>