Guidelines

Usage

A Video Item should:

Be used as a teaser for leading a user to a Video page.

Entirely be a click-target and never include interactive elements like links or buttons.

Have the amount of its content with the other items when used in a group.

Be recognizable as such at a glance by having a play icon as a video-indicator on the image. When a video is currently playing it doesn't have a play icon but a status.

Content

A Video Item should:

Use enticing content that sets expectations correctly. For featured images, check out the Image guidelines.

Have its content avoid call-to-action type of callouts, like “Check out...”, or “New...”.

Have its content remain the same on all sizes.

Include a headline and duration of the linked video for maximum engagement.

Have its additional-info used for content when more than a single line of meta-text is needed. Additional-info is not truncated.

Have its prefix of the additional-info have the same color as the text when it is an Icon.

🎨 How to implement a prefix in Figma

A Video Items' meta-information can include a prefix when its meaning should be visually emphasized, e.g. through commonly used elements such as flags for the nationality meta-information or icons for additional meta-information. Find a tutorial on changing prefixes in Figma, including an explanation of prefix definition and the specific sizes used in our components here.

States

A Video Item should:

Have its live property be switched 'on' if the linked video currently streaming live, including visual indication.

Have its in-progress property be switched 'on' if the video is currently being watched, including visual indication.

Have its duration property and content replaced when either live or in-progress property is switched 'on'.

Appearance

A Video Item should:

Have appearance be set to 'dark' in light interfaces and 'light' in dark interfaces.

Have its appearance align with the other Items when used in a group.

Size

A Video Item should:

Use size 'small' for a condensed layout where multiple Items are displayed in a list or rail.

Have its width set, in size 'small', to constrain the width to be a maximum of 30% of the total viewport width on desktop and tablet and a maximum of 50% viewport width on mobile for optimized presentation and readability.

Use size 'medium' for more generous layouts where there is only one Item presented at a time.

Have its width, in size 'medium', to be constrained to a maximum of 30% on desktop, 40% on tablet, and less than 90% on mobile of the total viewport width.