Marketing Card

Owned by Fernandes, Francisco
Mar 21, 2022
3 min read

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.

 

Marketing tiles come in two variants:

  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:

  • 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:

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

Toggling this flag allows you to set custom colors for the different elements on the card

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)

with attribute called: Marketing card id (updated from the old tile version)