Priscillareagan
03-20-2024Cloud Apps
Blox align containers horizontally
Hello there,
I'm a novice to customizing Blox templates. In the attached screenshot, I want to adjust the layout to make the cards appear side by side. I also want the titles Signups and orders to appear as a title to the card. Can I have suggestions on how I can modify the attached code to do that?
{
"style": "",
"script": "",
"title": "",
"showCarousel": true,
"body": [
{
"type": "Container",
"items": [
{
"type": "Container",
"separator": "true",
"spacing": "medium",
"items": [
{
"type": "TextBlock",
"spacing": "small",
"text": "Signups",
"weight": "bold",
"color": "grey",
"style": {
"padding-left": "20px"
}
},
{
"spacing": "none",
"type": "ColumnSet",
"columns": [
{
"spacing": "medium",
"separator": "true",
"type": "Column",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"style": {
"flex-grow": "0"
},
"items": [
{
"spacing": "none",
"type": "TextBlock",
"text": "{panel:Sign ups - Actual}",
"weight": "bold",
"color": "#232a2f",
"size": "extraLarge",
"style": {
"margin": "30px"
}
}
]
},
{
"type": "Column",
"style": {
"flex-grow": "100"
},
"items": [
{
"spacing": "none",
"type": "TextBlock",
"horizontalAlignment": "left",
"text": "Variance:",
"color": "grey",
"size": "small"
},
{
"spacing": "small",
"type": "TextBlock",
"horizontalAlignment": "left",
"text": "vs Budget:",
"color": "grey",
"size": "small"
},
{
"spacing": "none",
"horizontalAlignment": "left",
"type": "TextBlock",
"text": "{panel:Sign ups vs Budget}",
"weight": "bold",
"color": "#72767f",
"size": "medium"
},
{
"spacing": "small",
"type": "TextBlock",
"horizontalAlignment": "left",
"text": "vs RoFo:",
"color": "grey",
"size": "small"
},
{
"spacing": "none",
"horizontalAlignment": "left",
"type": "TextBlock",
"text": "{panel:Signups vs RoFo}",
"weight": "bold",
"color": "#72767f",
"size": "medium"
}
]
}
]
}
]
}
]
},
{
"type": "TextBlock",
"spacing": "small",
"text": "Orders",
"weight": "bold",
"color": "grey",
"style": {
"padding-left": "20px"
}
},
{
"spacing": "none",
"type": "ColumnSet",
"columns": [
{
"spacing": "medium",
"separator": "true",
"type": "Column",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"style": {
"flex-grow": "0"
},
"items": [
{
"spacing": "none",
"type": "TextBlock",
"text": "{panel:Orders - Actual}",
"weight": "bold",
"color": "#232a2f",
"size": "extraLarge",
"style": {
"margin": "30px"
}
}
]
},
{
"type": "Column",
"style": {
"flex-grow": "100"
},
"items": [
{
"spacing": "none",
"type": "TextBlock",
"horizontalAlignment": "left",
"text": "Variance:",
"color": "grey",
"size": "small"
},
{
"spacing": "small",
"type": "TextBlock",
"horizontalAlignment": "left",
"text": "vs Budget:",
"color": "grey",
"size": "small"
},
{
"spacing": "none",
"horizontalAlignment": "left",
"type": "TextBlock",
"text": "{panel:Orders vs Budget}",
"weight": "bold",
"color": "#72767f",
"size": "medium"
},
{
"spacing": "small",
"type": "TextBlock",
"horizontalAlignment": "left",
"text": "vs RoFo:",
"color": "grey",
"size": "small"
},
{
"spacing": "none",
"horizontalAlignment": "left",
"type": "TextBlock",
"text": "{panel:Orders vs RoFo}",
"weight": "bold",
"color": "#72767f",
"size": "medium"
}
]
}
]
}
]
}
]
}
]
}
]
}
]
}
Thanks,
Priscilla