Primer CSS Layout The media object
Last Updated :
02 Jun, 2022
Primer CSS is a free and open-source CSS framework that is built using the GitHub design system for providing support to the broad spectrum of GitHub websites. It helps in creating the foundation of the basic style elements such as spacing, components, typography, color, etc.
In this article, we will see about the media object in primer CSS layout. A media object is a type of container that consists of images and texts and is made up of primer CSS utilities.
Primer CSS Layout media object classes: For creating a media object in primer CSS, there is no specific class given by Primer CSS. You need to compile different classes according to your need.
Syntax:
<div class="clearfix p-3 border">
<div class="float-left p-3 mr-3 color-bg-subtle">
...
</div>
<div class="overflow-hidden">
<p>...</p>
</div>
</div>
Example 1: Below example demonstrates a media object container.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" />
< meta http-equiv = "X-UA-Compatible"
content = "IE=edge" />
< meta name = "viewport"
content = "width=device-width, initial-scale=1.0" />
< title >Primer CSS</ title >
< link href =
rel = "stylesheet" />
</ head >
< body >
< div class = "m-4" >
< h1 style = "color:green" >GeeksforGeeks</ h1 >
< h2 >Primer CSS Layout Media Object</ h2 >
</ div >
< div class = "clearfix p-3 border m-4" >
< div class = "float-left mr-3" >
< img src =
width = "80" alt = "" >
</ div >
< div class = "overflow-hidden" >
< p >Welcome to GeeksforGeeks! It is a place
for all coders and geeks who want to learn
computer science skills.</ p >
</ div >
</ div >
</ body >
</ html >
|
Output:
Example 2: Below example demonstrates a double-sided media object container with a flexible center.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" />
< meta http-equiv = "X-UA-Compatible"
content = "IE=edge" />
< meta name = "viewport"
content = "width=device-width, initial-scale=1.0" />
< title >Primer CSS</ title >
rel = "stylesheet" />
</ head >
< body >
< div class = "m-4" >
< h1 style = "color:green" >GeeksforGeeks</ h1 >
< h2 >Primer CSS Layout Media Object</ h2 >
</ div >
< div class = "clearfix p-3 border m-4" >
< div class = "float-left mr-3" >
< img src =
width = "80" alt = "" >
</ div >
< div class = "float-right ml-3 p-5 color-bg-success" >
GFG Premium
</ div >
< div class = "overflow-hidden" >
< p >Are you a Geek! Then where are you,
come and explore GeeksforGeeks premium portal
and get premium job access to all the jobs.</ p >
</ div >
</ div >
</ body >
</ html >
|
Output:
Reference: https://primer.style/css/utilities/layout#the-media-object
Share your thoughts in the comments
Please Login to comment...