--- title: "Media | GoodBarber's Design System" description: "The Media element anchors the elements of a cell in GoodBarber apps, like the play icon, the duration or the distance, in a top, middle or bottom zone." canonical_url: "https://www.goodbarber.com/uxdesign/media/" lang: fr --- # Media | GoodBarber's Design System [Design System](https://fr.goodbarber.com/uxdesign/) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.b60a521defb3.svg) [https://fr.goodbarber.com/uxdesign/](https://fr.goodbarber.com/uxdesign/) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/regular/chevron-up.4b0a6b4e88c8.svg) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/regular/chevron-down.e16b9408a703.svg) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.b60a521defb3.svg) [Overview](https://fr.goodbarber.com/uxdesign/) - [Foundations](/uxdesign/foundations/) * Layout + [Grid](/uxdesign/grid/) + [Spacing](/uxdesign/spacing/) + [Breakpoints](/uxdesign/breakpoints/) + [Layers](/uxdesign/layers/) * Graphic elements + [Color](/uxdesign/color/) + [Typography](/uxdesign/typography/) + [Images Aspect Ratios](/uxdesign/images-aspect-ratios/) + [Icons](/uxdesign/icons/) - [Atomic Components](/uxdesign/atomic-components/) * [Color atom](/uxdesign/atom-color/) * [Font atom](/uxdesign/atom-font/) * [Image atom](/uxdesign/atom-image/) * [Gradient atom](/uxdesign/atom-gradient/) * [Shape atom](/uxdesign/atom-shape/) * [Shadow atom](/uxdesign/atom-shadow/) * [Size atom](/uxdesign/atom-size/) * [Border atom](/uxdesign/atom-border/) * [Blur atom](/uxdesign/atom-blur/) * [Overlay atom](/uxdesign/atom-overlay/) * [Immersive feedback atom](/uxdesign/atom-immersive-feedback/) - [UI Elements](/uxdesign/ui-elements/) * [Action](/uxdesign/action/) * [DateBullet](/uxdesign/datebullet/) * [Distance](/uxdesign/distance/) * [Duration](/uxdesign/duration/) * [Item](/uxdesign/item/) * [Item Icon](/uxdesign/item-icon/) * [Item Indicator](/uxdesign/item-indicator/) * [Item Label](/uxdesign/item-label/) * [Media](/uxdesign/media/) * [Pager](/uxdesign/pager/) * [Play](/uxdesign/play/) * [Player](/uxdesign/player/) - [UI Components](/uxdesign/ui-components/) * [Background](/uxdesign/background/) * [Text Field](/uxdesign/textfield/) * [Dropdown](/uxdesign/dropdown/) * [Date & Time Picker](/uxdesign/date-time-picker/) * [Checkboxes & Radio Button](/uxdesign/checkboxes-radio-button/) * [Button](/uxdesign/button/) * [Thumbnail](/uxdesign/thumbnail/) * [Form](/uxdesign/form/) * [TabBar](/uxdesign/tabbar/) # Media UI Elements The Media is the container that gathers the visual elements of a cell and places each of them in one of its three zones. [https://portal.ww-cdn.com/portal_static/images/designsystem/videos/media.592bcf0f5001.mp4](https://portal.ww-cdn.com/portal_static/images/designsystem/videos/media.592bcf0f5001.mp4) ## Introduction The Media is a container that groups the visual elements of a meta-cell: the [thumbnail](/uxdesign/thumbnail/), the [play icon](/uxdesign/play/), the [duration](/uxdesign/duration/), the [distance](/uxdesign/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](/uxdesign/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](/uxdesign/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](/uxdesign/play/), the [duration](/uxdesign/duration/), the [distance](/uxdesign/distance/) or the [pager](/uxdesign/pager/). Some carry a logic of their own: the [Action](/uxdesign/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](/uxdesign/datebullet/), which highlights the start date of an event in a compact, stylized format; and the [Player](/uxdesign/player/), which lets users start audio straight from the cell, without opening it. Each of them keeps its own behavior and its own specifications. ![Elements the Media can hold](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Media-Anatomy-Elements.4c64c1d07423.png) *Elements the Media can hold* ### 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](/uxdesign/action/), in the corner on the side of the [thumbnail](/uxdesign/thumbnail/), and the [duration](/uxdesign/duration/) in the top-right corner of an immersive cell. The Middle zone holds the [play icon](/uxdesign/play/), always centered horizontally and vertically. The Bottom zone holds the duration in the bottom-right corner, the [distance](/uxdesign/distance/), the [Player](/uxdesign/player/) and the [DateBullet](/uxdesign/datebullet/) in the bottom-left corner, and the [pager](/uxdesign/pager/) in the bottom-center. ![The Top, Middle and Bottom zones, and the elements anchored in them](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Media-Anatomy-Zones.dbe66cbdfbe3.png) *The Top, Middle and Bottom zones, and the elements anchored in them* ## 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](/uxdesign/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. ![The internal padding, and its value on each device](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Media-Layout-Padding.0fd41786c8e4.png) *The internal padding, and its value on each device* ## 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. ![The same Media, for a video, a podcast, an event and a map point](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Media-Behavior-ContentTypes.1b8e60fc2de8.png) *The same Media, for a video, a podcast, an event and a map point* ### When something is missing A missing piece of metadata, such as a [duration](/uxdesign/duration/), simply is not displayed. A missing image depends on the cell: the visual card and immersive cells always display a default [thumbnail](/uxdesign/thumbnail/) in its place, the enriched and condensed cells do without one. ![A missing duration, and a missing image](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Media-Behavior-Fallback.7d73972cfbae.png) *A missing duration, and a missing image*