Open

Open

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:

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 Accessible Colors | WCAG 2.0 AA and AAA color contrast checker 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)