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.
- The element is hidden by default and made visible by the
- As a helper, you can set the sticky promo to automatically animate in once the page is loaded by adding
mzp-js-show-on-loadto the class list.
- 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:
- A dark theme is also available using the theme class