top of page

Blox Template 1 : Cards

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

368 views0 comments

Yorumlar

5 üzerinden 0 yıldız
Henüz hiç puanlama yok

Puanlama ekleyin
bottom of page