badge-stack.json

{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/avatar/badge/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-12 control-section\">\n    <div class=\"sample_container avatar-badge\">\n        <div class=\"avatar-block\">\n            <!-- Card Component -->\n            <div class=\"e-card e-avatar-showcase\">\n                <div class=\"e-card-content\">\n                    <div class=\"avatar-sub-block\">\n                        <!-- xSmall Avatar-->\n                        <div class=\"e-avatar e-avatar-xsmall\">\n                            <img src=\"//ej2.syncfusion.com/javascript/demos/src/avatar/images/pic01.png\" alt=\"profile_pic\">\n                        </div>\n                        <!-- Notification Badge -->\n                        <span class=\"e-badge e-badge-primary e-badge-overlap e-badge-notification e-badge-circle\">6</span>\n                    </div>\n                    <div class=\"avatar-sub-block\">\n                        <!-- Small Avatar-->\n                        <div class=\"e-avatar e-avatar-small\">\n                            <img src=\"//ej2.syncfusion.com/javascript/demos/src/avatar/images/pic01.png\" alt=\"profile_pic\">\n                        </div>\n                        <!-- Notification Badge -->\n                        <span class=\"e-badge e-badge-primary e-badge-overlap e-badge-notification e-badge-circle\">12</span>\n                    </div>\n                    <div class=\"avatar-sub-block\">\n                        <!-- Avatar-->\n                        <div class=\"e-avatar\">\n                            <img src=\"//ej2.syncfusion.com/javascript/demos/src/avatar/images/pic01.png\" alt=\"profile_pic\">\n                        </div>\n                        <!-- Notification Badge -->\n                        <span class=\"e-badge e-badge-primary e-badge-overlap e-badge-notification\">46</span>\n                    </div>\n                    <div class=\"avatar-sub-block\">\n                        <!-- Large Avatar-->\n                        <div class=\"e-avatar e-avatar-large\">\n                            <img src=\"//ej2.syncfusion.com/javascript/demos/src/avatar/images/pic01.png\" alt=\"profile_pic\">\n                        </div>\n                        <!-- Notification Badge -->\n                        <span class=\"e-badge e-badge-primary e-badge-overlap e-badge-notification\">82</span>\n                    </div>\n                    <div class=\"avatar-sub-block\">\n                        <!-- xLarge Avatar-->\n                        <div class=\"e-avatar e-avatar-xlarge\">\n                            <img src=\"//ej2.syncfusion.com/javascript/demos/src/avatar/images/pic01.png\" alt=\"profile_pic\">\n                        </div>\n                        <!-- Notification Badge -->\n                        <span class=\"e-badge e-badge-primary e-badge-overlap e-badge-notification\">99+</span>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"circleAvatar avatar-block\">\n            <!-- Card Component -->\n            <div class=\"e-card e-avatar-showcase\">\n                <div class=\"e-card-content\">\n                    <div class=\"avatar-sub-block\">\n                        <!-- xSmall Circle Avatar-->\n                        <div class=\"e-avatar e-avatar-circle e-avatar-xsmall\">\n                            <img src=\"//ej2.syncfusion.com/javascript/demos/src/avatar/images/pic01.png\" alt=\"profile_pic\">\n                        </div>\n                        <!-- Notification Badge -->\n                        <span class=\"e-badge e-badge-primary e-badge-overlap e-badge-notification e-badge-circle\">6</span>\n                    </div>\n                    <div class=\"avatar-sub-block\">\n                        <!-- Small Circle Avatar-->\n                        <div class=\"e-avatar e-avatar-circle e-avatar-small\">\n                            <img src=\"//ej2.syncfusion.com/javascript/demos/src/avatar/images/pic01.png\" alt=\"profile_pic\">\n                        </div>\n                        <!-- Notification Badge -->\n                        <span class=\"e-badge e-badge-primary e-badge-overlap e-badge-notification e-badge-circle\">12</span>\n                    </div>\n                    <div class=\"avatar-sub-block\">\n                        <!-- Circle Avatar-->\n                        <div class=\"e-avatar e-avatar-circle\">\n                            <img src=\"//ej2.syncfusion.com/javascript/demos/src/avatar/images/pic01.png\" alt=\"profile_pic\">\n                        </div>\n                        <!-- Notification Badge -->\n                        <span class=\"e-badge e-badge-primary e-badge-overlap e-badge-notification\">46</span>\n                    </div>\n                    <div class=\"avatar-sub-block\">\n                        <!-- Large Circle Avatar-->\n                        <div class=\"e-avatar e-avatar-circle e-avatar-large\">\n                            <img src=\"//ej2.syncfusion.com/javascript/demos/src/avatar/images/pic01.png\" alt=\"profile_pic\">\n                        </div>\n                        <!-- Notification Badge -->\n                        <span class=\"e-badge e-badge-primary e-badge-overlap e-badge-notification\">82</span>\n                    </div>\n                    <div class=\"avatar-sub-block\">\n                        <!-- xLarge Circle Avatar-->\n                        <div class=\"e-avatar e-avatar-circle e-avatar-xlarge\">\n                            <img src=\"//ej2.syncfusion.com/javascript/demos/src/avatar/images/pic01.png\" alt=\"profile_pic\">\n                        </div>\n                        <!-- Notification Badge -->\n                        <span class=\"e-badge e-badge-primary e-badge-overlap e-badge-notification\">99+</span>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n\n\n\n\n<style>\n    .control-section {\n        overflow: auto;\n        padding-left: 0px;\n        padding-right: 0px;\n    }\n\n    .sample_container.avatar-badge .avatar-sub-block {\n        display: inline-block;\n        position: relative;\n        margin: 7px\n    }\n\n    .sample_container.avatar-badge .avatar-block {\n        display: inline-block;\n        vertical-align: top;\n    }\n\n    /* Media Queries for various devices */\n\n    @media only screen and (max-width: 965px) {\n        .sample_container.avatar-badge {\n            max-width: 332px;\n            margin: auto;\n            margin-top: 0;\n        }\n        .circleAvatar {\n            margin-top: 15px;\n        }\n        .e-avatar-showcase.e-card {\n            width: 320px;\n        }\n    }\n\n    @media only screen and (min-width: 965px) {\n        .sample_container.avatar-badge {\n            max-width: 825px;\n            margin: auto;\n            margin-top: 70px;\n        }\n        .e-avatar-showcase.e-card {\n            width: 400px;\n        }\n    }\n\n    .e-avatar.image {\n        background-repeat: no-repeat;\n        background-size: cover;\n        background-position: center;\n    }\n\n    /* Card Customization */\n\n    .e-avatar-showcase.e-card {\n        height: 140px;\n        padding: 4px;\n        margin: 5px;\n        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);\n        border-radius: 8px;\n    }\n\n    .e-avatar-showcase.e-card .e-card-header .e-card-header-title {\n        align-self: center;\n        font-size: 18px;\n        letter-spacing: 1px;\n        text-shadow: #eaeaea 1px 1px 2px;\n    }\n\n    .e-avatar-showcase.e-card .e-card-header .e-card-sub-title {\n        color: rgba(0, 0, 0, 0.75);\n        white-space: pre-line;\n        font-size: 14px;\n        text-shadow: #eaeaea 1px 1px 2px;\n    }\n\n    .e-avatar-showcase.e-card .e-card-header .e-card-sub-title p {\n        margin: 0;\n    }\n\n    .e-avatar-showcase.e-card .e-card-content {\n        overflow: visible;\n        align-self: center;\n        padding: 10px 11px 10px 0px;\n        color: rgba(0, 0, 0, 0.75)\n    }\n\n    .bootstrap4 .e-avatar-showcase.e-card {\n        box-shadow: none;\n    }\n</style>\n</div></body></html>","index.js":"{{ripple}}/**\n *  Sample for CSS Basic Layout Badge\n */\n\n    //\n"}