Creative Details
Get creative with Content Cards! But you should know some of the guidelines first! After all, you have to know the rules to break them! Check out the following individual message type’s Creative Specs or the global Creative Details.
Message Type Creative Specs
Content Card types
Classic
The classic card is great for standard messaging and notifications or even visually categorizing messages with icons. The image is optional, but it must be at a 1:1 ratio.
Card Capability | Details |
---|---|
Header Text | 18px; Bolded One line of text is ideal. You may use Liquid here to personalize your message. |
Message Text | 13px; Regular Weight Two to four lines of text is ideal. You may use Liquid here to personalize your message. |
Link Text | Optional. 13px Link to webpage or deep link to within your app. |
Image | Optional. Must be 1:1 ratio. We recommend an image quality of 60px by 60px. |
Captioned image
The Captioned Image card is a great way to show off and attract attention to important content, like a big sale or a new app feature!
Card Capability | Details |
---|---|
Header Text | 18px; Bolded One line of text is ideal. You may use Liquid here to personalize your message. |
Message Text | 13px; Regular Weight Two to four lines of text is ideal. You may use Liquid here to personalize your message. |
Link Text | Optional. 13px Link to webpage or deep link to within your app. |
Image | Suggested be 4:3 ratio. 600px minimum width. Supports hi-res PNG, JPEG, and GIF. |
Banner
If you want fancy, the banner card is for you! this is completely custom to what you want it to be. Just create your content elsewhere and upload it for a beautiful card that’s all your own.
Card Capability | Details |
---|---|
Linked Card | Optional. 13px On-click behavior link to a webpage or a deep link to within your app. |
Image | Any aspect ratio supported. 600px minimum width. Supports hi-res PNG, JPEG, and GIF. |
Creative details
Content Cards come with great functionality from the very beginning. At this time, card styling cannot be done natively in your Braze account, but you can style your Content Card by type and the Content Card feed during integration. Refer to Customizing Content Cards for more information.
Dismissal behavior
For a user to dismiss a card, they can either swipe it away on mobile, or use a close X
function, as shown in the following screenshot. The x
will appear on hover for the Web SDK only.
If a user has dismissed all of their cards or you haven’t pushed out any new updates, the user’s feed will usually look something like this:
Using GIFs in Content Cards
Content Cards for Android | Content Cards for iOS | Content Cards for Web |
---|---|---|
Install Custom Image Library. | Included in integration. | Included in Integration. |