Article Header

Article header: section, headline, lede, authors and date. Pro · Content and social › Article

Installation

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

npm install valyro-ui-pro

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

Prop	Type	Default
`title` *	`ReactNode`		Headline of the article.
`kicker`	`ReactNode`		Rubric or story label above the headline: "Analysis", "Exclusive".
`kickerHref`	`string`		Section page the kicker links to.
`dek`	`ReactNode`		Standfirst: one or two sentences under the headline that sum the story up.
`authors`	`ArticleAuthor[]`	`[]`	Writers in the byline.
`published`	`DateInput`		Publication date.
`updated`	`DateInput`		Last substantive update.
`readingMinutes`	`number`		Estimated reading time in minutes.
`media`	`ReactNode`		Lead image or video under the byline, e.g. an ArticleFigure.
`align`	`'start' \| 'center'`	`'start'`	`center` for features and long reads; `start` for news (default).
`headingLevel`	`1 \| 2 \| 3 \| 4 \| 5 \| 6`	`1`	Level of the headline (default 1).
`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<ArticleHeaderLabels>`		Overrides for the built-in English text; keys left out keep their defaults.