Media object

.Media

The classic media object shows an image (avatar, icon or other "media") to the side of some textual content.

This is the media object as implemented in Solved by Flexbox

Example

Atomia

This is a media object

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus semper auctor tellus a condimentum. Sed ultrices vulputate libero, faucibus tristique nibh tempor eget. Suspendisse hendrerit pulvinar nunc, eget tincidunt urna iaculis pulvinar.

Markup

<div class="Media">
    <img class="Media-figure u-bg-color-blue" src="img/atomia.svg" width="100px" alt="Atomia">
    <div class="Media-body">
        <h3 class="Media-title">This is a media object</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus semper auctor tellus a condimentum. Sed ultrices vulputate libero, faucibus tristique nibh tempor eget. Suspendisse hendrerit pulvinar nunc, eget tincidunt urna iaculis pulvinar.</p>
    </div>
</div>