Blaze UI Medias

Blaze UI is a free, open-source UI toolkit to build a great website. It provides you with various features like responsiveness, custom components, etc. 

Media objects are mostly used for comment engines and other images and related text displays. With media objects, we can add images, and texts like heading or paragraphs and can make media object containers. In this article, we will see about media objects in Blaze UI. 

Blaze UI Medias classes:

• o-media: This class is used to create a media object in Blaze UI.
• o-media__image: This class is used to add a media image in Blaze UI.
• o-media__body: This class is used to add media body like text or headings in Blaze UI.

The images in media objects can be positioned in different ways with 3 modifiers.

• --top: It is used to append the image at the top of the media object.
• --center: It is used to append the image at the center of the media object.
• --bottom: It is used to append the image at the bottom in the media object.

Syntax:

<div class="c-card">
 <div class="c-card__item c-card__item--brand o-media">
 <div class="o-media__image">
 <img class="o-image" src="https://"/>
 </div>
 <div class="o-media__body">
 <h2 class="c-heading">...
 <span class="c-heading__sub">
 ...
 </span></h2>
 <p class="c-paragraph">
 ...
 </p>
 </div>
 </div>
</div>

Example 1: Below example demonstrates the media's object in Blaze UI.

Output:

Example 2: Below example demonstrates the media object with the bottom position of the image in Blaze UI.

Output:

Reference: https://www.blazeui.com/objects/medias/