The media
module is meant to present structured data to the user in the form of a list.
It is usually recommended to annotate the structured data with relevant semantic information to optimize search engine indexing. Schema.org provides a list of possible data types that can be used, and we have various examples for Courses, Events, News articles, Persons and Publications.
The media module structureThe media module structure
media-list
: a wrapper for media elements displayed as a list (optional)media
: the media element wrappermedia-visual
: a visual representation for the media elementmedia-banner
: a banner to put over the visualmedia-header
: the media headermedia-header-full
: disables auto-truncating of the header
media-content
: the media contentmedia-info
: secondary information for the media elementmedia-info-quiet
: a more lightweight version of the media info
media-footer
: the media footer
Media listMedia list
Nulla Facilisi. Duis Aliquet
In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec.
Class Aptent Taciti Sociosqu Ad
Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in.
Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor, Lacus
Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora. Read more about "Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor, Lacus"
<div class="media-list">
<div class="media">
<div class="g-row">
<div class="g-span-1_4">
<img src="//lorempixel.com/160/90/abstract/1/" alt="Abstract image" class="media-visual">
</div>
<div class="g-span-3_4">
<span class="badge">Tag1</span>
<h2 class="media-header"><a href="#">Nulla Facilisi. Duis Aliquet</a></h2>
<div class="media-content">
<span class="media-info">Nulla Facilisi. Duis — </span>
<p>In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec.</p>
</div>
</div>
</div>
<div class="g-row">
<div class="g-span-1_1">
<div class="media-footer">
<a href="#" class="btn btn-inline"><span class="icon icon-arrow-right_button" role="presentation" hidden="hidden"></span>Link 1</a>
<a href="#" class="btn btn-inline"><span class="icon icon-arrow-right_button" role="presentation" hidden="hidden"></span>Link 2</a>
</div>
</div>
</div>
</div>
<div class="media">
<div class="g-row">
<div class="g-span-1_4">
<img src="//lorempixel.com/160/90/abstract/2/" alt="Abstract image" class="media-visual">
</div>
<div class="g-span-3_4">
<span class="badge">Tag2</span>
<h2 class="media-header">Class Aptent Taciti Sociosqu Ad</h2>
<div class="media-content">
<span class="media-info">Nullam In Dui — </span>
<p>Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in.</p>
</div>
</div>
</div>
<div class="g-row">
<div class="g-span-1_1">
<div class="media-footer">
<a href="#" class="btn btn-inline"><span class="icon icon-arrow-right_button" role="presentation" hidden="hidden"></span>Link 1</a>
<a href="#" class="btn btn-inline"><span class="icon icon-arrow-right_button" role="presentation" hidden="hidden"></span>Link 2</a>
</div>
</div>
</div>
</div>
<div class="media">
<div class="g-row">
<div class="g-span-1_4">
<div class="media-visual">
<img src="//lorempixel.com/160/90/abstract/3/" alt="Abstract image">
<span class="media-banner badge badge-error">Special</span>
</div>
</div>
<div class="g-span-3_4">
<span class="badge">Tag3</span>
<h2 class="media-header">Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor, Lacus</h2>
<div class="media-content">
<span class="media-info">Duis Aliquet Egestas — </span>
<p>Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora. <a class="more" href="?more" title="Read more"><span class="visuallyhidden">Read more about "Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor, Lacus"</span></a></p>
</div>
</div>
</div>
<div class="g-row">
<div class="g-span-1_1">
<div class="media-footer">
<a href="#" class="btn btn-inline"><span class="icon icon-arrow-right_button" role="presentation" hidden="hidden"></span>Link 1</a>
<a href="#" class="btn btn-inline"><span class="icon icon-arrow-right_button" role="presentation" hidden="hidden"></span>Link 2</a>
</div>
</div>
</div>
</div>
</div>
Note that you can add the .media-header-expandable
class to the header in a list in order to have the full title display when the mouse is hovering on it (instead of only seeing the truncated version).
You can also use .media-list-bordered
to wrap the list with a top and bottom border.
Media list (auto-truncated)Media list (auto-truncated)
Nulla Facilisi. Duis Aliquet
In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec.
Class Aptent Taciti Sociosqu Ad
Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in.
Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor, Lacus
Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora. Read more about "Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor, Lacus"
<div class="media-list">
<div class="media">
<div class="g-row">
<div class="g-span-1_4">
<div class="media-visual">
<img src="//lorempixel.com/160/90/abstract/1/" alt="Abstract image">
</div>
</div>
<div class="g-span-3_4 g-span-row1">
<h2 class="media-header"><a href="#">Nulla Facilisi. Duis Aliquet</a></h2>
<div class="media-content" data-ellipsis="html" data-keep="more"><span class="media-info">Nulla Facilisi. Duis — </span><p>In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec.</p></div>
</div>
</div>
<div class="g-row">
<div class="g-span-1_1">
<div class="media-footer">
<a href="#" class="btn btn-inline"><span class="icon icon-arrow-right_button" role="presentation" hidden="hidden"></span>Link 1</a>
<a href="#" class="btn btn-inline"><span class="icon icon-arrow-right_button" role="presentation" hidden="hidden"></span>Link 2</a>
</div>
</div>
</div>
</div>
<div class="media">
<div class="g-row">
<div class="g-span-1_4">
<div class="media-visual">
<img src="//lorempixel.com/160/90/abstract/2/" alt="Abstract image">
</div>
</div>
<div class="g-span-3_4 g-span-row1">
<h2 class="media-header">Class Aptent Taciti Sociosqu Ad</h2>
<div class="media-content" data-ellipsis="html" data-keep="more"><span class="media-info">Nullam In Dui — </span><p>Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in.</p></div>
</div>
</div>
<div class="g-row">
<div class="g-span-1_1">
<div class="media-footer">
<a href="#" class="btn btn-inline"><span class="icon icon-arrow-right_button" role="presentation" hidden="hidden"></span>Link 1</a>
<a href="#" class="btn btn-inline"><span class="icon icon-arrow-right_button" role="presentation" hidden="hidden"></span>Link 2</a>
</div>
</div>
</div>
</div>
<div class="media">
<div class="g-row">
<div class="g-span-1_4">
<div class="media-visual">
<img src="//lorempixel.com/160/90/abstract/3/" alt="Abstract image">
<span class="media-banner badge badge-error">Special</span>
</div>
</div>
<div class="g-span-3_4 g-span-row1">
<h2 class="media-header">Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor, Lacus</h2>
<div class="media-content" data-ellipsis="html" data-keep="more"><span class="media-info">Duis Aliquet Egestas — </span><p>Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora. <a class="more" href="?more" title="Read more"><span class="visuallyhidden">Read more about "Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor, Lacus"</span></a></p></div>
</div>
</div>
<div class="g-row">
<div class="g-span-1_1">
<div class="media-footer">
<a href="#" class="btn btn-inline"><span class="icon icon-arrow-right_button" role="presentation" hidden="hidden"></span>Link 1</a>
<a href="#" class="btn btn-inline"><span class="icon icon-arrow-right_button" role="presentation" hidden="hidden"></span>Link 2</a>
</div>
</div>
</div>
</div>
</div>
Minimal listMinimal list
Class Aptent Taciti Sociosqu Ad
Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor, Lacus
<div class="media-list g-span-1_2">
<div class="media">
<div class="g-row">
<div class="g-span-1_3">
<div class="media-visual">
<img src="//lorempixel.com/160/90/abstract/1/" alt="Abstract image" class="media-visual">
</div>
</div>
<div class="g-span-2_3">
<span class="badge">Tag1</span>
<h2 class="media-header media-header-full"><a href="#">Nulla Facilisi. Duis Aliquet</a></h2>
<div class="media-content">
<span class="media-info media-info-quiet">Nulla Facilisi. Duis</span>
</div>
</div>
</div>
</div>
<div class="media">
<div class="g-row">
<div class="g-span-1_3">
<div class="media-visual">
<img src="//lorempixel.com/160/90/abstract/2/" alt="Abstract image" class="media-visual">
</div>
</div>
<div class="g-span-2_3">
<span class="badge">Tag2</span>
<h2 class="media-header media-header-full">Class Aptent Taciti Sociosqu Ad</h2>
<div class="media-content">
<span class="media-info media-info-quiet">Nullam In Dui</span>
</div>
</div>
</div>
</div>
<div class="media">
<div class="g-row">
<div class="g-span-1_3">
<div class="media-visual">
<img src="//lorempixel.com/160/90/abstract/3/" alt="Abstract image">
<span class="media-banner badge badge-error">Special</span>
</div>
</div>
<div class="g-span-2_3">
<span class="badge">Tag3</span>
<h2 class="media-header media-header-full">Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor, Lacus</h2>
<div class="media-content">
<span class="media-info media-info-quiet">Duis Aliquet Egestas</span>
</div>
</div>
</div>
</div>
</div>
Media gridMedia grid
Nulla Facilisi. Duis Aliquet
In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec.
Class Aptent Taciti Sociosqu Ad
Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in.
Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor, Lacus
Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora. Read more about "Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor, Lacus"
<div class="g-row">
<div class="g-span-1_3">
<div class="media">
<img src="//lorempixel.com/160/90/abstract/1/" alt="Abstract image" class="media-visual">
<span class="badge">Tag1</span>
<h2 class="media-header"><a href="#">Nulla Facilisi. Duis Aliquet</a></h2>
<div class="media-content">
<span class="media-info">Nulla Facilisi. Duis</span>
<p>In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec.</p>
</div>
<div class="media-footer">
<a href="#" class="btn btn-inline"><span class="icon icon-arrow-right_button" role="presentation" hidden="hidden"></span>Link 1</a>
<a href="#" class="btn btn-inline"><span class="icon icon-arrow-right_button" role="presentation" hidden="hidden"></span>Link 2</a>
</div>
</div>
</div>
<div class="g-span-1_3">
<div class="media">
<img src="//lorempixel.com/160/90/abstract/2/" alt="Abstract image" class="media-visual">
<span class="badge">Tag2</span>
<h2 class="media-header">Class Aptent Taciti Sociosqu Ad</h2>
<div class="media-content">
<span class="media-info">Nullam In Dui</span>
<p>Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in.</p>
</div>
<div class="media-footer">
<a href="#" class="btn btn-inline"><span class="icon icon-arrow-right_button" role="presentation" hidden="hidden"></span>Link 1</a>
<a href="#" class="btn btn-inline"><span class="icon icon-arrow-right_button" role="presentation" hidden="hidden"></span>Link 2</a>
</div>
</div>
</div>
<div class="g-span-1_3">
<div class="media">
<img src="//lorempixel.com/160/90/abstract/3/" alt="Abstract image" class="media-visual">
<span class="badge">Tag3</span>
<h2 class="media-header">Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor, Lacus</h2>
<div class="media-content">
<span class="media-info">Duis Aliquet Egestas</span>
<p>Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora. <a class="more" href="?more" title="Read more"><span class="visuallyhidden">Read more about "Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor, Lacus"</span></a></p>
</div>
<div class="media-footer">
<a href="#" class="btn btn-inline"><span class="icon icon-arrow-right_button" role="presentation" hidden="hidden"></span>Link 1</a>
<a href="#" class="btn btn-inline"><span class="icon icon-arrow-right_button" role="presentation" hidden="hidden"></span>Link 2</a>
</div>
</div>
</div>
</div>
A media list with the first element emphasizedA media list with the first element emphasized
Nulla Facilisi. Duis Aliquet
In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec. Read more about "Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor, Lacus"
Class Aptent Taciti Sociosqu Ad
Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in. Read more about "Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor, Lacus"
Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor
Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora. Read more about "Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor, Lacus"
Nulla Facilisi. Duis Aliquet
In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec. Read more about "Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor, Lacus"
Class Aptent Taciti Sociosqu Ad
Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in. Read more about "Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor, Lacus"
Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor
Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora. Read more about "Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor, Lacus"
<div class="media-list media-list-jumbo">
<div class="media g-span-1_2">
<div class="g-row">
<div class="g-span-1_1">
<div class="media-visual">
<img src="//lorempixel.com/160/90/abstract/1/" alt="Abstract image">
</div>
</div>
<div class="g-span-1_1">
<h2 class="media-header media-header-full"><a href="#">Nulla Facilisi. Duis Aliquet</a></h2>
<div class="media-content" data-ellipsis="html" data-keep="more"><span class="media-info">01.01.2001</span><p>In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec. <a class="more" href="?more" title="Read more"><span class="visuallyhidden">Read more about "Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor, Lacus"</span></a></p></div>
</div>
</div>
</div>
<div class="media g-span-1_2">
<div class="g-row">
<div class="g-span-1_2">
<div class="media-visual">
<img src="//lorempixel.com/160/90/abstract/2/" alt="Abstract image">
</div>
</div>
<div class="g-span-1_2">
<h2 class="media-header media-header-full"><a href="#">Class Aptent Taciti Sociosqu Ad</a></h2>
<div class="media-content" data-ellipsis="html" data-keep="more"><span class="media-info">02.02.2002</span><p>Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in. <a class="more" href="?more" title="Read more"><span class="visuallyhidden">Read more about "Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor, Lacus"</span></a></p></div>
</div>
</div>
</div>
<div class="media g-span-1_2">
<div class="g-row">
<div class="g-span-1_2">
<div class="media-visual">
<img src="//lorempixel.com/160/90/abstract/3/" alt="Abstract image">
<span class="media-banner badge badge-error">Special</span>
</div>
</div>
<div class="g-span-1_2">
<h2 class="media-header media-header-full"><a href="#">Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor</a></h2>
<div class="media-content" data-ellipsis="html" data-keep="more"><span class="media-info">03.03.2003</span><p>Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora. <a class="more" href="?more" title="Read more"><span class="visuallyhidden">Read more about "Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor, Lacus"</span></a></p></div>
</div>
</div>
</div>
<div class="media g-span-1_2">
<div class="g-row">
<div class="g-span-1_2">
<div class="media-visual">
<img src="//lorempixel.com/160/90/abstract/1/" alt="Abstract image">
</div>
</div>
<div class="g-span-1_2">
<h2 class="media-header media-header-full"><a href="#">Nulla Facilisi. Duis Aliquet</a></h2>
<div class="media-content" data-ellipsis="html" data-keep="more"><span class="media-info">01.01.2001</span><p>In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec. <a class="more" href="?more" title="Read more"><span class="visuallyhidden">Read more about "Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor, Lacus"</span></a></p></div>
</div>
</div>
</div>
<div class="media g-span-1_2">
<div class="g-row">
<div class="g-span-1_2">
<div class="media-visual">
<img src="//lorempixel.com/160/90/abstract/2/" alt="Abstract image">
</div>
</div>
<div class="g-span-1_2">
<h2 class="media-header media-header-full">Class Aptent Taciti Sociosqu Ad</h2>
<div class="media-content" data-ellipsis="html" data-keep="more"><span class="media-info">02.02.2002</span><p>Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in. <a class="more" href="?more" title="Read more"><span class="visuallyhidden">Read more about "Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor, Lacus"</span></a></p></div>
</div>
</div>
</div>
<div class="media g-span-1_2">
<div class="g-row">
<div class="g-span-1_2">
<div class="media-visual">
<img src="//lorempixel.com/160/90/abstract/3/" alt="Abstract image">
<span class="media-banner badge badge-error">Special</span>
</div>
</div>
<div class="g-span-1_2">
<h2 class="media-header media-header-full">Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor</h2>
<div class="media-content" data-ellipsis="html" data-keep="more"><span class="media-info">03.03.2003</span><p>Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora. <a class="more" href="?more" title="Read more"><span class="visuallyhidden">Read more about "Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor, Lacus"</span></a></p></div>
</div>
</div>
</div>
</div>
Or on a single column:
Nulla Facilisi. Duis Aliquet
In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec. Read more about "Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor, Lacus"
Class Aptent Taciti Sociosqu Ad
Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in. Read more about "Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor, Lacus"
Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor
Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora. Read more about "Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor, Lacus"
Nulla Facilisi. Duis Aliquet
In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec. Read more about "Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor, Lacus"
Class Aptent Taciti Sociosqu Ad
Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in. Read more about "Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor, Lacus"
Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor
Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora. Read more about "Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor, Lacus"
<div class="g-span-1_2">
<div class="media-list media-list-jumbo">
<div class="media">
<div class="g-row">
<div class="g-span-1_1">
<div class="media-visual">
<img src="//lorempixel.com/160/90/abstract/1/" alt="Abstract image">
</div>
</div>
<div class="g-span-1_1">
<h2 class="media-header media-header-full"><a href="#">Nulla Facilisi. Duis Aliquet</a></h2>
<div class="media-content" data-ellipsis="html" data-keep="more"><span class="media-info">01.01.2001</span><p>In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec. <a class="more" href="?more" title="Read more"><span class="visuallyhidden">Read more about "Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor, Lacus"</span></a></p></div>
</div>
</div>
</div>
<div class="media">
<div class="g-row">
<div class="g-span-1_2">
<div class="media-visual">
<img src="//lorempixel.com/160/90/abstract/2/" alt="Abstract image">
</div>
</div>
<div class="g-span-1_2">
<h2 class="media-header media-header-full"><a href="#">Class Aptent Taciti Sociosqu Ad</a></h2>
<div class="media-content" data-ellipsis="html" data-keep="more"><span class="media-info">02.02.2002</span><p>Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in. <a class="more" href="?more" title="Read more"><span class="visuallyhidden">Read more about "Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor, Lacus"</span></a></p></div>
</div>
</div>
</div>
<div class="media">
<div class="g-row">
<div class="g-span-1_2">
<div class="media-visual">
<img src="//lorempixel.com/160/90/abstract/3/" alt="Abstract image">
<span class="media-banner badge badge-error">Special</span>
</div>
</div>
<div class="g-span-1_2">
<h2 class="media-header media-header-full"><a href="#">Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor</a></h2>
<div class="media-content" data-ellipsis="html" data-keep="more"><span class="media-info">03.03.2003</span><p>Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora. <a class="more" href="?more" title="Read more"><span class="visuallyhidden">Read more about "Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor, Lacus"</span></a></p></div>
</div>
</div>
</div>
<div class="media">
<div class="g-row">
<div class="g-span-1_2">
<div class="media-visual">
<img src="//lorempixel.com/160/90/abstract/1/" alt="Abstract image">
</div>
</div>
<div class="g-span-1_2">
<h2 class="media-header media-header-full"><a href="#">Nulla Facilisi. Duis Aliquet</a></h2>
<div class="media-content" data-ellipsis="html" data-keep="more"><span class="media-info">01.01.2001</span><p>In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec. <a class="more" href="?more" title="Read more"><span class="visuallyhidden">Read more about "Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor, Lacus"</span></a></p></div>
</div>
</div>
</div>
<div class="media">
<div class="g-row">
<div class="g-span-1_2">
<div class="media-visual">
<img src="//lorempixel.com/160/90/abstract/2/" alt="Abstract image">
</div>
</div>
<div class="g-span-1_2">
<h2 class="media-header media-header-full">Class Aptent Taciti Sociosqu Ad</h2>
<div class="media-content" data-ellipsis="html" data-keep="more"><span class="media-info">02.02.2002</span><p>Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in. <a class="more" href="?more" title="Read more"><span class="visuallyhidden">Read more about "Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor, Lacus"</span></a></p></div>
</div>
</div>
</div>
<div class="media">
<div class="g-row">
<div class="g-span-1_2">
<div class="media-visual">
<img src="//lorempixel.com/160/90/abstract/3/" alt="Abstract image">
<span class="media-banner badge badge-error">Special</span>
</div>
</div>
<div class="g-span-1_2">
<h2 class="media-header media-header-full">Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor</h2>
<div class="media-content" data-ellipsis="html" data-keep="more"><span class="media-info">03.03.2003</span><p>Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora. <a class="more" href="?more" title="Read more"><span class="visuallyhidden">Read more about "Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor, Lacus"</span></a></p></div>
</div>
</div>
</div>
</div>
</div>