MEDIA OBJECTS

The media object helps build complex and repetitive components where some media is positioned alongside content that doesn’t wrap around said media based on flexbox property.

STANDARD MEDIA OBJECTS

a Standard Media Objects With Basic Theme Just a Simple UI to be Easy override and Easier To Customize With Sass

<!-- Media Object -->
<div class="media-object">
    <img src="<http://via.placeholder.com/80x80>" alt="media element" class="media" />
    <div class="media-content">
        <h6>Media Title Or UserName Example</h6>
        <p>In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam id dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Mauris dictum facilisis augue. Fusce tellus. Pellentesque arcu.</p>
    </div>
</div>
<!-- // Media Object -->

NESTED MEDIA OBJECTS

The Media Objects Can be Nested inside each other by Putin another media object inside a media object content wrapper.

<!-- Media Object -->
<div class="media-object">
    <a href="#" class="media"><img src="<http://via.placeholder.com/80x80>" alt="media element"></a>
    <div class="media-content">
        <h6>Media Title Or UserName Example</h6>
        <p>In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam id dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Mauris dictum facilisis augue. Fusce tellus. Pellentesque arcu.</p>
        <!-- Nested Media Object -->
        <div class="media-object">
            <a href="#" class="media"><img src="<http://via.placeholder.com/80x80>" alt="media element"></a>
            <div class="media-content">
                <h6>Media Title Or UserName Example</h6>
                <p>In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam id dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Mauris dictum facilisis augue. Fusce tellus. Pellentesque arcu.</p>
            </div>
        </div>
        <!-- // Nested Media Object -->
    </div>
</div>
<!-- // Media Object -->

BOXED MEDIA OBJECTS

the boxed media objects is a media object with modern boxed style.

<!-- Media Object -->
<div class="media-object boxed">
    <a href="#" class="media"><img src="<http://via.placeholder.com/140x130>" alt="media element"></a>
    <div class="media-content">
        <h6>Media Title Or UserName Example</h6>
        <p>In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam id dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Mauris dictum facilisis augue. Fusce tellus. Pellentesque arcu.</p>
    </div>
</div>
<!-- // Media Object -->

NESTED BOXED MEDIA OBJECTS

for making a nested media objects with the boxed style simply give the nested object class name nested-level to media object wrapper directly.

<!-- Media Object -->
<div class="media-object boxed">
    <a href="#" class="media"><img src="<http://via.placeholder.com/140x130>" alt="media element"></a>
    <div class="media-content">
        <h6>Media Title Or UserName Example</h6>
        <p>In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam id dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Mauris dictum facilisis augue. Fusce tellus. Pellentesque arcu.</p>
    </div>
</div>
<!-- // Media Object -->

<!-- Nested Media Object -->
<div class="media-object boxed nested-level">
    <a href="#" class="media"><img src="<http://via.placeholder.com/140x130>" alt="media element"></a>
    <div class="media-content">
        <h6>Media Title Or UserName Example</h6>
        <p>In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam id dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Mauris dictum facilisis augue. Fusce tellus. Pellentesque arcu.</p>
    </div>
</div>
<!-- // Nested Media Object -->

ALIGNMENT UTILITIES

media objects supports alignment for the elements with flexbox like the grid system.