# DiaryCard.StartSection

Canonical page: https://docs.ovok.com/native-sdk/guide/components/diary/start-section

The `DiaryCard.StartSection` component provides a horizontal layout container for the header section of diary cards. It manages the placement of icons, labels, and optional right-side content with automatic fallback to an arrow icon when no right content is provided.

## Basic Example [#basic-example]

```tsx
import { MeasurementTypeKey } from "@ovok/core/next";
import { DiaryCard } from "@ovok/native";
import * as React from "react";

const BasicDiaryCardStartSectionExample = () => {
  return (
    <DiaryCard.StartSection
      left={() => (
        <DiaryCard.TaskIcon
          measurementTypeKey={MeasurementTypeKey.bloodPressure}
        />
      )}
    />
  );
};

export default BasicDiaryCardStartSectionExample;
```

## Props [#props]

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

## Component Behavior [#component-behavior]

### Icon Integration [#icon-integration]

- **Default Arrow**: Uses `ArrowRight2` from `iconsax-react-nativejs`
- **Arrow Styling**: 20px size with `theme.colors.onSurfaceDisabled` color
- **Theme Integration**: Arrow color adapts to current theme

## Styling [#styling]

### Default Styles [#default-styles]

```tsx
const styles = StyleSheet.create({
  container: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
  },
});
```

## Related Components [#related-components]

- [DiaryCard](/native-sdk/guide/components/diary/diary-card/) - Parent container component
- [DiaryCard.NoData](/native-sdk/guide/components/diary/no-data/) - Empty state component
- [Tile.TaskIcon](/native-sdk/guide/components/tile/task-icon/) - Inherited icon component