PlaceholderBox

Labeled image stand-in used wherever the library has no real asset yet — also serves as the MDX `img` override target.

Media

Usage

import { PlaceholderBox } from "@zudo-sg/ui/src/media/placeholder-box/placeholder-box";

<PlaceholderBox label="hero-image.png" aspect="16/9" />

Default (size=md, label only)

Aspect ratios (16:9 / 4:3 / 1:1)

Size presets (sm / md / lg)

MDX img compatibility

<PlaceholderBox label="hero-image.png" />

Injected into the previews above. PlaceholderBox

/* Live CSS — edits inject into every preview above.
   Try overriding a component utility, e.g.:
   .btn { letter-spacing: 0.04em; } */