Foundation CSS Media Object

Last Updated : 10 Jun, 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. It has numerous pre-built website component that makes our website look professional and improves the user experience of the website. One such useful component in Foundation CSS is Media Object.

In this article, we will learn about the Media Object component of Foundation CSS. The Media object is a very useful component for displaying an image along with some content usually text in different alignment with it. We can also create nested media objects and grids using the different features of the media object.

Foundation CSS Media Object:

media-object: This class is the container class for creating media objects.
media-object-section: This class denotes the different sections of the media object.
stack-on-small: This class will allow the images will get a width of 100% and the text will resize and even be stacked when the screen size becomes small.

Section Alignment: In Foundation CSS, each section is aligned to the top by default. Now, we can change the alignment of each section using the below classes:

middle: This class aligns the section to the middle of the media object container.
bottom: This class aligns the section to the bottom of the media object container.
align-self-middle: This class aligns each section to the middle.
align-self-bottom: This class aligns each section to the top of the media object container.
align-middle: This class aligns all the child sections of the media object container to the middle all at once.
align-bottom: This class aligns all the child sections of the media object container to the bottom all at once.

Syntax:

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

Example 1: The below example is of two media objects. The first one is bottom aligned and the second one is middle aligned. But both are responsive.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <!-- CDN Links for Foundation CSS -->
    <link rel="stylesheet" href= 
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css"> 
  
    <!-- CDN for jQuery -->
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"> 
    </script> 
  
    <!-- CDN Links for Foundation JS -->
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/js/foundation.min.js"> 
    </script> 
</head> 
  
<body style="margin: 20px;"> 
    <h1 style="color: green;">GeeksforGeeks</h1> 
    <h3>Foundation CSS Media Object</h3> 
      
  
<p>Middle aligned media object</p> 
  
  
    <div> 
        <div class="media-object stack-for-small"> 
            <div class="media-object-section middle"> 
                <img width="90px" height="90px" src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220313120926/image-195x200.png"> 
            </div> 
            <div class="media-object-section main-section"> 
                <h4>Header of the first media object</h4> 
                <p> 
                  This is the sample text for the displaying  
                  the media object in Foundation CSS. This 
                  article about media object is published in 
                  GeeksforGeeks website. GeeksforGeeks is the 
                  best website for gaining knowledge about  
                  different technologies and computer subjects. 
                  You can find lots of articles published on  
                  GeeksforGeeks website on Foundation CSS. It  
                  a great source for learning and mastering any 
                  technology.GeeksforGeeks is the best website 
                  for gaining knowledge about different technologies 
                  and computer subjects. You can find lots of 
                  articles published on GeeksforGeeks website  
                  on Foundation CSS. It a great source for  
                  learning and mastering any technology. 
                </p> 
  
  
            </div> 
        </div> 
    </div> 
    <p>Bottom aligned media object</p> 
  
  
    <div class="media-object stack-for-small"> 
        <div class="media-object-section bottom"> 
            <img width="90px" height="90px" src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220313120926/image-195x200.png" > 
        </div> 
        <div class="media-object-section main-section"> 
            <h4>Header of the second media object</h4> 
            <p> 
              This is the sample text for the displaying  
              the media object in Foundation CSS. This 
              article about media object is published in 
              GeeksforGeeks website. GeeksforGeeks is the 
              best website for gaining knowledge about  
              different technologies and computer subjects. 
              You can find lots of articles published on  
              GeeksforGeeks website on Foundation CSS. It  
              a great source for learning and mastering any 
              technology.GeeksforGeeks is the best website 
              for gaining knowledge about different technologies 
              and computer subjects. You can find lots of 
              articles published on GeeksforGeeks website  
              on Foundation CSS. It a great source for  
              learning and mastering any technology. 
            </p> 
  
  
        </div> 
    </div> 
  
    <script> 
        $(document).foundation();  
    </script> 
</body> 
  
</html>

Output:

Example 2: We can easily create a nested media objects using by inserting a media object inside another media object.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <!-- CDN Links for Foundation CSS -->
    <link rel="stylesheet" href= 
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css"> 
  
    <!-- CDN for jQuery -->
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"> 
    </script> 
  
    <!-- CDN Links for Foundation JS -->
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/js/foundation.min.js"> 
    </script> 
</head> 
  
<body style="margin: 20px;"> 
    <h1 style="color: green;">GeeksforGeeks</h1> 
    <h3>Foundation CSS Media Object</h3> 
    <p>Middle aligned media object</p> 
  
  
    <div class="media-object"> 
        <div class="media-object-section"> 
            <div class="thumbnail"> 
                <img width="90px" height="90px" src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220313120926/image-195x200.png"> 
            </div> 
        </div> 
        <div class="media-object-section"> 
            <h4>I'm the parent</h4> 
            <p> 
                This is the sample text for the displaying  
                the media object in Foundation CSS. This 
                article about media object is published in 
                GeeksforGeeks website. GeeksforGeeks is the 
                best website for gaining knowledge about  
                different technologies and computer subjects. 
                You can find lots of articles published on  
                GeeksforGeeks website on Foundation CSS. It  
                a great source for learning and mastering any 
                technology.GeeksforGeeks is the best website 
                for gaining knowledge about different technologies 
                and computer subjects. You can find lots of 
                articles published on GeeksforGeeks website  
                on Foundation CSS. It a great source for  
                learning and mastering any technology. 
            </p> 
  
  
  
            <!-- Nested media object starts here -->
            <div class="media-object"> 
                <div class="media-object-section"> 
                    <div class="thumbnail"> 
                        <img width="90px" height="90px" src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220313120926/image-195x200.png"> 
                    </div> 
                </div> 
                <div class="media-object-section"> 
                    <h4>I'm the first child.</h4> 
                    <p> 
                      This is the sample text for the displaying  
                      the media object in Foundation CSS. This 
                      article about media object is published in 
                      GeeksforGeeks website. GeeksforGeeks is the 
                      best website for gaining knowledge about  
                      different technologies and computer subjects. 
                      You can find lots of articles published on  
                      GeeksforGeeks website on Foundation CSS. It  
                      a great source for learning and mastering any 
                      technology.GeeksforGeeks is the best website 
                      for gaining knowledge about different technologies 
                      and computer subjects. You can find lots of 
                      articles published on GeeksforGeeks website  
                      on Foundation CSS. It a great source for  
                      learning and mastering any technology. 
                    </p> 
  
  
                </div> 
            </div> 
            <div class="media-object"> 
                <div class="media-object-section"> 
                    <div class="thumbnail"> 
                        <img width="90px" height="90px" src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220313120926/image-195x200.png"> 
                    </div> 
                </div> 
                <div class="media-object-section"> 
                    <h4>I'm the second child.</h4> 
                    <p> 
                      This is the sample text for the displaying  
                      the media object in Foundation CSS. This 
                      article about media object is published in 
                      GeeksforGeeks website. GeeksforGeeks is the 
                      best website for gaining knowledge about  
                      different technologies and computer subjects. 
                      You can find lots of articles published on  
                      GeeksforGeeks website on Foundation CSS. It  
                      a great source for learning and mastering any 
                      technology.GeeksforGeeks is the best website 
                      for gaining knowledge about different technologies 
                      and computer subjects. You can find lots of 
                      articles published on GeeksforGeeks website  
                      on Foundation CSS. It a great source for  
                      learning and mastering any technology. 
                    </p> 
  
  
                </div> 
            </div> 
            <!-- And ends here -->
        </div> 
    </div> 
  
    <script> 
        $(document).foundation();  
    </script> 
</body> 
  
</html>

Output:

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

Suggest improvement

Foundation CSS Dropdown

Foundation CSS Reveal

Share your thoughts in the comments

Foundation Setup

Foundation Containers

Foundation Navigation

Foundation Typography

Foundation Controls

Foundation Media

Foundation Plugins

Foundation Utilities

Foundation Setup

Foundation Containers

Foundation Navigation

Foundation Typography

Foundation Controls

Foundation Media

Foundation Plugins

Foundation Utilities

Foundation CSS Media Object

HTML

HTML

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?