# ObservationDetail.DataContainer

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

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 [#basic-example]

```typescript
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;
```

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

### Visual Design [#visual-design]

- Material Design 3 card appearance with elevation
- Themed border and shadow colors
- Rounded corners with theme-based radius
- Consistent padding and spacing

### Theme Integration [#theme-integration]

- Automatically applies surface colors
- Respects theme border and shadow colors
- Uses theme-based border radius and spacing
- Supports light and dark mode variations

## Styling [#styling]

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

- `theme.colors.surface` - Card background color
- `theme.colors.outlineVariant` - Card border color
- `theme.colors.shadow` - Card shadow color
- `theme.borderRadius(2)` - Card corner radius (8px default)