Primer CSS Layout The media object

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. 

Output:

👁 Image

Example 2: Below example demonstrates a double-sided media object container with a flexible center.

Output:

👁 Image

Reference: https://primer.style/product/css-utilities/#the-media-object