# 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>