Versions Compared

Version Old Version 3 New Version Current
Changes made by

Lopes da Costa, Valentina

Lopes da Costa, Valentina

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Info

Marketing Content → Components → Homepage Components → Marketing Card

What are Marketing Cards?

Marketing cards are a simple and accessible way to promote content. Cards stack in one column on small screens, and stack in two columns on large screens.

...

  1. Standard Variant - This card maintains standard colors and should be used the VAST majority of the time

  2. Campaign Variant - This card takes custom colors and is intended for very special occasions. It should be used minimally

Best Practices

Image Spec:

Tip

  • Keep as much text off of images as possible. This becomes an accessibility problem, and is also bad for SEO

    • If there is text included in the artwork, you MUST also include in the description on the card

  • Image size = 1000 x 500 px

  • Use brand colors where possible to continue enforcing brand identity

Text Expectations:

Tip

  • Calls to action (CTAs) on our buttons should be short and sweet. Max 3 words

  • If there is text included in the artwork, you MUST also include in the description on the card

Content Set-up

Required Content

  1. Header - The title on the card

  2. Description - The description on the card. This should be short and sweet - ideal case keep this to 1 or 2 lines, but should wrap to a maximum 3 lines on small screens

  3. Image - Refer to image spec above

  4. Image Description

  5. CTA Text - This is the text inside of the action button. Max 3 words, and should be in Title Case

  6. CTA url - the url that the user will be redirected to when they click on the card

    1. Internal routes - must start with / for example, /account

    2. External routes - should contain the full url

Custom Colors

This should only be toggled if you are creating a ‘campaign variant’ marketing tile. Keep in mind, these should be used minimally

...

IMPORTANT NOTE: You are responsible for validating that the color combinations you have set are AA compliant. Check https://accessible-colors.com/ before publishing

...

 

Terms

This should only be toggled if your card is related to a campaign or initiative that has terms and conditions associated

  1. Terms text variant: if you’d like your terms to pop up in a modal, paste the copy in this field

  2. Terms button variant: if you’d like to redirect the user to a separate terms page, set the url here

Marketing Card Groups

Once you have created your individual cards, you must create a set of marketing cards that will all show on the UI together. It is ok to have only one card in a group, up to around 6 maximum. The order you rank them in this list will be the order they show to the user

 

Enable Visibility

Now that you have a marketing card group established, you can add it to the homepage.

Visit {sanity url}/desk/content;features;featureHomePage

  1. Add a ‘referenced marketing card group’ to the list

  2. Link the group you have created

  3. Publish changes

 

Tracking

mParticle event called: Marketing Tile Click (same as the old tile version)

...