cancel
Showing results for 
Search instead for 
Did you mean: 

Blox Template - Cards

harikm007
13 - Data Warehouse
13 - Data Warehouse
Here is a blox template for cards
 
harikm007_0-1655984684235.png

 Blox Editor Script:

{
    "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": ""
}

For other template, refer : https://www.binextlevel.com/post/blox-template-1-cards

harikm007_1-1655984840856.png

-Hari

0 REPLIES 0