Blaze UI Medias

Last Updated : 27 Apr, 2022

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.

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" />
    <link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" />
</head>
 
<body>
    <div class="u-centered">
        <h1 style="color:green">
            GeeksforGeeks
        </h1>
         
        <h2>Medias in Blaze UI</h2>
    </div>
 
    <div class="o-container o-container--xlarge c-card">
        <div class="c-card__item c-card__item--brand o-media">
            <div class="o-media__image">
                <img class="o-image" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220221132017/download.png" />
            </div>
            <div class="o-media__body">
                <h2 class="c-heading">GeeksforGeeks
                    <span class="c-heading__sub">
                        Portal
                    </span>
                </h2>
                <p class="c-paragraph">
                    GeeksforGeeks is a portal for geeks. 
                    A place where you can learn,
                    share and get help from other geeks. 
                    Find various things on the portal
                    like Jobs, Hackathons, Programming 
                    Competitions, Coding Questions, etc.
                </p>
 
 
            </div>
        </div>
    </div>
</body>
 
</html>

Output:

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

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" />
    <link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" />
</head>
 
<body>
    <div class="u-centered">
        <h1 style="color: green">
            GeeksforGeeks
        </h1>
         
        <h2>Medias in Blaze UI</h2>
    </div>
 
    <div class="o-container o-container--small c-card">
        <div class="c-card__item o-media">
            <div class="o-media__image o-media__image--bottom">
                <img class="o-image"
                    src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220221132017/download.png" />
            </div>
 
            <div class="o-media__body">
                <h2 class="c-heading">GeeksforGeeks
                    <span class="c-heading__sub">Jobs</span>
                </h2>
                <p class="c-paragraph">
                    Find jobs at geeksforgeeks.
                    They have a large pool of 
                    companies who are eager to hire
                    for the best candidates.
                </p>
 
 
            </div>
        </div>
    </div>
</body>
 
</html>