# Content components

Canonical page: https://docs.ovok.com/native-sdk/guide/modules/content

Use the content module to render app-owned content collections or a detail view
backed by a FHIR `Composition`. These are presentation components: the app loads the
content, applies access rules, and handles navigation.

## Choose the surface [#choose-the-surface]

- Use `ContentCard` for one item in a grid or feed.
- Use `ContentList` for a titled or horizontally scrolling collection.
- Use `ContentDetail` when a `Composition` should provide the content for a detail
  screen.

```tsx
import { ContentCard } from "@ovok/native/content";

<ContentCard onPress={() => openContent(item.id)}>
  <ContentCard.Cover uri={item.cover} />
  <ContentCard.Content>
    <ContentCard.Title>{item.title}</ContentCard.Title>
    {item.summary}
  </ContentCard.Content>
</ContentCard>
```

The card and list primitives can render your own view model. They do not fetch
content or decide which items a user can see. For `ContentDetail`, load and authorize
the `Composition` in the app, then pass it through the component's `composition` prop;
the component provides it to `useComposition` descendants.

## Keep content behavior in the app [#keep-content-behavior-in-the-app]

Own loading, empty, and error states at the screen level. Handle links, downloads,
and analytics in the callbacks you pass to the components. Use the composition hook
only inside the provider subtree, and do not treat a rendered resource as proof that
the user is authorized to access it.

## References [#references]

- [ContentCard](/native-sdk/guide/components/content/content-card/)
- [ContentList](/native-sdk/guide/components/content/content-list/)
- [ContentDetail and composition context](/native-sdk/guide/components/content/content-detail/)
- [Content module exports](/native-sdk/guide/components/content/)

## API reference [#api-reference]

Every export of `@ovok/native/content`, with signatures, props and types, is in the [`content` API reference](/native-sdk/reference/content).