This page covers advanced styling and layout features for structured content, including padding control, text alignment, separators, and interactive containers. Use these options to customize spacing, text alignment, and accessibility in your rich messages.
Platform Availability:
iOS: Available from SDK v6.25 (documentation)
Android: Available from SDK v5.26 (documentation)
Web: Coming soon
Padding Control
Define custom padding for structured content components. Use leading, top, trailing, and bottom values to control spacing around elements (e.g., images, buttons, or text). Applies to both vertical and horizontal layout containers.
| Attribute | Description | Applicable to | Notes |
|---|---|---|---|
| style\padding\leading | leading padding values: 0 (no padding) or positive values | "text", "image", "button", "map", "separator", "vertical", "horizontal | iOS: optional |
| style\padding\top | top padding values: 0 (no padding) or positive values | "text", "image", "button", "map", "separator", "vertical", "horizontal | iOS: optional |
| style\padding\trailing | trailing padding values: 0 (no padding) or positive values | "text", "image", "button", "map", "separator", "vertical", "horizontal | iOS: optional |
| style\padding\bottom | bottom padding values: 0 (no padding) or positive values | "text", "image", "button", "map", "separator", "vertical", "horizontal | iOS: optional |
Text Alignment
Align text and buttons within containers. Options: leading, center, or trailing.
iOS mobile SDK defaults: text aligns to leading, buttons to center."
| Attribute | Description | Applicable to | Notes |
|---|---|---|---|
| style\text-alignment | Available values: leading, center, trailing
|
"text", "button" | iOS: optional. Defaults: leading (text), center (buttons). When text alignment is applied, the iOS SDK applies 12px horizontal padding (insets) and 6px vertical padding (insets). |
Separators
Add a separator element between elements in vertical/horizontal layouts. Customize thickness, and styling via JSON.
| Attribute | Description | Notes |
|---|---|---|
| separator\thickness | Minimum 1. | Required |
| separator\style\color | Separator line color (HEX). | Optional |
| separator\style\background-color | Separator background color (HEX). | Optional |
"separator": {
"thickness": 2,
"style": {
"color": "#00FF00",
"background-color": "#FF0000",
"padding": {
"leading": 10,
"top": 10,
"trailing": 10,
"bottom": 10
}
}
}
Example: Vertical card with padding, separators, and aligned text
{
"type": "vertical",
"elements": [
{
"type": "vertical",
"border": "borderLess",
"style":
{
"padding":
{
"top": 8,
"leading": 16,
"trailing": 16
}
},
"separator":
{
"thickness": 3,
"style":
{
"background-color": "#E0E0E0"
}
},
"elements": [
{
"type": "vertical",
"elements": [
{
"type": "horizontal",
"percentages": [
20,
80
],
"separator":
{
"thickness": 1,
"style":
{
"background-color": "#E0E0E0"
}
},
"elements": [
{
"type": "image",
"url": "https://IMAGE_DOMAIN.com/card-1.png",
"tooltip": "image tooltip",
"alt": ""
},
{
"type": "vertical",
"elements": [
{
"type": "text",
"text": "Card One",
"style":
{
"size": "large",
"padding":
{
"leading": 8,
"trailing": 8
}
}
},
{
"type": "text",
"text": "20-71-45 12345678",
"style":
{
"color": "#5b5b62",
"padding":
{
"top": 0,
"bottom": 8,
"leading": 8,
"trailing": 8
}
}
}]
}]
},
{
"type": "text",
"text": "200,000.00 USD",
"style":
{
"bold": true,
"text-alignment": "trailing"
}
}]
},
{
"type": "vertical",
"style":
{
"padding":
{
"top": 16,
"leading": 0,
"bottom": 16,
"trailing": 0
}
},
"click":
{
"actions": [
{
"type": "publishText",
"text": "Second Row Tapped"
}]
},
"elements": [
{
"type": "horizontal",
"border": "borderLess",
"percentages": [
20,
80
],
"elements": [
{
"type": "image",
"url": "https://IMAGE_DOMAIN.com/card-1.png",
"tooltip": "image tooltip",
"alt": ""
},
{
"type": "vertical",
"elements": [
{
"type": "text",
"text": "Card Two",
"style":
{
"size": "large",
"padding":
{
"top": 0,
"bottom": 0,
"leading": 8,
"trailing": 8
}
}
},
{
"type": "text",
"text": "20-70-45 12345678",
"style":
{
"color": "#5b5b62",
"padding":
{
"top": 0,
"bottom": 8,
"leading": 8,
"trailing": 8
}
}
}]
}]
},
{
"type": "text",
"text": "199,000.00 USD",
"style":
{
"bold": true,
"text-alignment": "trailing"
}
}]
}]
},
{
"type": "button",
"title": "Click me to apply",
"click":
{
"actions": [
{
"type": "publishText",
"text": "consumer text"
}]
},
"style": {
"text-alignment": "leading",
"padding": {
"top": 5,
"leading": 10,
"bottom": 5,
"trailing": 10
}
}
},
{
"type": "button",
"title": "Visit our page",
"click":
{
"actions": [
{
"type": "link",
"uri": "https://www.google.com"
}]
},
"style": {
"text-alignment": "trailing",
"padding": {
"top": 5,
"leading": 10,
"bottom": 5,
"trailing": 10
}
}
}]
}
Interactive Layout Containers
This feature allows you to group multiple elements (like text, buttons, or images) into a single tappable vertical/horizontal container using click/action, tooltip and groupAsSingleAccessibleElement. When click/action is added to a vertical or horizontal container, the entire area becomes clickable, overriding individual child interactions if groupAsSingleAccessibleElement is true.
| Attribute | Description | Applicable to | Notes |
|---|---|---|---|
| click\action | action for the container | "image", "button", "map", "vertical", "horizontal | iOS: optional |
| tooltip | accessibility label. Required if click\action exists. | "text", "image", "button", "map", "vertical", "horizontal | iOS: optional |
| groupAsSingleAccessibleElement | v1 -> true: group all its children and their descendants as a one element. Note: Even though any child or descendant has a click action such elements will not be accessible if any of its ancestors or its parent has an attribute groupAsSingleAccessibleElement specified as true. false: all sub elements can be interact or accessible |
"vertical", "horizontal | iOS: optional, default as false |
| groupAsSingleAccessibleElement | v2 -> If true, treats all child elements as a single tappable area (overrides child click actions). Default: false. | "vertical", "horizontal | iOS: optional, default as false |
W3C Accessibility Requirement:
If click\action is defined for a container, you must include a tooltip (accessibility label) to comply with WCAG 2.1 Success Criterion 4.1.2.
Example configuration for a Interactive Layout Containers
{
"type": "vertical",
"elements": [
{
"type": "text",
"text": "Text One"
},
{
"type": "button",
"title": "Styled Button 1",
"click":
{
"actions": [
{
"type": "publishText",
"text": "Button 1"
}]
}
}],
"groupAsSingleAccessibleElement": true,
"tooltip": "grouped container",
"click":
{
"actions": [
{
"type": "publishText",
"text": "Vertical card clicked!"
}],
"metadata": [
{
"type": "ExternalId",
"id": "cardClickTest123"
}]
}
}