Introduction

The Media is a container that groups the visual elements of a meta-cell: the thumbnail, the play icon, the duration, the distance, and a few others. It ensures a consistent presentation and a consistent spacing of these visual components across content types and across meta-cells.

It does not render the image: the image is the Thumbnail, a separate layer with its own rules, and the Media sits on top of it.

Anatomy

The elements it can hold

Several elements can be displayed inside the Media, depending on the type of content. The Thumbnail is the image itself, the layer everything else sits on. The others are the elements it places in its zones, such as the play icon, the duration, the distance or the pager. Some carry a logic of their own: the Action, which lets users interact with a piece of content, for instance to comment on it, share it or add it to favorites; the DateBullet, which highlights the start date of an event in a compact, stylized format; and the Player, which lets users start audio straight from the cell, without opening it.

Each of them keeps its own behavior and its own specifications.

The three zones

The Media is organized into three zones, each with its own placement rules: Top, Middle and Bottom. Every element is anchored precisely in one of them.

The Top zone typically holds the Action, in the corner on the side of the thumbnail, and the duration in the top-right corner of an immersive cell. The Middle zone holds the play icon, always centered horizontally and vertically. The Bottom zone holds the duration in the bottom-right corner, the distance, the Player and the DateBullet in the bottom-left corner, and the pager in the bottom-center.

Layout

Internal padding

The padding inside the Media is the inset of the elements from the edge of the zone. It is either zero, and the elements sit flush with the edge, or a small spacing tier (8px on mobile, 10px on tablet and desktop), and the elements are pulled in. The meta-cell decides which one applies.

There is no spacing rule between the elements themselves: each one is placed precisely within its zone.

Behavior

The meta-cell decides

Each meta-cell defines which elements are displayed, based on the type of content, such as articles, videos, podcasts, events, points or photos. The same Media therefore shows a different set of elements from one cell to the next.

When something is missing

A missing piece of metadata, such as a duration, simply is not displayed. A missing image depends on the cell: the visual card and immersive cells always display a default thumbnail in its place, the enriched and condensed cells do without one.