# Card

Renders custom attachments inside [`MessageList`](/chat/docs/sdk/react-native/ui-components/message-list/). See [Custom Attachment](/chat/docs/sdk/react-native/guides/custom-attachment/) for usage.

## Best Practices

- Provide fallback values when `image_url` or `thumb_url` are missing.
- Keep card content concise to avoid oversized previews.
- Use `og_scrape_url` for navigation and avoid custom link logic.
- Ensure press handlers are lightweight and accessible.
- Customize via `CardHeader`/`CardCover`/`CardFooter` for consistent styling.

## Props

### `additionalPressableProps`

<partial id="chat-sdk/react-native/v8-latest/_partials/common-content/ui-components/channel/props/additional_pressable_props"></partial>

### `author_name`

Author name shown in the card footer.

| Type   |
| ------ |
| string |

### `image_url`

Cover image URL. If missing, `thumb_url` is used.

| Type   |
| ------ |
| string |

### `og_scrape_url`

URL to open when the card is pressed.

| Type   |
| ------ |
| string |

### `onLongPress`

<partial id="chat-sdk/react-native/v8-latest/_partials/common-content/contexts/message-context/on_long_press"></partial>

### `onPress`

<partial id="chat-sdk/react-native/v8-latest/_partials/common-content/contexts/message-context/on_press"></partial>

### `onPressIn`

<partial id="chat-sdk/react-native/v8-latest/_partials/common-content/contexts/message-context/on_press_in"></partial>

### `text`

Text description shown in the card footer.

| Type   |
| ------ |
| string |

### `thumb_url`

Thumbnail URL for cover image.

| Type   |
| ------ |
| string |

### `title`

Title shown in the card footer.

| Type   |
| ------ |
| string |

## UI Component Props

### `CardCover`

Renders the main body of [`Card`](/chat/docs/sdk/react-native/ui-components/card/) attachments. See [Custom Attachment](/chat/docs/sdk/react-native/guides/custom-attachment/).

| Type          |
| ------------- |
| ComponentType |

### `CardFooter`

Renders the footer for [`Card`](/chat/docs/sdk/react-native/ui-components/card/) attachments. See [Custom Attachment](/chat/docs/sdk/react-native/guides/custom-attachment/).

| Type          |
| ------------- |
| ComponentType |

### `CardHeader`

Renders the header for [`Card`](/chat/docs/sdk/react-native/ui-components/card/) attachments. See [Custom Attachment](/chat/docs/sdk/react-native/guides/custom-attachment/).

| Type          |
| ------------- |
| ComponentType |

### `ImageComponent`

<partial id="chat-sdk/react-native/v8-latest/_partials/common-content/ui-components/chat/props/image_component"></partial>


---

This page was last updated at 2026-03-06T17:06:07.295Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react-native/ui-components/card/](https://getstream.io/chat/docs/sdk/react-native/ui-components/card/).