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.

#Example

#Usage

#Default

#Minimal

#Extended

#Extended with video

#Extended with image

#Guidelines

#When to use

• When indicating a locked feature that's only accessible on a different billing plan, and prompting the customer to upgrade.

#When not to use

• If a single inline control triggers the upgrade rather than a dedicated page section, use an upsell button instead.
• If confirming a completed upgrade or unlocked feature, use an upsell success dialog instead.

#Actions

It is preferred that upsell cards have a single action, either a Button or LinkButton, in the secondary style.

For best practice, please avoid opening pylon chat or routing to CSE for upsell processes unless advised otherwise. Instead, users should be directed either to the marketing website or a direct demo form embed within the app.

#Props

#UpsellCard

Inherits margin props.

Name	Default	Description
badgeText	—	stringText of a badge at the top of the card.
title	—	stringCard title. Usually contains a name of the feature to unlock.
children	—	ReactNodeCard content.
actions	—	ReactNodeCall-to-action buttons to display in the card. Preferably a secondary button style.

#MinimalUpsellCard

Inherits margin props.

Name	Default	Description
message	—	ReactNodeCard message.
actionText	—	stringText of a call-to-action button.
onAction	—	() => voidCallback when call-to-action button is clicked.

#ExtendedUpsellCard

Inherits UpsellCard and margin props.

Name	Default	Description
badgeText	—	stringText of a badge at the top of the card.
title	—	stringCard title. Usually contains a name of the feature to unlock.
children	—	ReactNodeCard content.
actions	—	ReactNodeCall-to-action buttons to display in the card. Preferably a secondary button style.
videoPoster	—	stringURL to a video thumbnail.
videoUrl	—	stringURL to a video that's displayed on the side.
imageUrl	—	stringURL to an image that's displayed on the side.