Skip to main content

Imagery

Prism ships no stock photography. Imagery is always customer content, supplied through component props (image, media, avatar, src). This page documents the approach — ratios, treatment, focal point, placeholders and do/don't — not a gallery. What you see in the specimen are neutral placeholders standing in for whatever a product passes.

Specimen​

Live demo
Open ↗

Aspect ratios​

Pick from a small, fixed set so layouts stay predictable and images never dictate the grid:

  • 16:9 — heroes, media cards, video thumbnails.
  • 4:3 / 3:2 — editorial and content cards.
  • 1:1 — avatars, tiles, product thumbnails.

The component owns the box; the image fills it with object-fit: cover. Never let an image set its own intrinsic size into a layout.

Focal point & treatment​

  • Use object-position (a focal point) so the subject survives the crop at every breakpoint.
  • Apply the system's scrim/overlay tokens when text sits on an image — never bake gradients into the asset.
  • Respect rounding and elevation from the surrounding surface; images inherit the card's radius.

Placeholders & loading​

  • Every image slot has a neutral placeholder (a tinted surface, not a broken-image icon) so layout is stable before load and when no image is supplied.
  • Provide meaningful alt text for content images; decorative imagery uses empty alt="".
  • Reserve the box's dimensions up front to avoid layout shift.

Do / don't​

  • Do treat imagery as replaceable content passed by the product.
  • Do keep one consistent treatment (ratio, rounding, scrim) across a surface.
  • Don't ship invented or stock photos inside the system, or rely on a specific image to make a layout work.
  • Don't place text on an unscrimmed photo — contrast is not guaranteed.