The opening exhibit of a piece: kicker, headline and deck above one large chart, with a source line underneath.
Headline
The opening block of a piece or section: kicker, title, one-sentence deck and a byline/date line.
- Use when
- At the top of a data story (
page), at the start of each chapter (section), or as the heading of a tile (card). Write the title as one plain fact with its number. Write the deck as a second plain sentence. - Avoid when
- Titling a single chart: charts carry their own
titleandsubtitle. For numbered chapters use step marker.
Preview
Energy transition
Solar generated more electricity than coal in Europe in 2024
Solar was the continent's second-largest source of electricity that year.
By Ana Ruiz and Tom Okafor
import { Headline } from "insightcharts";
export function Example() {
return (
<Headline
size="page"
kicker="Energy transition"
title="Solar generated more electricity than coal in Europe in 2024"
deck="Solar was the continent's second-largest source of electricity that year."
byline="By Ana Ruiz and Tom Okafor"
date="2025-03-14"
/>
);
}{
"type": "headline",
"size": "page",
"kicker": "Energy transition",
"title": "Solar generated more electricity than coal in Europe in 2024",
"deck": "Solar was the continent's second-largest source of electricity that year.",
"byline": "By Ana Ruiz and Tom Okafor",
"date": "2025-03-14"
}Render with import { Insight } from "insightcharts" and <Insight spec={spec} />. Nested specs resolve by name; nothing else to import.
Composition
Used in
2 molecules and 8 templates use headline.
Molecules
2A story section: a numbered step marker or a headline, introductory prose, then one or more exhibits in a responsive one- to three-column grid.
Templates
8A compared with B on one page. It has a headline that states the result, the headline figures mirrored either side of their labels, one hero exhibit that shows both sides, paired exhibits on a shared scale, a verdict callout and a source note.
A set of linked charts over one shared dataset that filter each other. It has a headline, a sentence of instructions with filter chips, a row of figures that recompute from the filtered rows, two to four charts and an optional detail table. It opens on selections the author chooses.
A one-page summary. It has a headline that states the main finding with its number, a deck, a row of three or four key figures, one hero chart with a takeaway callout, two smaller supporting exhibits, a short list of actions and a source note.
A vertical infographic in one narrow column. It opens with a big number or a proportion statement (hook), then the hero exhibit, then numbered sections with one exhibit each, a conclusion with an optional link, and sources.
A section of an analytical report laid out as a document. It has a title block, a summary, numbered findings, then method, limitations and sources. Each finding has one exhibit, an observation and a separately labelled interpretation with a confidence rating and a caveat.
A recurring report. It has a masthead with the report name and period, a headline that states the main change, a KPI grid with changes and sparklines, a ranked list beside one or two trend charts, an optional comparison table, short notes and a source note.
A story told in date order. It has a headline, one overview exhibit of the whole period (a timeline chart or an annotated line), dated chapters along a rail, a closing paragraph and a source note. Each chapter has a short text and an optional small exhibit.
A long article read by scrolling. It has a headline, then an ordered list of blocks in a reading column, then a source note. The blocks are prose, figures, charts with a callout, scrolly sequences, pull quotes, stat rows, small multiples and chapter breaks. Exhibits can be wider than the column.
Installation
$ pnpm dlx shadcn@latest add @insightcharts/headlineThe CLI copies the source into your project and needs the @insightcharts registry in components.json; see installation. With the package, import it by name:
import { Headline } from "insightcharts";Examples
Section
Chapter 2
Germany and the Netherlands have more solar installations per person than Spain
Solar installations per person, by country.
import { Headline } from "insightcharts";
export function Example() {
return (
<Headline
size="section"
kicker="Chapter 2"
title="Germany and the Netherlands have more solar installations per person than Spain"
deck="Solar installations per person, by country."
/>
);
}{
"type": "headline",
"size": "section",
"kicker": "Chapter 2",
"title": "Germany and the Netherlands have more solar installations per person than Spain",
"deck": "Solar installations per person, by country."
}Render with import { Insight } from "insightcharts" and <Insight spec={spec} />. Nested specs resolve by name; nothing else to import.
Card
Wholesale electricity prices by hour, summer 2024
Median day-ahead price for each hour of the day.
import { Headline } from "insightcharts";
export function Example() {
return (
<Headline
size="card"
title="Wholesale electricity prices by hour, summer 2024"
deck="Median day-ahead price for each hour of the day."
date="Updated June 2024"
/>
);
}{
"type": "headline",
"size": "card",
"title": "Wholesale electricity prices by hour, summer 2024",
"deck": "Median day-ahead price for each hour of the day.",
"date": "Updated June 2024"
}Render with import { Insight } from "insightcharts" and <Insight spec={spec} />. Nested specs resolve by name; nothing else to import.
Centered page, long title
Household energy bills in January 2025 were one third higher than before the price shock three years earlier
Bills have fallen more slowly than forecast.
By the data desk
import { Headline } from "insightcharts";
export function Example() {
return (
<Headline
size="page"
align="center"
title="Household energy bills in January 2025 were one third higher than before the price shock three years earlier"
deck="Bills have fallen more slowly than forecast."
byline="By the data desk"
date="2025-01-09"
/>
);
}{
"type": "headline",
"size": "page",
"align": "center",
"title": "Household energy bills in January 2025 were one third higher than before the price shock three years earlier",
"deck": "Bills have fallen more slowly than forecast.",
"byline": "By the data desk",
"date": "2025-01-09"
}Render with import { Insight } from "insightcharts" and <Insight spec={spec} />. Nested specs resolve by name; nothing else to import.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| titlerequired | string | One fact with its number, as a plain sentence. Wraps balanced. | |
| kicker | string | Small label above the title: section, series or topic. Sentence case. | |
| deck | string | One-sentence standfirst. | |
| byline | string | Author line, shown as written, e.g. "By Ana Ruiz". | |
| date | string | ISO dates are formatted for the locale and wrapped in <time>; other strings are shown as written. | |
| size | "page" | "section" | "card" | "section" | Type scale. Titles step down automatically in narrow containers. |
| level | 1 | 2 | 3 | 4 | 5 | 6 | Heading level. Defaults to 1 (page), 2 (section), 3 (card). | |
| align | "left" | "center" | "left" | Text alignment. |
| children | ReactNode | Extra content under the byline. |