hightouch

Upsell Card

Upsell card is used to indicate locked features that are accessible only to customers on a different billing plan and prompt customers to upgrade.

#

#

#

#

#

#

#

#

#

Inherits margin props.

Name	Default	Description
`badgeText`	—	`string` Text of a badge at the top of the card.
`title`	—	`string` Card title. Usually contains a name of the feature to unlock.
`children`	—	`ReactNode` Card content.
`actionText`	—	`string` Text of a call-to-action button.
`onAction`	—	`() => void` Callback when call-to-action button is clicked.

#

Inherits margin props.

Name	Default	Description
`message`	—	`ReactNode` Card message.
`actionText`	—	`string` Text of a call-to-action button.
`onAction`	—	`() => void` Callback when call-to-action button is clicked.

#

Inherits margin props.

Name	Default	Description
`badgeText`	—	`string` Text of a badge at the top of the card.
`title`	—	`string` Card title. Usually contains a name of the feature to unlock.
`children`	—	`ReactNode` Card content.
`actionText`	—	`string` Text of a call-to-action button.
`videoUrl`	—	`string` URL to a video that's displayed on the side.
`videoPoster`	—	`string` URL to a video thumbnail.
`imageUrl`	—	`string` URL to an image that's displayed on the side.
`onAction`	—	`() => void` Callback when call-to-action button is clicked.

On this page

Example
Usage

Default
Minimal
Extended
Extended with video
Extended with image
Props
UpsellCard
MinimalUpsellCard
ExtendedUpsellCard