-{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/avatar/card/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\">\n <!-- Card Component -->\n <div class=\"e-card e-custom-card\">\n <div class=\"e-card-header\">\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/pic02.png\" alt=\"profile_pic\">\n </div>\n \n </div>\n <div class=\"e-card-header\">\n <div class=\"e-card-header-caption center\">\n <div class=\"e-card-header-title name\">Laura Callahan</div>\n <div class=\"e-card-sub-title\">Sales Coordinator</div>\n </div>\n </div>\n <div class=\"e-card-content\">\n <p class=\"avatar-content\"> Laura received a BA in psychology from the University of Washington. She has also completed a course\n in business French. She reads and writes French.</p>\n </div>\n </div>\n </div>\n</div>\n\n\n\n\n<style>\n .sample_container {\n max-width: 300px;\n margin: auto;\n min-height: 400px;\n }\n\n /* Card Customizations */\n\n .e-custom-card {\n position: relative;\n margin-top: 80px;\n overflow: visible;\n border-radius: 15px;\n box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);\n transition: 0.2s;\n border-width: 1px;\n padding: 1px;\n }\n\n .e-custom-card.e-card:hover {\n border-width: 1px;\n padding: 1px;\n }\n\n .e-custom-card :nth-child(2) .e-card-header-title.name {\n margin-top: 20px;\n }\n\n .sample_container p.avatar-content {\n line-height: 20px;\n font-family: inherit;\n }\n\n .e-custom-card .e-card-header {\n text-align: center;\n }\n\n .e-custom-card .e-avatar {\n font-size: 40px;\n position: absolute;\n top: calc(0% - 1.5em);\n left: calc(50% - 1.5em);\n box-shadow: 0 16px 28px -8px rgba(0, 0, 0, .36), 0 4px 15px 0 rgba(0, 0, 0, .12), 0 8px 10px -5px rgba(0, 0, 0, .2);\n }\n\n .tailwind .e-custom-card .e-avatar,\n .bootstrap5 .e-custom-card .e-avatar,\n .bootstrap5-dark .e-custom-card .e-avatar,.fluent .e-custom-card .e-avatar,.fluent-dark .e-custom-card .e-avatar{\n height: 3em;\n width: 3em;\n }\n\n .e-card.e-custom-card :nth-child(3) {\n padding: 12px 0px 20px 0px;\n height: 130px;\n }\n\n .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-header-title {\n font-size: 24px;\n font-weight: 500;\n line-height: normal;\n color: rgba(83, 101, 132, 0.65);\n text-shadow: 0 0 0.1px;\n }\n\n .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-sub-title {\n font-size: 12px;\n font-weight: 500;\n line-height: normal;\n color: rgba(86, 90, 97, 0.65);\n text-shadow: 0 0 0.1px;\n }\n\n .e-custom-card.e-card .e-card-content {\n overflow: visible;\n width: auto;\n margin: -5px 20px 0 20px;\n word-spacing: 1px;\n }\n\n .avatar-content {\n color: rgba(250, 200, 130, 0.6);\n margin: 0 auto;\n text-align: center;\n color: rgb(94, 94, 94);\n border: none;\n padding: 0;\n font-size: 14px;\n }\n\n .avatar-content {\n margin-bottom: 0;\n }\n\n .sample_container .name {\n margin-top: 10px;\n }\n .highcontrast .e-custom-card.e-card .avatar-content,\n .bootstrap-dark .e-custom-card.e-card .avatar-content,\n .tailwind-dark .e-custom-card.e-card .avatar-content,\n .material-dark .e-custom-card.e-card .avatar-content,\n .fabric-dark .e-custom-card.e-card .avatar-content,\n .bootstrap5-dark .e-custom-card.e-card .avatar-content {\n color: rgba(255, 255, 255, 0.84);\n }\n\n .highcontrast .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-sub-title,\n .bootstrap-dark .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-sub-title,\n .tailwind-dark .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-sub-title,\n .material-dark .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-sub-title,\n .fabric-dark .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-sub-title,\n .bootstrap5-dark .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-sub-title {\n color: rgba(255, 255, 255, 0.45);\n }\n\n .highcontrast .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-header-title,\n .bootstrap-dark .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-header-title,\n .tailwind-dark .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-header-title,\n .material-dark .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-header-title,\n .fabric-dark .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-header-title,\n .bootstrap5-dark .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-header-title {\n color: rgba(255, 255, 255, 0.84);\n }\n\n .tailwind .e-custom-card .e-avatar,\n body.tailwind-dark .e-custom-card .e-avatar,\n body.bootstrap5-dark .e-custom-card .e-avatar {\n height: 3em;\n width: 3em;\n }\n\n .bootstrap4 .e-custom-card .e-avatar {\n left: calc(50% - 1.4em);\n }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for CSS Basic Layout Badge\n */\n\n //\n"}
0 commit comments