# ContentCard

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

`ContentCard` is a small compound wrapper around React Native Paper's `Card`. It is content-agnostic: the app supplies the title, image URI, badge, and press behavior.

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

<ContentCard onPress={() => openContent(id)}>
  <ContentCard.Cover uri={imageUri} badge="Featured" />
  <ContentCard.Content>
    <ContentCard.Title>{title}</ContentCard.Title>
  </ContentCard.Content>
</ContentCard>;
```

## Exports [#exports]

- `ContentCard`: the root Paper `Card`; it uses `mode="contained"` and the app theme's `surface` color.
- `ContentCard.Cover`: padded image container using `OptimizedImage` with a 16:9 cover default.
- `ContentCard.CoverBadge`: a themed, absolutely positioned badge.
- `ContentCard.Content`: React Native Paper `Card.Content`, exported unchanged.
- `ContentCard.Title`: Paper `Text` with a `titleLarge` default and two-line truncation.

## Root props [#root-props]

The root accepts `Omit<CardProps, "elevation">` and optional children. `style`, `contentStyle`, `testID`, `onPress`, accessibility props, and other supported Paper card props are passed to the card. The SDK does not add a navigation action or content model.

## Cover props [#cover-props]

`ContentCard.Cover` accepts `OptimizedImageProps` plus:

| Prop | Type | Notes |
| --- | --- | --- |
| `uri` | `string` | Required image URI. |
| `badge` | `string \| (() => ReactNode)` | A string renders `CoverBadge`; a function returns custom badge content. |
| `containerStyle` | `StyleProp<ViewStyle>` | Style for the padded outer container. |
| `testID` | `string` | Applied to the container; `-cover` and `-badge` are used for generated children. |

The cover sets `fit="cover"`, `width="100%"`, and `aspectRatio={16 / 9}` before spreading image props, so supported image props can override those defaults.
`containerStyle` is consumed by `ContentCard.Cover` for the outer padded view and is
not forwarded to `OptimizedImage`; use `style` for the rendered image itself.

## Badge and title props [#badge-and-title-props]

`ContentCard.CoverBadge` requires either `label` or `children` and accepts `size` (`small`, `medium`, or `large`), `style`, `textStyle`, and `testID`. The badge is positioned from the top-left of the cover.

`ContentCard.Title` requires `children` and accepts Paper `TextProps`, `style`, and `testID`. It defaults to `variant="titleLarge"`, sets `numberOfLines={2}`, and uses the SDK bold font.

## Theme and localization [#theme-and-localization]

The component reads colors, spacing, and radii from `useAppTheme`. It has no built-in content-card translation keys. Localize titles and badge labels in the calling app. `ContentCard.Content` is a raw Paper primitive, so its supported props come from the installed React Native Paper version.