# Vital Tile

> One health value with its healthy range: the value, a band with the normal zone and a marker, a status in words (in range, below, above) and an optional trend.

Component · Life · Pro kit · [Live page](https://ui.twentyfirst.media/pro/components/VitalTile/)

One health value with its healthy range: the value, a band with the normal zone and a marker, a
status in words (in range, below, above) and an optional trend.

- `normal` is the healthy range; `scale` the whole band (default: the range with room around it).
- `digits` for decimals, `unit`, `caption` for the source and time of the reading.
- The status is text in a badge, never colour alone.

## Example

```tsx
import type * as React from "react";
import { VitalTile } from "@twentyfirstmedia/pro";

export default function Preview() {
  return (
    <div
      className="tf-grid"
      style={
        {
          "--cols": "repeat(3, minmax(0, 1fr))",
          "--cols-sm": "1fr",
          gap: 16,
        } as React.CSSProperties
      }
    >
      <VitalTile
        label="Resting heart rate"
        value={58}
        unit="bpm"
        normal={[50, 80]}
        trend={[61, 60, 62, 59, 58, 58, 57, 58]}
        caption="Watch · this morning"
      />
      <VitalTile
        label="Blood pressure (systolic)"
        icon="zap"
        value={138}
        unit="mmHg"
        normal={[90, 129]}
        trend={[128, 131, 130, 134, 136, 135, 138]}
        caption="Cuff · yesterday 21:10"
      />
      <VitalTile
        label="Weight"
        icon="trend"
        value={74.2}
        digits={1}
        unit="kg"
        trend={[75.8, 75.4, 75.1, 74.9, 74.6, 74.4, 74.2]}
        caption="Scale · today"
      />
    </div>
  );
}
```

## Props

### VitalTile

| Prop | Type | Notes |
| --- | --- | --- |
| `surface?` | `Surface` | `"glass"`: translucent glass over a backdrop (`Ambient`, a photo, a map); `"solid"` opts out inside a glass `UIProvider`. |
| `label` | `string` | Required |
| `value` | `number` | Required |
| `unit?` | `string` |  |
| `icon?` | `IconName` |  |
| `normal?` | `[number, number]` | The healthy range [low, high]; the tile says whether the value is below, in or above it. |
| `scale?` | `[number, number]` | The whole scale of the band [min, max] (default: the normal range with room on both sides). |
| `trend?` | `number[]` | Recent values, oldest first, drawn as a sparkline. |
| `caption?` | `ReactNode` | Under the value: when it was measured, the source … |
| `digits?` | `number` | Digits after the decimal point (default 0). |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |