# ObservationDetail.SingleCardDataRow

Canonical page: https://docs.ovok.com/native-sdk/guide/components/observation-detail/single-card-data-row

A label-value data row component designed for structured display of healthcare information. Provides consistent spacing, typography, and layout for observation data presentation.

## Basic Example [#basic-example]

```typescript
import { ObservationDetail } from "@ovok/native";
import * as React from "react";

const BasicMedicalData = () => (
  <>
    <ObservationDetail.SingleCardDataRow label="Systolic (mmHg)" value="120" />
    <ObservationDetail.SingleCardDataRow label="Diastolic (mmHg)" value="80" />
    <ObservationDetail.SingleCardDataRow label="Heart Rate (bpm)" value="72" />
  </>
);

export default BasicMedicalData;
```

## Props [#props]

Every prop, with its type and description, is listed in the [`@ovok/native/observation-detail` API reference](/native-sdk/reference/observation-detail).

## Component Behavior [#component-behavior]

### Layout System [#layout-system]

- Uses flexbox row layout with space-between alignment
- Label text is flexible and can wrap
- Value text is right-aligned and fixed-width
- Consistent vertical padding and alignment

### Typography [#typography]

- Standard 16px font size for both label and value
- Normal font weight (400) for medical data readability
- Inherits theme typography when available

## Styling [#styling]

### Theme Colors Used [#theme-colors-used]

- `theme.spacing(4)` - Vertical padding (16px default)
- `theme.spacing(6)` - Horizontal padding (24px default)