The metric card component. used to display icons with a measurement of some kind.

Parameters:
NameTypeDescription
propsobject

Component props.

Properties
NameTypeDescription
childrenJSX.Element | null

React element children.

countJSX.Element | number | string

The count to display.

contentAttributesobject

Custom attributes for the content box.

contentClassesstring | Array | object

Custom classes for the content box.

countAttributesobject

Custom attributes for the count text.

countClassesstring | Array | object

Custom classes for the count text.

customAttributesobject

Custom attributes for the component.

customIconJSX.Element | null

React element for a custom icon.

customClassesstring | Array | object

Custom classes for the component.

iconAttributesobject

Custom attributes for the icon.

hasIconboolean

Whether to include the icon.

spacingnumber

Spacing around the card.

titlestring

The title to display.

titleAttributesobject

Custom attributes for the title.

titleClassesstring | Array | object

Custom classes for the title.

typestring

The type of metric card.

refobject | null

Ref to the component.

Since
  • 4.4.4
Source
Returns:

The metric card component.

Type: 
JSX.Element
Example
import MetricCard from '@gravityforms/components/react/admin/modules/Cards/MetricCard';

return (
    <MetricCard
        style="metric"
    />
);