Foundation CSS Media Object Sass Reference
Last Updated :
09 Sep, 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.
Variable Used:
| Variable-Name |
Description |
Type |
Default-Value |
| $mediaobject-margin-bottom |
This variable is used to define the bottom margin of a media object. |
Number |
$global-margin |
| $mediaobject-section-padding |
This variable is used to define the left and right padding on sections within a media object. |
Number |
$global-padding |
| $mediaobject-image-width-stacked |
This variable is used to define the width of images within a media object when the object is stacked vertically. |
Number |
100% |
Example 1: In the below code, we will use the above variable to demonstrate the use of media objects with margin property.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
<link rel="stylesheet" href="style.css">
</head>
<body>
<center>
<h2 style="color: green;">
GeeksforGeeks
</h2>
<h3>A computer science portal for geeks </h3>
</center>
<div class="media-object">
<div class="media-object-section">
<div class="thumbnail">
<img src=
</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>
|
SASS Code:
$global-margin: 120px;
.media-object {
margin:$global-margin;
}
Compiled CSS Code:
.media-object {
margin: 120px;
}
Output:
Example 2: In the below code, we will use the above variable to demonstrate the use of media objects with padding property.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
<link rel="stylesheet" href="style.css">
</head>
<body>
<center>
<h2 style="color: green;">
GeeksforGeeks
</h2>
<h3>A computer science portal for geeks </h3>
</center>
<div class="media-object">
<div class="media-object-section">
<div class="thumbnail">
<img src=
</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>
|
SASS Code:
$mediaobject-section-padding: 120px;
.media-object {
padding:$mediaobject-section-padding;
}
Compiled CSS Code:
.media-object {
padding: 120px;
}
Output:
Reference: https://get.foundation/sites/docs/media-object.html
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...