hightouch UI

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.

NameDefaultDescription
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.

NameDefaultDescription
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.

NameDefaultDescription
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