Article Figure

Image with caption and photo credit. Pro · Content and social › Article

Installation

npx valyro-cli@latest login
npx valyro-cli@latest add article-figure

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { ArticleFigure } from 'valyro-ui-pro';

Prop	Type	Default
`src`	`string`		Image URL; leave it out and pass `children` for a video, embed or chart.
`alt`	`string`	`''`	Text alternative of the image ("" for a decorative one).
`children`	`ReactNode`		Media in place of `src` / `alt`.
`caption`	`ReactNode`		What the picture shows, under it.
`credit`	`ReactNode`		Photographer or agency: "Photo: Reuters". Shown after the caption in a quieter tone.
`width`	`'text' \| 'wide' \| 'full'`	`'text'`	Width relative to the text column: `text` (default), `wide` (bleeds past it on screens from 64rem), `full` (edge to edge of the viewport; on desktops with classic scrollbars give the page `overflow-x: clip`).
`aspectRatio`	`string`		Box ratio while the image loads, e.g. "16 / 9" (default: the image's own).
`imageWidth`	`number`		Intrinsic size of the image in px: the browser reserves its box before it loads, so text below does not jump.
`imageHeight`	`number`		Intrinsic height of the image in px (with `imageWidth`).
`srcSet`	`string`		Responsive sources ("photo-800.jpg 800w, photo-1600.jpg 1600w"), so phones do not download the desktop file.
`sizes`	`string`	`'(min-width: 64rem) 46rem, 100vw'`	Display widths for srcSet (default "(min-width: 64rem) 46rem, 100vw").
`priority`	`boolean`	`false`	The lead image above the fold: loads at once with high priority (good for LCP) instead of lazily.