Here is a blox template for cool cards
Blox Editor script:
{
"style": "",
"script": "",
"title": "",
"showCarousel": false,
"body": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"spacing": "small",
"items": [
{
"type": "ColumnSet",
"height": "50px",
"style": {
"border-radius": "8px",
"background-image": "linear-gradient(330deg, rgba(0,0,0,0.1) 0.2%, #16703a )",
"box-shadow": "2px 2px 4px #a6a4a4"
},
"columns": [
{
"type": "Container",
"style": {
"margin": "5px 0px auto 15px"
},
"items": [
{
"type": "TextBlock",
"id": "",
"class": "",
"text": "98.5%",
"style": {
"color": "#FFFFFF",
"font-weight": "800",
"font-size": "25px"
}
},
{
"type": "TextBlock",
"id": "",
"class": "",
"text": "Sample Text",
"style": {
"color": "#FFFFFF",
"font-weight": "600",
"font-size": "12px"
}
},
{
"type": "TextBlock",
"id": "",
"class": "",
"text": "Sample Text: <b> 254</b>",
"style": {
"color": "#FFFFFF",
"font-weight": "600",
"font-size": "12px",
"margin": "18px 0px 0px 0px"
}
}
]
},
{
"type": "Image",
"id": "",
"class": "",
"url": "https://www.svgrepo.com/show/419269/avatar-human-person.svg",
"altText": "image descriptions",
"style": {
"margin": "25px 10px"
}
}
]
}
]
},
{
"type": "Column",
"spacing": "small",
"items": [
{
"type": "ColumnSet",
"height": "50px",
"style": {
"border-radius": "8px",
"background-image": "linear-gradient(330deg, rgba(0,0,0,0.1) 1%, #ba2e29 )",
"box-shadow": "2px 2px 4px #a6a4a4"
},
"columns": [
{
"type": "Container",
"style": {
"margin": "5px 0px auto 15px"
},
"items": [
{
"type": "TextBlock",
"id": "",
"class": "",
"text": "98.5%",
"style": {
"color": "#FFFFFF",
"font-weight": "800",
"font-size": "25px"
}
},
{
"type": "TextBlock",
"id": "",
"class": "",
"text": "Sample Text",
"style": {
"color": "#FFFFFF",
"font-weight": "600",
"font-size": "12px"
}
},
{
"type": "TextBlock",
"id": "",
"class": "",
"text": "Sample Text: <b> 254</b>",
"style": {
"color": "#FFFFFF",
"font-weight": "600",
"font-size": "12px",
"margin": "18px 0px 0px 0px"
}
}
]
},
{
"type": "Image",
"id": "",
"class": "",
"url": "https://www.svgrepo.com/show/419274/certification-diploma-proof.svg",
"altText": "image descriptions",
"style": {
"margin": "25px 10px"
}
}
]
}
]
},
{
"type": "Column",
"spacing": "small",
"items": [
{
"type": "ColumnSet",
"height": "50px",
"style": {
"border-radius": "8px",
"background-image": "linear-gradient(330deg, rgba(0,0,0,0.1) 1%, #3147c4 )",
"box-shadow": "2px 2px 4px #a6a4a4"
},
"columns": [
{
"type": "Container",
"style": {
"margin": "5px 0px auto 15px"
},
"items": [
{
"type": "TextBlock",
"id": "",
"class": "",
"text": "98.5%",
"style": {
"color": "#FFFFFF",
"font-weight": "800",
"font-size": "25px"
}
},
{
"type": "TextBlock",
"id": "",
"class": "",
"text": "Sample Text",
"style": {
"color": "#FFFFFF",
"font-weight": "600",
"font-size": "12px"
}
},
{
"type": "TextBlock",
"id": "",
"class": "",
"text": "Sample Text: <b> 254</b>",
"style": {
"color": "#FFFFFF",
"font-weight": "600",
"font-size": "12px",
"margin": "18px 0px 0px 0px"
}
}
]
},
{
"type": "Image",
"id": "",
"class": "",
"url": "https://www.svgrepo.com/show/419266/document-pen-sign.svg",
"altText": "image descriptions",
"style": {
"margin": "25px 10px"
}
}
]
}
]
},
{
"type": "Column",
"spacing": "small",
"items": [
{
"type": "ColumnSet",
"height": "50px",
"style": {
"border-radius": "8px",
"background-image": "linear-gradient(330deg, rgba(0,0,0,0.1) 1%, #801854 )",
"box-shadow": "2px 2px 4px #a6a4a4"
},
"columns": [
{
"type": "Container",
"style": {
"margin": "5px 0px auto 15px"
},
"items": [
{
"type": "TextBlock",
"id": "",
"class": "",
"text": "98.5%",
"style": {
"color": "#FFFFFF",
"font-weight": "800",
"font-size": "25px"
}
},
{
"type": "TextBlock",
"id": "",
"class": "",
"text": "Sample Text",
"style": {
"color": "#FFFFFF",
"font-weight": "600",
"font-size": "12px"
}
},
{
"type": "TextBlock",
"id": "",
"class": "",
"text": "Sample Text: <b> 254</b>",
"style": {
"color": "#FFFFFF",
"font-weight": "600",
"font-size": "12px",
"margin": "18px 0px 0px 0px"
}
}
]
},
{
"type": "Image",
"id": "",
"class": "",
"url": "https://www.svgrepo.com/show/419294/clipboard-list-todo.svg",
"altText": "image descriptions",
"style": {
"margin": "25px 10px"
}
}
]
}
]
}
]
}
],
"actions": []
}Configuration :
{
"fontFamily": "Open Sans",
"fontSizes": {
"default": 14,
"small": 16,
"medium": 20,
"large": 50,
"extraLarge": 32
},
"fontWeights": {
"default": 500,
"light": 100,
"bold": 1000
},
"containerStyles": {
"default": {
"backgroundColor": "#FFFFFF",
"foregroundColors": {
"default": {
"normal": "#3a4356"
},
"white": {
"normal": "#ffffff"
},
"grey": {
"normal": "#9ea2ab"
},
"orange": {
"normal": "#f2B900"
},
"yellow": {
"normal": "#ffcb05"
},
"black": {
"normal": "#000000"
},
"lightGreen": {
"normal": "#3ADCCA"
},
"green": {
"normal": "#54a254"
},
"red": {
"normal": "#dd1111"
},
"accent": {
"normal": "#2E89FC"
},
"good": {
"normal": "#54a254"
},
"warning": {
"normal": "#e69500"
},
"attention": {
"normal": "#cc3300"
}
}
}
},
"imageSizes": {
"default": 40,
"small": 40,
"medium": 80,
"large": 160
},
"imageSet": {
"imageSize": "medium",
"maxImageHeight": 100
},
"actions": {
"color": "white",
"backgroundColor": "",
"maxActions": 5,
"spacing": "extraLarge",
"buttonSpacing": 20,
"actionsOrientation": "horizontal",
"actionAlignment": "left",
"showCard": {
"actionMode": "inline",
"inlineTopMargin": 16,
"style": "default"
}
},
"spacing": {
"default": 5,
"small": 10,
"medium": 60,
"large": 20,
"extraLarge": 40,
"padding": 10
},
"separator": {
"lineThickness": 3,
"lineColor": "#ffcb05"
},
"factSet": {
"title": {
"size": "default",
"color": "default",
"weight": "bold",
"warp": true
},
"value": {
"size": "default",
"color": "default",
"weight": "default",
"warp": true
},
"spacing": 20
},
"supportsInteractivity": true,
"height": 125,
"imageBaseUrl": ""
}
Comments