> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-feature-card-builder.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Card Bubble

> Card Bubble — CometChat documentation.

The CometChatCardBubble component is used to display a card within a chat bubble. The card includes an image, text, and action buttons. It helps to offer action-oriented chat experiences, like booking a flight, ordering food, scheduling a meeting, etc., directly in the chat.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-card-builder/BeS0cj3AlwGwbqBl/images/a44e097a-1uiubx53jq7dkmcqnbq3na6n6721934evr0yyg03jdmlnwys4khdv2d0w36y7tmt-d83e7d61ec4875a1c3787b29ce757069.png?fit=max&auto=format&n=BeS0cj3AlwGwbqBl&q=85&s=eaa56cc78a844121d34aea3b3376013c" width="793" height="1680" data-path="images/a44e097a-1uiubx53jq7dkmcqnbq3na6n6721934evr0yyg03jdmlnwys4khdv2d0w36y7tmt-d83e7d61ec4875a1c3787b29ce757069.png" />
</Frame>

***

## Properities

| Methods        | Parameters               | Description                                                                                                                                            |
| -------------- | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
| message        | Card Message             | An instance of the `CardMessage` class which holds information about the card, such as image URL, text, and action buttons.                            |
| style?         | CardBubbleStyleInterface | An instance of the `CardBubbleStyle` class for customizing the appearance of the card bubble.                                                          |
| onSubmitClick? | (formData: any) => void  | A function that will be called when the action button of the card is clicked. This function receives the payload of the clicked action as an argument. |

## CardBubbleStyle

CardBubbleStyle is a class containing attributes to customize the appearance of the card in the CometChatCardBubble component.

| Methods         | Type                                                      | Description                                                                                              |
| --------------- | --------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
| backgroundColor | string                                                    | Used to set the background color of the card bubble.                                                     |
| borderRadius    | number                                                    | Used to set the border radius of the card bubble.                                                        |
| textFont        | FontStyle                                                 | Used to set the font style of the title. The object should include fontFamily, fontSize, and fontWeight. |
| textColor       | string                                                    | Used to set the color of the title.                                                                      |
| padding         | number                                                    | Used to set the padding of the card bubble.                                                              |
| buttonStyle     | ButtonStyleInterface                                      | Used to customize the style of buttons.                                                                  |
| imageStyle      | ImageBubbleStyleInterface                                 | Used to customize the style of the image in the card.                                                    |
| imageResizeMode | "cover" \| "contain" \| "stretch" \| "repeat" \| "center" | Used to set how to resize the image in the card.                                                         |

## Usage

<Tabs>
  <Tab title="TypeScript">
    ```tsx theme={null}
    <CometChatCardBubble
      message={message} //message: CardMessage
      onSubmitClick={onSubmitClick} //onSubmitClick?: (data: any) => void
      style={style} //style?: CardBubbleStyle
    />
    ```
  </Tab>
</Tabs>