To start using the BcStats component in your project, ensure you import it as following:

import { BcStats } from '@bugcrowd/bc-elements'

BcStats props

Prop	Type	Required?	Purpose
variant	string	required	Switch between variants.
size	string	required	Change component text size.

Possible values for variant prop

variant values	Required?	Description
vertical	required	Aligns stats vertically in a column.
inline	required	Aligns the title and figure horizontally in a row. This removes the even distribution of stats horizontally.
unlined	required	Removes the left border in each subsequent stat in ≥md and top border in <md.

Possible values for size prop

size values	Required?	Description
xs	required	Small size.
lg	required	Large size.

Any extended types: No

BcStats.Stat

Prop	Type	Required?	Description
trend	string	required	Sets the trend: either up or down.

BcStats.Title

Title is used to set the stat title text.

BcStats.Figure

Figure is used to provide the provide stat figure, usually a number.

BcStats.Info

Info is used to provide additional information about BcStat.

Any extended types: No

Preferably group the items as an unsorted list (<ul>) instead of with <div>s.

The following variants are available:

Variant	Purpose
.bc-stats--inline	Aligns the title and figure horizontally in a row. This removes the even distribution of stats horizontally.
.bc-stats--vertical	Aligns stats vertically in a column.
.bc-stats--unlined	Removes the left border in each subsequent stat in ≥md and top border in <md.

For sizing:

Variant	Purpose
.bc-stats--xs	Decrease font size.
.bc-stats--lg	Increase font size.

Trend variants:

Variant	Purpose
.bc-stat--uptrend	Changes text color to green, to be used for an ‘up-trending’ number or percentage.
.bc-stat--downtrend	Changes text color to red, to be used for a ‘down-trending’ number or percentage.