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.

Sass Customize

in order to edit the Media Objects you can use the css class's to overide the theme or you can edit it with sass Tornado Folder/SCSS/elements/_media-objects.scss and do not forget to compile the main files of the framework Tornado Folder/SCSS/tornado.scss and tornado-rtl.scss.

Standard Media Objects

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

Media Title Or UserName Example

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.


<!-- 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>
<!-- // 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 Title Or UserName Example


<!-- 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 Title Or UserName Example


<!-- 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 Title Or UserName Example


<!-- 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.

Class Name	element	description
align-center-y	media-object wrapper	Align All Objects to The Center Vertically.
align-start-y	media-object wrapper	Align All Objects Vertically to The Top
align-end-y	media-object wrapper	Align All Objects Vertically to The Bottom
Self Alignment
align-self-start	Object	Align Object Vertically to The Top
align-self-center	Object	Align Object Vertically to The Center
align-self-end	Object	Align Object Vertically to The Bottom

Next Hero Area Previous Breadcrumb