hightouch UI

Stats

Display compact stats describing the state of some resource.

Sources used
1 of 5
Destinations used
4 of 10
Estimated cost
$1,259
import {
Stats,
StatsItem,
StatsItemTitle,
StatsItemValue,
} from "@hightouchio/ui";

<Stats>
<StatsItem>
<StatsItemTitle>Sources used</StatsItemTitle>
<StatsItemValue>1 of 5</StatsItemValue>
</StatsItem>

<StatsItem>
<StatsItemTitle>Destinations used</StatsItemTitle>
<StatsItemValue>4 of 10</StatsItemValue>
</StatsItem>

<StatsItem>
<StatsItemTitle>Estimated cost</StatsItemTitle>
<StatsItemValue>$1,259</StatsItemValue>
</StatsItem>
</Stats>;

#

#

  • Use sentence case everywhere.
  • Keep title to one or two words max.
  • Don't add a dot at the end of title or value.

#

#

Inherits margin props.

NameDefaultDescription
children

—

ReactNode

Stats items.

#

NameDefaultDescription
children

—

ReactNode

Stats item.

#

NameDefaultDescription
children

—

ReactNode

Stats item title.

#

NameDefaultDescription
children

—

ReactNode

Stats item value.

On this page