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=
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" 
          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=
"https://media.geeksforgeeks.org/wp-content/uploads/20220221132017/download.png" 
                 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>
    <link href="https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" 
          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=
"https://media.geeksforgeeks.org/wp-content/uploads/20220221132017/download.png" 
                 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>