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?" />

<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>

<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>

<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