A themed card container component for grouping related observation data with consistent styling, shadows, and Material Design 3 theming. Provides structured presentation for healthcare information.

Basic Example

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

const vitals = {
  systolic: 120,
  diastolic: 80,
  heartRate: 70,
  temperature: 37.5,
};

const VitalSignsContainer = () => (
  <ObservationDetail.DataContainer>
    <ObservationDetail.SingleCardDataRow
      label="Blood Pressure"
      value={`${vitals.systolic}/${vitals.diastolic} mmHg`}
    />
    <ObservationDetail.SingleCardDataRow
      label="Heart Rate"
      value={`${vitals.heartRate} bpm`}
    />
    <ObservationDetail.SingleCardDataRow
      label="Temperature"
      value={`${vitals.temperature}°C`}
    />
  </ObservationDetail.DataContainer>
);

export default VitalSignsContainer;