ObservationDetail.SingleCardDataRow

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

Basic ExampleCopy Anchor Link

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;

PropsCopy Anchor Link

Every prop, with its type and description, is listed in the @ovok/native/observation-detail API reference.

Component BehaviorCopy Anchor Link

Layout SystemCopy Anchor Link

• 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

TypographyCopy Anchor Link

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

StylingCopy Anchor Link

Theme Colors UsedCopy Anchor Link

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