The primary purpose of the Sticky Card component is to ensure that the content it’s promoting remains a constant on the page -- always visible within the viewport no matter a user’s scroll position. Sticky Promo Cards can be used to promote a product and provide a CTA. While the card itself is both content and context agnostic, it should only be used strategically on pages where it will be most effective.
- Use only one primary cta per card.
- Use only one sticky promo card per page.
- The copy on the card should be short and succinct, ideally no longer than 2 lines at display size in English.
- Ensure that the sticky card placement receives maximum contrast to the background content that lies underneath (ex. If the sticky promo appears over a light colored background, use a dark sticky card by adding
mzp-t-darkto the class list.)
- Add one of these product theme classes to include a logo above the title: