Article Card
News card: vertical, horizontal and over a photo. Pro · Content and social › Feed and news
Installation
npx valyro-cli@latest login
npx valyro-cli@latest add article-cardnpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { ArticleCard } from 'valyro-ui-pro';Props
| 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. |
Related components
- Live Blog — Live blog: update feed, pinned and key events
- Breaking News — “Breaking” banner with rotating headlines
- Article Comments — Article comments: votes, sorting, replies, moderation
- Article Header — Article header: section, headline, lede, authors and date
- Byline — Byline: authors, published and updated dates, reading time
- Article Figure — Image with caption and photo credit
- Pull Quote — Pull quote with attribution
- Key Points — “Key points” summary block
- Editor Note — Update, correction, disclosure and sponsored-content notes
- Article Toc — Article table of contents that tracks the current section
- Reading Progress — Reading progress bar
- Share Bar — Share: Telegram, VK, X, WhatsApp, email and copy link
Previous: Author Bio · Next: Live Blog · All Content and social