Key Points
“Key points” summary block. Pro · Content and social › Article
Installation
npx valyro-cli@latest login
npx valyro-cli@latest add key-pointsnpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { KeyPoints } from 'valyro-ui-pro';Props
| Prop | Type | Default | |
|---|---|---|---|
items * | ReactNode[] | The takeaways, one short sentence each. | |
numbered | boolean | false | Numbers the points (an ordered list) instead of bullets. |
variant | 'box' | 'rule' | 'box' | box: a tinted panel (default); rule: a bar along the start edge with no fill. |
headingLevel | 1 | 2 | 3 | 4 | 5 | 6 | 2 | Level of the title (default 2). |
labels | Partial<KeyPointsLabels> | Overrides for the built-in English text; keys left out keep their defaults. |
Related components
- 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
- 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
- Author Bio — Author card at the end of an article, with a follow button
- Article Card — News card: vertical, horizontal and over a photo
- Live Blog — Live blog: update feed, pinned and key events
- Breaking News — “Breaking” banner with rotating headlines
Previous: Pull Quote · Next: Editor Note · All Content and social