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