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 wrapper
  • media-visual: a visual representation for the media element
  • media-banner: a banner to put over the visual
  • media-header: the media header
    • media-header-full: disables auto-truncating of the header
  • media-content: the media content
  • media-info: secondary information for the media element
    • media-info-quiet: a more lightweight version of the media info
  • media-footer: the media footer

Media list

Abstract image
Tag1

Nulla Facilisi. Duis Aliquet

Nulla Facilisi. Duis — 

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.

Abstract image
Tag2

Class Aptent Taciti Sociosqu Ad

Nullam In Dui — 

Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in.

Abstract image Special
Tag3

Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor, Lacus

Duis Aliquet Egestas — 

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)

Abstract image

Nulla Facilisi. Duis Aliquet

Nulla Facilisi. Duis — 

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.

Abstract image

Class Aptent Taciti Sociosqu Ad

Nullam In Dui — 

Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in.

Abstract image Special

Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor, Lacus

Duis Aliquet Egestas — 

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

Abstract image
Tag1

Nulla Facilisi. Duis Aliquet

Nulla Facilisi. Duis
Abstract image
Tag2

Class Aptent Taciti Sociosqu Ad

Nullam In Dui
Abstract image Special
Tag3

Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor, Lacus

Duis Aliquet Egestas

Media grid

Abstract image Tag1

Nulla Facilisi. Duis Aliquet

Nulla Facilisi. Duis

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.

Abstract image Tag2

Class Aptent Taciti Sociosqu Ad

Nullam In Dui

Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in.

Abstract image Tag3

Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor, Lacus

Duis Aliquet Egestas

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

Abstract image

Nulla Facilisi. Duis Aliquet

01.01.2001

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"

Abstract image

Class Aptent Taciti Sociosqu Ad

02.02.2002

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"

Abstract image Special

Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor

03.03.2003

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"

Abstract image

Nulla Facilisi. Duis Aliquet

01.01.2001

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"

Abstract image

Class Aptent Taciti Sociosqu Ad

02.02.2002

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"

Abstract image Special

Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor

03.03.2003

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:

Abstract image

Nulla Facilisi. Duis Aliquet

01.01.2001

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"

Abstract image

Class Aptent Taciti Sociosqu Ad

02.02.2002

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"

Abstract image Special

Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor

03.03.2003

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"

Abstract image

Nulla Facilisi. Duis Aliquet

01.01.2001

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"

Abstract image

Class Aptent Taciti Sociosqu Ad

02.02.2002

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"

Abstract image Special

Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor

03.03.2003

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"