Foundation CSS Kitchen Sink Media Object
Last Updated :
27 Feb, 2022
Foundation CSS is the frontend framework of CSS that is used to build responsive websites, apps, and emails that work perfectly on any device. It is written using HTML, CSS, and Javascript and is used by many famous companies like Amazon, Facebook, eBay, etc. It uses packages like Grunt and Libsass for fast coding and controlling and Saas compiler to make development faster.
Kitchen Sink has the elements to work in websites and applications. Media Objects are the objects such as images, videos, gifs, etc. and we can place these objects either on the left side or right side of our content. It is used to display an item along with the content usually text.
Foundation CSS Kitchen Sink Media Object Classes:
- media-object: It is used to create the media object division.
- media-object-section: It is used to create the media object sections.
Syntax:
<div class="media-object">
<div class="media-object-section">
<!-- some content or graphics -->
</div>
<div class="media-object-section">
<!-- some content or graphic -->
</div>
</div>
Example 1:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Foundation CSS Kitchen Sink Media Object</title>
<link rel="stylesheet"
href=
<script src=
</script>
<script src=
</script>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>Foundation CSS Kitchen Sink Media Object</h3>
<div class="media-object">
<div class="media-object-section">
<img alt="gfg"
src=
</div>
<div class="media-object-section">
<h4><strong>About 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>
</div>
</div>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
|
Output:
Foundation CSS Kitchen Sink Media Object
Example 2:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Foundation CSS Kitchen Sink Media Object</title>
<link rel="stylesheet"
href=
<script src=
</script>
<script src=
</script>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>Foundation CSS Kitchen Sink Media Object</h3>
<div class="media-object">
<div class="media-object-section">
<img alt="gfg"
height="280"
width="320"
src=
</div>
<div class="media-object-section">
<h4><strong>About 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>
</div>
<div class="media-object-section">
<h4><strong>Youtube video</strong></h4>
<iframe width="380"
height="280"
src=
</iframe>
</div>
</div>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
|
Output:
Foundation CSS Kitchen Sink Media Object
Reference: https://get.foundation/sites/docs/kitchen-sink.html#media-object
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...