Upsell - Usage

Basic Guidelines

Upsell is a Section, so it already has all padding built into the Figma component. Sections always have a clear purpose and should not be altered outside of their defined pattern, in this case upsell of products or app.

Please refer to the Section Heading documentation for detailed guidance.

Alignment

Sections are always placed at full width of the viewport. There is no need for additional top and bottom padding, as this is already built in.

Mobile

Desktop

The below example has been downsized proportionally to fit into this documentation.

Adjustable Elements

If the App Buttons are turned on, please do not use additional Buttons from the Section Heading content. This is to avoid confusion on the primary action of the Upsell Section.

Colour Usage

Previously there was a supported light appearance, this has now been removed as part of the 2025 Rebrand. No colours within this section should be changed, that includes the headline in the nested Section Headline component.

Image Sizing

The 3:2 image ratio is the same for both desktop and mobile and should not be changed to a different ratio. It has rounded corners which also shouldn’t be turned off or altered.