Media
Image and Video components with aspect-ratio locking, rounding, loading states, and a custom video overlay (play/pause, mute, fullscreen) built from Ragnar tokens.
Image
Shows a Spinner while loading and falls back to fallback on error. Forwards all standard img props.
Video
Native video element with a styled overlay for play/pause, mute, and fullscreen. Pass showControls={false} for an autoplay/loop banner-style video.
Installation
Props
| Prop | Type | Default | Description |
|---|---|---|---|
ratio | "auto" | "square" | "video" | "portrait" | "wide" | "auto" | Aspect-ratio lock. |
rounded | "none" | "sm" | "md" | "lg" | "full" | "md" | Border radius. |
fallback | React.ReactNode | — | Shown if the resource fails to load (Image only). |
showControls | boolean | true | Show the custom play/mute/fullscreen overlay (Video only). |