Skip to content
UI Kit
Accent color

Media

Video and audio players, image compare, device frames and QR codes.

5 components · 19 variants
Switch category

On this page

Every component of this category. Pick one to jump to its variants.

qr-code

QR code

Real, scannable QR codes from the kit’s own encoder. Plain with SVG and PNG download, styled with dots and a logo, as a table card, a Wi-Fi card or a live generator.

Props and details · QR code

Plain

A crisp square code on a light tile, always dark on light so phones read it in either mode. Downloads as SVG for print or PNG for the web, the modules open from the middle as it scrolls in.

Open in Studio

Styled

Round modules, rounded eyes and a logo in the middle. The logo raises the error correction to the highest level, so the code still scans with its middle covered.

Open in Studio

Table card

A card for tables and counters with a short address to type by hand. A soft scan line passes over the code, still with reduced motion.

Open in Studio

Wi-Fi card

Guests scan and join the network, no typing. The password is hidden until asked for and copies with one tap.

Open in Studio

Generator

Type a link and the code redraws as you type, with the size in bytes, a choice of error correction and both downloads. Too long a text is named, not cut.

Open in Studio

device-frames

Device frames

Phone, tablet, laptop and watch drawn in CSS. One width scales the whole device, the content can render at a real screen size.

Props and details · Device frames

Phone

Side buttons, dynamic island, status bar and home indicator, upright or turned for maps and video.

Tablet

Even bezels, camera on the long edge, here in landscape with an app rendered at 980 px and scaled to fit.

Laptop

Thin bezel with camera, hinge and a base with the opening notch. Ideal for website previews.

Device set

Laptop, phone and watch in one scene. Widths in percent, the set scales down as one picture.

video-player

Video player

A video player with its own calm controls, captions, keyboard shortcuts and a poster that can be any drawing or image.

Props and details · Video player

Poster

Untouched state with title, length and a big play button. Controls fade out while playing and return on movement or focus.

Captions

Paused mid film with captions on. Cues come as data or as WebVTT tracks, the button only appears when captions exist.

Minimal in a card

One row of controls for small players, here as a lesson in a course.

Portrait clip

A 9:16 clip for reels and stories, with the minimal controls and a post beside it.

audio-player

Audio player

Audio with a drawn waveform you can click, drag and step through, from a podcast card to a voice message.

Props and details · Audio player

Podcast card

An episode with cover, waveform, skip buttons, time and speed. The played part of the waveform takes the accent.

Compact inline

One row for articles, lessons and lists. Play, waveform, time and speed.

Voice message

Chat bubbles for incoming and own messages. Speed appears once the message plays.

image-compare

Image compare

Before and after with a draggable divider. Works with any two nodes, sideways or up and down.

Props and details · Image compare

Website redesign

The old site on the left, the new one on the right. Drag, click or use the arrow keys.

Photo edit

The raw shot against the graded one. The same picture with and without the edit.

Vertical

Before on top, after below. Suits tall pictures and phones.

Similar components

More from Elements, the same area of the kit.

Often combined with

Sections that usually sit next to Media on a page.

Often searched

Jump to

Copied to the clipboard