Highlights
Display key metrics with a title, a large value, and an optional statistic.
Basic usage
Place highlights in a HighlightsGrid. The grid draws the card surface and the dividers between cells, so a Highlights is not meant to be used on its own. Pass a Statistic as statisticProps to show the change next to the value.
Visibility score
Share of voice
Citations
Multiple rows
Children wrap onto new rows after columns items. The grid draws dividers between cells, with none after the last column or row. tooltipContent adds an info tooltip next to the title.
Prompts tracked
Answer engines
Brand mentions
Last report
Loading
Set isLoading on the grid to show skeletons in every cell, or on a single Highlights. The statistic skeleton only renders when statisticProps is set. Size the skeletons with bigValueSkeletonWidth and the related props.
Visibility score
Share of voice
Last report
Properties
The title of the highlights box
The primary value. Numbers are formatted with toLocaleString
An icon name, a { name, variant?, className?, label? } descriptor, or a node
The statistic to show below the big value
Whether the component is in a loading state
Default: false
Content for an info tooltip next to the title. No tooltip icon renders without it
Width of the big value skeleton when loading
Default: 60px
Height of the big value skeleton when loading
Default: 24px
Width of the statistic skeleton when loading
Default: 32px
Height of the statistic skeleton when loading
Default: 16px
Additional CSS classes to apply to the highlights container
HighlightsGrid Properties
Highlights components to display in the grid
Number of columns in the grid layout, from 1 to 6
Default: 4
When set, overrides isLoading on every child
Additional CSS classes to apply to the grid container