Card

A card can be used to display mixed content, together with optional actions, in a visually appealing way.

JSON Structure

All fields prefixed with a star (*) are required

Card

A top level component used to display a menu or raw text

KEY TYPE NOTES
header object A CardHeader object
src string Link to public url for card media (image, mp4, youtube or vimeo)
title string Card title in main card body
subtitle string Card subtitle in main card body
description string Card content in main card body
actions array Array of CardAction objects
action_label string Label for the select option on SMS

CardHeader

Card related component used to display a header within a card

KEY TYPE NOTES
*title string Card title of the card header
subtitle string Card subtitle of the card header
avatar object A CardAvatar object

CardAvatar

CardHeader related component holding details about the avatar to be displayed

KEY TYPE NOTES
src string Link to public url of avatar image
name string Name of the avatar to be used as a fallback in case image is not provided or accessible

CardAction

Card related component providing an action button within a card

KEY TYPE NOTES
name string Name of the action button
path string Path for the callback action
method string Method to use when path is specified, defaults to GET

Swagger

The schema can also be found on Swagger Hub here

JSON Example

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
{
    header: {
        title: 'Our new product line',
        subtitle: 'kritter, 7 days ago',
        avatar: {
            src: 'https://image.png',
            name: 'chris horn'
        }
    },
    src: 'https://example.com/assets/bike.png',
    title: 'Our new product line',
    subtitle: null,
    description: 'A motorcycle, often called a motorbike, bike, or cycle is a two- or three-wheel...',
    actions: [{
        name: 'Read more',
        path: '/path/read/more',
        method: 'get'
    }, {
        name: 'Like (1)',
        path: '/path/like',
        method: 'post'
    }],
    action_label: 'Select'
}