Skip to main content

MetricCard

Result
Loading...
Live Editor
<MetricCard
	label="Card title"
	value="$1,200"
	labelHelp="Help within a tooltip"
	comparisonVariant="success"
	comparisonValue="+$200"
	comparisonLabel="since last metric card"
	comparisonHelp="What is a metric card?"
/>

Sizes​

Result
Loading...
Live Editor
<div className="d-grid gap-4">
	<MetricCard
		label="Card title"
		value="$1,300"
		labelHelp="Help within a tooltip"
		comparisonVariant="success"
		comparisonValue="+$100"
		comparisonLabel="since last metric card"
		size="sm"
	/>
	<MetricCard
		label="Card title"
		value="$800"
		labelHelp="Help within a tooltip"
		comparisonVariant="danger"
		comparisonValue="-$500"
		comparisonLabel="since last metric card"
		size="md"
	/>
	<MetricCard
		label="Card title"
		value="$800"
		labelHelp="Help within a tooltip"
		comparisonVariant="none"
		comparisonLabel="No change"
		size="lg"
	/>
	<MetricCard
		label="Card title"
		value="$1000"
		labelHelp="Help within a tooltip"
		comparisonVariant="success"
		comparisonValue={<><span className="icon-arrow-up me-1" />$200</>}
		comparisonLabel="since last metric card"
		size="xl"
	/>
</div>

Grouping​

Wrapping your MetricCards in a MetricCardContainer will put them in a grid with dividers. The default number of columns is 3, but it can be configured with the columns prop; the value must be between 1 and 5.

The MetricCards will stack vertically at the tablet breakpoint (767px), but the breakpoint value can be configured with the smBreakpoint prop.

Result
Loading...
Live Editor
<MetricCardContainer>
	<MetricCard
		label="Card title"
		value="$800"
		labelHelp="Help within a tooltip"
		comparisonVariant="danger"
		comparisonValue="-$500"
		comparisonLabel="since last metric card"
		size="md"
	/>
	<MetricCard
		label="Card title"
		value="$800"
		labelHelp="Help within a tooltip"
		comparisonVariant="danger"
		comparisonValue="-$500"
		comparisonLabel="since last metric card"
		size="md"
	/>
	<MetricCard
		label="Card title"
		value="$800"
		labelHelp="Help within a tooltip"
		comparisonVariant="danger"
		comparisonValue="-$500"
		comparisonLabel="since last metric card"
		size="md"
	/>
</MetricCardContainer>

Props​

MetricCard​

MetricCardContainer​