Version:

Install ​

shell
npm i @mate-react/facet

Import ​

tsx
import { MateFacet, MateFacetList } from '@mate-react/facet';

Variants ​

Default (Stacked) ​

tsx
<MateFacetList titleText="Title">
  <MateFacet keyText="Key 1">Value 1</MateFacet>
  <MateFacet keyText="Key 2">Value 2</MateFacet>
</MateFacetList>

Inline ​

tsx
<MateFacetList titleText="Title" theme="inline key-separator">
  <MateFacet keyText="Key 1">Value 1</MateFacet>
  <MateFacet keyText="Key 2">Value 2</MateFacet>
</MateFacetList>

Right Aligned ​

tsx
<MateFacetList titleText="Title" theme="inline key-separator right-aligned">
  <MateFacet keyText="Amount" valueText="1.234,56 €" />
  <MateFacet theme="error" keyText="Overdue" valueText="-200,00 €" />
</MateFacetList>

KPI ​

tsx
<MateFacet keyText="Total" theme="kpi">
  916
  <span theme="badge success no-border">5.14%</span>
</MateFacet>