Stats
Stats on the brand colour
The figures on a primary band, palette re-pointed so the numbers and labels stay legible.
Live demo
Full width · the frame has its own viewport, so the breakpoints are real
What it uses
Imports
import { Stats } from '@the_viveksingh/vivek-ui'The block
This is the file that renders the demo above, read at build time. Copy it into your project, change the words, and it runs — the only thing it needs is @the_viveksingh/vivek-ui and its stylesheet.
import { Stats } from '@the_viveksingh/vivek-ui'
export default function StatsPrimary() {
return (
<Stats
background="primary"
items={[
{ id: 'teams', value: '2,000+', label: 'Teams' },
{ id: 'countries', value: '61', label: 'Countries' },
{
id: 'saved',
value: '3 weeks',
label: 'Saved per project',
description: 'Median, self-reported',
},
]}
columns={{ base: 1, sm: 3 }}
/>
)
}