Statistic

Ready to use


import {Statistic} from '@primer/react-brand'

Examples

Default

<Statistic>
  <Statistic.Heading>+25%</Statistic.Heading>
  <Statistic.Description>increase in developer speed</Statistic.Description>
</Statistic>

Boxed variant

<Statistic variant="boxed">
  <Statistic.Heading>+25%</Statistic.Heading>
  <Statistic.Description>increase in developer speed</Statistic.Description>
</Statistic>

Sizes

<>
  <Statistic size="small">
    <Statistic.Heading>+25%</Statistic.Heading>
    <Statistic.Description>increase in developer speed</Statistic.Description>
  </Statistic>
  <br />
  <br />
  <Statistic size="medium">
    <Statistic.Heading>+25%</Statistic.Heading>
    <Statistic.Description>increase in developer speed</Statistic.Description>
  </Statistic>
  <br />
  <br />
  <Statistic size="large">
    <Statistic.Heading>+25%</Statistic.Heading>
    <Statistic.Description>increase in developer speed</Statistic.Description>
  </Statistic>
</>

Padding

<>
  <Statistic padding="condensed">
    <Statistic.Heading>+25%</Statistic.Heading>
    <Statistic.Description>increase in developer speed</Statistic.Description>
  </Statistic>
  <br />
  <br />
  <Statistic padding="normal">
    <Statistic.Heading>+25%</Statistic.Heading>
    <Statistic.Description>increase in developer speed</Statistic.Description>
  </Statistic>
  <br />
  <br />
  <Statistic padding="spacious">
    <Statistic.Heading>+25%</Statistic.Heading>
    <Statistic.Description>increase in developer speed</Statistic.Description>
  </Statistic>
  <br />
  <br />
  <Statistic
    padding={{
      narrow: 'condensed',
      regular: 'normal',
      wide: 'spacious',
    }}
  >
    <Statistic.Heading>+25%</Statistic.Heading>
    <Statistic.Description>increase in developer speed</Statistic.Description>
  </Statistic>
</>

Accent descriptions

<Statistic>
  <Statistic.Heading>+25%</Statistic.Heading>
  <Statistic.Description variant="accent">increase in developer speed</Statistic.Description>
</Statistic>

Name	Type	Default	Description
`className`	`string`		Sets a custom class on the root element
`children`	`Statistic.Heading`, `Statistic.Description`		Content to be displayed within the component
`size`	`'small'` `'medium'` `'large'`	`'large'`	The size of the Statistic
`padding`	`'none'`, `'condensed'`, `'normal'`, `'spacious'`	`'none'`	Adding padding to all internal sides of the component

Statistic.Heading

Forwards all the props from the Heading component, including as, size, and weight.

Statistic.Description

Name	Type	Default	Description
`variant`	`'default'` `'muted'` `'accent'`	`'default'`	Visual presentation of the component

Forwards most props from the Text component, including size.