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 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 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"
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)
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"
Minimal list
Class Aptent Taciti Sociosqu Ad
Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor, Lacus
Media 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"
A 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"
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"