Marketing & Content

Stat Card

A value, its label and an optional up/down trend indicator, for dashboards and proof sections.

Element: <div>
Module: @basenative/components
Function: renderStatCard

Quick start

Import the render function and call it from your server template.

import { renderStatCard } from '@basenative/components';

renderStatCard({ value: '1,248', label: 'Jobs booked', trendText: '+12%', trend: 'up' });

Examples

Each block is a real server render — no mockups, no virtual DOM.

Value, label and trend

The trend span renders only when trendText is given; its direction is stamped as data-trend.

Live render

1,248 Jobs booked +12%

3.1% No-show rate -0.4%

42 Open estimates

Source

renderStatCard({ value: '1,248', label: 'Jobs booked', trendText: '+12%', trend: 'up' })
renderStatCard({ value: '3.1%', label: 'No-show rate', trendText: '-0.4%', trend: 'down' })
renderStatCard({ value: '42', label: 'Open estimates' })

Options

Arguments accepted by renderStatCard().

renderStatCard option reference
Option	Type	Default	Description
`value`	`string`	`—`	The stat value (escaped text).
`label`	`string`	`—`	The stat label (escaped text).
`trendText`	`string`	`''`	Trend text (e.g. "+12%"); renders the trend span when present.
`trend`	`'up' \| 'down'`	`'up'`	Trend direction stamped as data-trend.