# PatientCard.Meta

Canonical page: https://docs.ovok.com/native-sdk/guide/components/patient/patient-meta

A flexible container component for organizing patient metadata and secondary information. Provides consistent spacing and responsive layout for patient demographics and additional details.

## Basic Example [#basic-example]

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

const appointment = {
  time: "10:00 AM",
  type: "Checkup",
};

const AppointmentMeta = () => (
  <PatientCard.Meta>
    <Text style={{ fontWeight: "600", color: "#007bff" }}>
      {appointment.time}
    </Text>
    <Text style={{ fontSize: 12, color: "#6c757d" }}>{appointment.type}</Text>
  </PatientCard.Meta>
);

export default AppointmentMeta;
```

## Props [#props]

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

## Component Behavior [#component-behavior]

### Layout System [#layout-system]

- **Flexbox Container**: Uses row direction with space-between alignment
- **Responsive Wrapping**: Automatically wraps content to new lines when needed
- **Consistent Spacing**: Applies theme-based gaps between child elements
- **Center Alignment**: Vertically centers all child components

### Content Organization [#content-organization]

- Groups related patient information logically
- Maintains visual hierarchy with consistent spacing
- Supports mixed content types (text, chips, buttons)
- Provides flexible layout for various screen sizes

## Styling [#styling]

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

- `theme.spacing(3)` - Gap between child elements (12px default)

## Layout Responsiveness [#layout-responsiveness]

- Automatically adjusts for different screen widths
- Wraps content intelligently when space is constrained
- Maintains readable spacing on all device sizes
- Supports both portrait and landscape orientations