# @ovok/native/content

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

Content cards, lists and detail screens for educational content.

Import from `@ovok/native/content`.

## Components [#components]

### ContentCard() [#contentcard]

```ts
function ContentCard(props): Element;
```

Card for a piece of content; compose it with the `ContentCard.*` sub-components.

#### Parameters [#parameters]

| Parameter | Type |
| ------ | ------ |
| `props` | `SurfaceCardProps` |

#### Returns [#returns]

`Element`

***

### ContentDetail() [#contentdetail]

```ts
function ContentDetail(__namedParameters): Element;
```

Scrollable detail view for a Composition; compose it with the `ContentDetail.*` sub-components.

#### Parameters [#parameters-1]

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `PropsWithChildren`\<`ContentDetailProps`\> |

#### Returns [#returns-1]

`Element`

***

### ContentList() [#contentlist]

```ts
function ContentList<T>(__namedParameters): Element;
```

List of content sections; compose rows with the `ContentList.*` sub-components.

#### Type Parameters [#type-parameters]

| Type Parameter |
| ------ |
| <a id="type-parameter-t"></a> `T` *extends* `DefaultContentData`\<`T`\[`"contents"`\]\[`number`\]\> |

#### Parameters [#parameters-2]

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `ContentListProps`\<`T`\> |

#### Returns [#returns-2]

`Element`

***

### HorizontalList() [#horizontallist]

```ts
function HorizontalList<T>(__namedParameters): Element;
```

Horizontally scrolling list of content cards.

#### Type Parameters [#type-parameters-1]

| Type Parameter |
| ------ |
| <a id="type-parameter-t-1"></a> `T` *extends* `object` |

#### Parameters [#parameters-3]

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `HorizontalListProps`\<`T`\> |

#### Returns [#returns-3]

`Element`

***

### Section() [#section]

```ts
function Section(props): Element;
```

Vertically spaced container for one content section.

#### Parameters [#parameters-4]

| Parameter | Type |
| ------ | ------ |
| `props` | `ViewProps` |

#### Returns [#returns-4]

`Element`

***

### Title() [#title]

```ts
function Title<T>(__namedParameters): Element;
```

Section title text.

#### Type Parameters [#type-parameters-2]

| Type Parameter |
| ------ |
| <a id="type-parameter-t-2"></a> `T` *extends* `MD3TypescaleKey` |

#### Parameters [#parameters-5]

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `Props`\<`T`\> |

#### Returns [#returns-5]

`Element`

***

### ViewAll() [#viewall]

```ts
function ViewAll<T>(__namedParameters): Element;
```

Small text link for opening the full list; defaults to the translated "view all" label.

#### Type Parameters [#type-parameters-3]

| Type Parameter |
| ------ |
| <a id="type-parameter-t-3"></a> `T` *extends* `MD3TypescaleKey` |

#### Parameters [#parameters-6]

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `Omit`\<`Props`\<`T`\>, `"children"`\> & `object` |

#### Returns [#returns-6]

`Element`

## Hooks [#hooks]

### useComposition() [#usecomposition]

```ts
function useComposition(): CompositionContextType;
```

Returns the composition context; must be used within a `ContentDetail`.

#### Returns [#returns-7]

[`CompositionContextType`](#compositioncontexttype)

## Type Aliases [#type-aliases]

### CompositionContextType [#compositioncontexttype]

```ts
type CompositionContextType = object;
```

Value of the composition context.

#### Properties [#properties]

##### composition? [#composition]

```ts
composition?: Composition;
```

The FHIR Composition shown by the content detail components.

## Variables [#variables]

### CompositionContext [#compositioncontext]

```ts
const CompositionContext: Context<CompositionContextType | null>;
```

Context holding the composition shown by the content detail components.