MediaDisplay

Video with poster PNG fallback, or image with placeholder fallback. Used for all product visuals.

4 tokens

Preview

Usage

import { MediaDisplay } from '@/components/media-display'

// Tries {src}.mp4, then {src}.png, then a placeholder showing the alt text.
<MediaDisplay src="/media/workflow/tab-enroll" alt="BentoSMS enrollment screen" />

Tokens used

This component reads these tokens directly: change one on a Foundations page and it updates here and across the site.

Radius desktop--ds-radius-lg

1rem

Radius tablet--ds-radius-md

0.75rem

Radius mobile--ds-radius-sm

0.5rem

Surface--ds-surface

#F5F7F5