--- title: "Duration | GoodBarber's Design System" description: "The Duration element shows how long a video lasts in GoodBarber apps: a compact label over the thumbnail, so users know the length before they play it." canonical_url: "https://www.goodbarber.com/uxdesign/duration/" lang: nl --- # Duration | GoodBarber's Design System [Design System](https://nl.goodbarber.com/uxdesign/) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.b60a521defb3.svg) [https://nl.goodbarber.com/uxdesign/](https://nl.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://nl.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/) * [Distance](/uxdesign/distance/) * [Duration](/uxdesign/duration/) * [Item](/uxdesign/item/) * [Item Icon](/uxdesign/item-icon/) * [Item Indicator](/uxdesign/item-indicator/) * [Item Label](/uxdesign/item-label/) * [Pager](/uxdesign/pager/) * [Play](/uxdesign/play/) - [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/) # Duration UI Elements The Duration is the compact label that shows how long a video lasts, before anyone plays it. [https://portal.ww-cdn.com/portal_static/images/designsystem/videos/duration.663e6f06d3ea.mp4](https://portal.ww-cdn.com/portal_static/images/designsystem/videos/duration.663e6f06d3ea.mp4) ## Introduction The Duration is a compact label that shows how long a video lasts. It typically appears within the media of a video, over its [thumbnail](/uxdesign/thumbnail/), and gives users the length before they decide to play it. The Duration is displayed for video content only, and only when a valid duration is available. When there is none, the element is not displayed at all. ## Anatomy ### The label The Duration is a single line of text on a solid, semi-transparent [background](/uxdesign/background/). The text is set in the OS font of the device, at a fixed 13 px, and a padding separates it from the edges of its background: a narrow one above and below, a wider one left and right. ![The text and its padding](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Duration-Anatomy-Structure.9d7c6248ccd3.png) *The text and its padding* ## Properties ### Format The value is formatted automatically, depending on how long the video is: minutes and seconds for a short one, hours, minutes and seconds beyond the hour. ![The two formats: minutes and seconds, then hours, minutes and seconds](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Duration-Properties-Format.df798fd93164.png) *The two formats: minutes and seconds, then hours, minutes and seconds* ### Background The [background](/uxdesign/background/) is black at 50% opacity. It is an [overlay](/uxdesign/atom-overlay/): the image underneath keeps showing through it, which is what makes the label readable over any picture while keeping it discreet. ![Black at 50%: what is underneath still shows through](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Duration-Properties-Background.9afb1f1c1e79.png) *Black at 50%: what is underneath still shows through* ### Shape The [Shape](/uxdesign/atom-shape/) atom applies to the background, from Sharp to Round. On a label this short, Round rounds the ends into a pill. ![Sharp, Rounded and Round applied to the label](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Duration-Properties-Shape.ab85207757fa.png) *Sharp, Rounded and Round applied to the label* ## Layout ### Placement The Duration sits in a corner of the media, on the right: at the bottom in most cells, at the top in an immersive one. In a 16:9 ratio, the vertical space can become too tight for the Duration and the [play icon](/uxdesign/play/) to coexist, and the two would overlap. In that case the play icon takes priority, and the Duration is hidden. ![The Duration in the bottom-right corner, and in the top-right corner of an immersive cell](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Duration-Layout-Placement.4ec0d051582d.png) *The Duration in the bottom-right corner, and in the top-right corner of an immersive cell*