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.

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

The background of the light appearance can be changed to any suitable channel colour, as long as it’s dark enough to provide enough contrast to comply with AA standards.

No other colours within this section should be changed, that includes the headline in the nested Section Heading 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.