Article Card

Карточка новости: вертикальная, горизонтальная и поверх фото. Pro · Контент и соцсети › Лента и новости

Установка

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

npm install valyro-ui-pro

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

Пропсы

Prop	Type	Default
`title` *	`ReactNode`		Headline of the story.
`href`	`string`		Story URL; the whole card becomes clickable through the headline link.
`excerpt`	`ReactNode`		Teaser text under the headline.
`kicker`	`ReactNode`		Rubric above the headline: "Analysis", "Opinion".
`badge`	`ReactNode`		Label over the image corner: "Video", "Exclusive", "Live".
`image`	`ReactNode`		The image element itself (`next/image`, `<picture>`), in place of `imageSrc`; it fills the card's media box.
`imageSrc`	`string`		Lead image; without it a quiet placeholder keeps a grid of cards even, and a horizontal card drops its image column.
`imageAlt`	`string`	`''`	Text alternative of the image (default "": the headline already names the story).
`imageSrcSet`	`string`		Responsive sources for the image ("card-400.jpg 400w, card-800.jpg 800w"): a feed of cards then downloads thumbnails, not originals.
`imageSizes`	`string`	`'(min-width: 48rem) 33vw, 100vw'`	Display widths for imageSrcSet (default "(min-width: 48rem) 33vw, 100vw").
`priority`	`boolean`	`false`	A card above the fold (the lead story): its image loads at once with high priority instead of lazily.
`authors`	`ArticleAuthor[]`	`[]`	Writers shown in the meta line (names only).
`published`	`DateInput`		Publication date.
`readingMinutes`	`number`		Estimated reading time in minutes.
`commentCount`	`number`		Number of reader comments.
`layout`	`'vertical' \| 'horizontal' \| 'overlay'`	`'vertical'`	`vertical`: image on top (default); `horizontal`: image beside the text; `overlay`: text over the image.
`headingLevel`	`1 \| 2 \| 3 \| 4 \| 5 \| 6`	`3`	Level of the headline (default 3).
`timeZone`	`string`		IANA time zone of the dates shown, e.g. "Europe/Moscow" (default: the ThemeProvider's, then the reader's). Set it, here or on the provider, when rendering on the server, so the server and the browser print the same time.
`locale`	`string`		BCP 47 locale for numbers and dates; defaults to the ThemeProvider's, then the browser's.
`labels`	`Partial<ArticleCardLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

Article Card

Установка

Пропсы

Похожие компоненты