Sett documentation and guidelines
Upsell
The Upsell is used in areas of the app where only Badgr Pro users can take advantage of a specific feature.
Best practices
Upsell should:
Be implemented below Top Matter and in the tabbed view that displayed the “Pro” Feature Flag.
Take up the entire width of a page.
Contain all elements that make up the anatomy of Upsell.
Anatomy
Upsell can deploy up to seven parts:
Heading
Body copy
Primary action
Text link (optional)
Illustration
Hexagon background
Accessibility
For users who interact with Badgr via assistive technologies like screen readers, Upsell should give the user the ability to:
Access any available text
Interact with a call to action
Interact with a text link
Not interact with the illustration
Accessible labeling
Use an aria-label to help users better understand the Upsell’s intention when accessing via assistive technologies.
aria label practices:
Use an aria-label if the visible text doesn't convey the button's action intent adequately.
Hide the illustration from screen readers. It will read back to users as “image,” which can be misleading.
Copy
Upsell content can display the following styles of copy and should follow Badgr’s content guidelines:
Heading
Body copy
Button label
Text link
Breakpoints and layout
There are three layouts used for Upsell - one for small screens (i.e. mobile devices), one for medium sized screens (i.e. tablets), and one for larger screens (i.e. laptops and larger displays).
Mobile breakpoint (288px): The smallest breakpoint for Upsell is 288px and uses a vertical layout in order to use space efficiently. The logo is also hidden in this layout in order to best display the most relevant content and minimize scrolling.
Tablet breakpoint (720px): The medium sized breakpoint for Upsell is 720px and changes the layout from vertical to horizontal in order to distribute the content and illustration in a way that minimizes scrolling.
Illustration
Reference Badgr’s illustration library and try to use existing illustrations to maintain consistency with recurring use cases, if possible. If a new illustration needs to be created, consult branding and marketing.
Cropping
Upsell places the illustration on top of a background shape and crops the illustration area intentionally, with different treatments for smaller screens and larger screens. Follow existing Upsell instances.
