Here is a blox template for cool cards
Blox Editor:
{
"style": "",
"script": "",
"title": "",
"showCarousel": false,
"body": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"spacing": "small",
"items": [
{
"type": "ColumnSet",
"height": "40px",
"style": {
"border-radius": "6px 6px 0px 0pc",
"background-image": "linear-gradient(330deg, #C74B7B 10%, #703971 )",
"box-shadow": "1px 1px 2px #a6a4a4"
},
"columns": [
{
"type": "Container",
"style": {},
"items": [
{
"type": "TextBlock",
"id": "",
"class": "",
"text": "Current Month Revenue",
"horizontalAlignment": "left",
"style": {
"color": "#edeef0",
"font-weight": "500",
"font-size": "12px",
"margin": "15px 0px 15px 10px"
}
}
]
},
{
"type": "Image",
"id": "",
"class": "",
"url": "https://www.svgrepo.com/show/419269/avatar-human-person.svg",
"altText": "image descriptions",
"style": {
"margin": "0px 10px",
"width": "20px"
}
}
]
},
{
"type": "Container",
"style": {
"background-color": "#FFFFFF",
"margin-bottom": "1px",
"border-radius": "0px 0px 6px 6px"
},
"items": [
{
"type": "TextBlock",
"spacing": "small",
"id": "",
"class": "",
"text": "$10,354",
"horizontalAlignment": "center",
"style": {
"color": "#6a6a6b",
"font-weight": "100",
"font-size": "30px"
}
},
{
"type": "TextBlock",
"spacing": "small",
"id": "",
"class": "",
"text": "5% higher than last month",
"horizontalAlignment": "center",
"style": {
"color": "#6a6a6b",
"font-size": "12px"
}
},
{
"spacing": "small",
"type": "TextBlock",
"text": "<span class='blox-sparkline' type='line' line-color='#C74B7B' width='100' height='30' line-width='2' fill-color='#FFFFFF' point-color:'#277da1'>20, 30, 15, 35, 22, 35, 20, 45</span>",
"horizontalAlignment": "center",
"weight": "bold",
"color": "grey",
"style": {
"margin-bottom": "10px"
}
}
]
}
]
},
{
"type": "Column",
"spacing": "small",
"items": [
{
"type": "ColumnSet",
"height": "40px",
"style": {
"border-radius": "6px 6px 0px 0pc",
"background-image": "linear-gradient(330deg, #E86180, #CD4C7C )",
"box-shadow": "1px 1px 2px #a6a4a4"
},
"columns": [
{
"type": "Container",
"style": {},
"items": [
{
"type": "TextBlock",
"id": "",
"class": "",
"text": "Current Month Sales",
"horizontalAlignment": "left",
"style": {
"color": "#edeef0",
"font-weight": "500",
"font-size": "12px",
"margin": "15px 0px 15px 10px"
}
}
]
},
{
"type": "Image",
"id": "",
"class": "",
"url": "https://www.svgrepo.com/show/419269/avatar-human-person.svg",
"altText": "image descriptions",
"style": {
"margin": "0px 10px",
"width": "20px"
}
}
]
},
{
"type": "Container",
"style": {
"background-color": "#FFFFFF",
"margin-bottom": "1px",
"border-radius": "0px 0px 6px 6px"
},
"items": [
{
"type": "TextBlock",
"spacing": "small",
"id": "",
"class": "",
"text": "$12,354",
"horizontalAlignment": "center",
"style": {
"color": "#6a6a6b",
"font-weight": "100",
"font-size": "30px"
}
},
{
"type": "TextBlock",
"spacing": "small",
"id": "",
"class": "",
"text": "8% higher than last month",
"horizontalAlignment": "center",
"style": {
"color": "#6a6a6b",
"font-size": "12px"
}
},
{
"spacing": "small",
"type": "TextBlock",
"text": "<span class='blox-sparkline' type='line' line-color='#E86180' width='100' height='30' line-width='2' fill-color='#FFFFFF' point-color:'#277da1'>20, 30, 15, 35, 22, 35, 20, 45</span>",
"horizontalAlignment": "center",
"weight": "bold",
"color": "grey",
"style": {
"margin-bottom": "10px"
}
}
]
}
]
},
{
"type": "Column",
"spacing": "small",
"items": [
{
"type": "ColumnSet",
"height": "40px",
"style": {
"border-radius": "6px 6px 0px 0pc",
"background-image": "linear-gradient(330deg, #FD7387, #E86182 )",
"box-shadow": "1px 1px 2px #a6a4a4"
},
"columns": [
{
"type": "Container",
"style": {},
"items": [
{
"type": "TextBlock",
"id": "",
"class": "",
"text": "Current Month Target",
"horizontalAlignment": "left",
"style": {
"color": "#edeef0",
"font-weight": "500",
"font-size": "12px",
"margin": "15px 0px 15px 10px"
}
}
]
},
{
"type": "Image",
"id": "",
"class": "",
"url": "https://www.svgrepo.com/show/419269/avatar-human-person.svg",
"altText": "image descriptions",
"style": {
"margin": "0px 10px",
"width": "20px"
}
}
]
},
{
"type": "Container",
"style": {
"background-color": "#FFFFFF",
"margin-bottom": "1px",
"border-radius": "0px 0px 6px 6px"
},
"items": [
{
"type": "TextBlock",
"spacing": "small",
"id": "",
"class": "",
"text": "$12,110",
"horizontalAlignment": "center",
"style": {
"color": "#6a6a6b",
"font-weight": "100",
"font-size": "30px"
}
},
{
"type": "TextBlock",
"spacing": "small",
"id": "",
"class": "",
"text": "2% higher than last month",
"horizontalAlignment": "center",
"style": {
"color": "#6a6a6b",
"font-size": "12px"
}
},
{
"spacing": "small",
"type": "TextBlock",
"text": "<span class='blox-sparkline' type='line' line-color='#FD7387' width='100' height='30' line-width='2' fill-color='#FFFFFF' point-color:'#277da1'>20, 30, 15, 35, 22, 35, 20, 45</span>",
"horizontalAlignment": "center",
"weight": "bold",
"color": "grey",
"style": {
"margin-bottom": "10px"
}
}
]
}
]
},
{
"type": "Column",
"spacing": "small",
"items": [
{
"type": "ColumnSet",
"height": "40px",
"style": {
"border-radius": "6px 6px 0px 0pc",
"background-image": "linear-gradient(330deg, #FF9C83, #FF7A87 )",
"box-shadow": "1px 1px 2px #a6a4a4"
},
"columns": [
{
"type": "Container",
"style": {},
"items": [
{
"type": "TextBlock",
"id": "",
"class": "",
"text": "Last Month Revenue",
"horizontalAlignment": "left",
"style": {
"color": "#edeef0",
"font-weight": "500",
"font-size": "12px",
"margin": "15px 0px 15px 10px"
}
}
]
},
{
"type": "Image",
"id": "",
"class": "",
"url": "https://www.svgrepo.com/show/419269/avatar-human-person.svg",
"altText": "image descriptions",
"style": {
"margin": "0px 10px",
"width": "20px"
}
}
]
},
{
"type": "Container",
"style": {
"background-color": "#FFFFFF",
"margin-bottom": "1px",
"border-radius": "0px 0px 6px 6px"
},
"items": [
{
"type": "TextBlock",
"spacing": "small",
"id": "",
"class": "",
"text": "$9,245",
"horizontalAlignment": "center",
"style": {
"color": "#6a6a6b",
"font-weight": "100",
"font-size": "30px"
}
},
{
"type": "TextBlock",
"spacing": "small",
"id": "",
"class": "",
"text": "12% higher than last month",
"horizontalAlignment": "center",
"style": {
"color": "#6a6a6b",
"font-size": "12px"
}
},
{
"spacing": "small",
"type": "TextBlock",
"text": "<span class='blox-sparkline' type='line' line-color='#FF9C83' width='100' height='30' line-width='2' fill-color='#FFFFFF' point-color:'#277da1'>20, 30, 15, 35, 22, 35, 20, 45</span>",
"horizontalAlignment": "center",
"weight": "bold",
"color": "grey",
"style": {
"margin-bottom": "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": "#f2f4f7",
"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": 198.8,
"imageBaseUrl": ""
}
Comments