Card design principles

General principles

The end goal of sending cards is to get your target audience to take action. Every time you create content make sure it’s:

Make it obvious what action(s) your audience need to take.

Keep content concise and to-the-point.

One concept to one card.

Use language that your audience will understand the first time they read it.

Speak to your audience using your common brand vocabulary and concepts.

Know your audience. Personalized content helps build trust.

If using the Category element, make sure they’re consistently labelled, especially if you’re using multiple streams.
Keep headlines visually short – on one or two lines if possible. This helps with both scannability and readability. Test on older, smaller devices to check line breaks.
Keep headlines focused on one concept or task.
If you have long body copy (such as terms & conditions) that you need to include in the card, use a subview instead of trying to fit it onto the top-level of a card or linking customers away from your app.
Limit body copy to one paragraph where possible, and ideally no more than five lines.
Make action button labels as succinct, to-the-point and familiar to your audience as possible.
Keep action button options to two or less. Focus on offering one primary action and one secondary if necessary.

Using imagery can help draw attention to your card's content – but keep it relevant to the content and/or action you want taken.
Test on older, smaller devices to check how the image could be cropped.
Establish content hierarchy by ordering text elements in order of importance – eg. Headline followed by body copy.
Be mindful of text line heights. Headlines can be tighter (use smaller values), while smaller body copy need more space to be readable.
Use your brand or campaign-specific fonts wherever possible.
Use relevant icons to help convey the intent of the action buttons.
Smaller is better – in regards to overall height of your top-level card. Especially if it sits in a stream with other cards. Concise content on the top-level helps with scannability of the stream, reduces the visual ‘noise’ your audience has to process and means you can also fit more cards in the viewport.
Customize the Theme to compliment surrounding application content – such as colors, fonts and font sizes, as well as system actions like swiping to snooze or dismiss the card.

Make sure you use strong color contrast on text and action buttons. You can use Web AIM to check your color combinations.
Font sizes: this will depend on the font, but a good rule of thumb is to set body text to around 16px. And/or enable Dynamic scaling in the theme editor – meaning that text will respond to the font size preference set by the customer in their device settings (Android and iOS).
Use Alternate text on images and video components.
Customize the focus ring color (Web SDK) to highlight components when a customer tabs through a stream container or single card.
You can find more information on accessibility in our Accessibility guide.