This repository was archived by the owner on Jul 30, 2025. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathbasic-plnkr.json
More file actions
1 lines (1 loc) · 60.7 KB
/
basic-plnkr.json
File metadata and controls
1 lines (1 loc) · 60.7 KB
1
{"index.css":" /* Weather Card Layout Customization */\r\n\r\n .card-control-section.basic_card_layout #weather_card.e-card {\r\n background-image: url('http://ej2.syncfusion.com/react/demos/src/card/images/weather.png');\r\n }\r\n\r\n .card-control-section.basic_card_layout #weather_card.e-card .e-card-header-caption .e-card-header-title,\r\n .card-control-section.basic_card_layout #weather_card.e-card .e-card-header-caption .e-card-sub-title {\r\n color: white;\r\n }\r\n\r\n .highcontrast .card-control-section.basic_card_layout #weather_card.e-card .e-card-header.weather_report .e-card-header-image {\r\n border: none;\r\n }\r\n\r\n .card-control-section.basic_card_layout #weather_card.e-card .weather_report .e-card-header-caption {\r\n text-align: right;\r\n }\r\n\r\n .card-control-section.basic_card_layout #weather_card.e-card .e-card-header.weather_report .e-card-header-image {\r\n background-image: url('http://ej2.syncfusion.com/react/demos/src/card/images/rainy.svg');\r\n }\r\n\r\n .card-control-section.basic_card_layout .col-xs-6.col-sm-6.col-lg-6.col-md-6 {\r\n width: 100%;\r\n padding: 10px;\r\n }\r\n\r\n .card-control-section.basic_card_layout .card-layout {\r\n margin: auto;\r\n max-width: 400px;\r\n }\r\n\r\n @media (min-width: 870px) {\r\n .card-control-section.basic_card_layout .col-xs-6.col-sm-6.col-lg-6.col-md-6 {\r\n width: 50%;\r\n }\r\n\r\n .card-control-section.basic_card_layout .card-layout {\r\n max-width: 870px;\r\n }\r\n }\r\n /* Flip card Customization */\r\n\r\n .card-control-section.flip_card_layout #card_flip.e-card .e-front .e-card-header-caption .e-card-header-title,\r\n .card-control-section.flip_card_layout #card_flip_profile.e-card .e-front .e-card-header-caption .e-card-header-title,\r\n .card-control-section.flip_card_layout #card_flip.e-card .e-front .e-card-header-caption .e-card-sub-title,\r\n .card-control-section.flip_card_layout #card_flip_profile.e-card .e-front .e-card-header-caption .e-card-sub-title,\r\n .card-control-section.flip_card_layout #card_flip.e-card .e-card-actions button,\r\n .card-control-section.flip_card_layout #card_flip_profile.e-card .e-card-actions button {\r\n color: #000;\r\n }\r\n\r\n .highcontrast .card-control-section.flip_card_layout #card_flip_profile.e-card .e-card-front.e-front .e-card-header-caption .e-card-header-title,\r\n .highcontrast .card-control-section.flip_card_layout #card_flip_profile.e-card .e-card-front.e-front .e-card-header-caption .e-card-sub-title {\r\n color: #fff;\r\n }\r\n\r\n .card-control-section.flip_card_layout .e-card.e-business.e-flip .e-front .e-card-right .e-card-header-image,\r\n .card-control-section.flip_card_layout .e-card.e-business.e-flip .e-front .e-card-right .e-card-header-caption {\r\n margin-right: 15px;\r\n }\r\n\r\n .card-control-section.flip_card_layout .e-card.e-business.e-flip .e-front .e-card-left {\r\n margin-left: 20px;\r\n padding-left: 0;\r\n width: 50%;\r\n }\r\n\r\n .card-control-section.flip_card_layout #card_flip.e-card .e-card-header-image,\r\n .card-control-section.flip_card_layout #card_flip_profile.e-card .e-card-header-image {\r\n background-image: url('http://ej2.syncfusion.com/react/demos/src/card/images/creative_flip.png');\r\n background-size: cover;\r\n height: 75px;\r\n width: 75px;\r\n }\r\n\r\n .card-control-section.flip_card_layout #card_flip.e-card,\r\n .card-control-section.flip_card_layout #card_flip_profile.e-card {\r\n text-align: center;\r\n background-size: cover;\r\n min-height: 300px;\r\n height: 300px;\r\n justify-content: flex-end;\r\n }\r\n\r\n .card-control-section.flip_card_layout #card_flip.e-card,\r\n .card-control-section.flip_card_layout #card_profile.e-card {\r\n background-image: url('http://ej2.syncfusion.com/react/demos/src/card/images/vertical_img.png');\r\n }\r\n\r\n .card-control-section.flip_card_layout #card_flip.e-card.e-flipped,\r\n .card-control-section.flip_card_layout #card_flip_profile.e-card.e-flipped {\r\n background-image: none;\r\n }\r\n\r\n .card-control-section.flip_card_layout #card_flip.e-card .e-card-actions,\r\n .card-control-section.flip_card_layout #card_flip_profile.e-card .e-card-actions {\r\n justify-content: center;\r\n padding-bottom: 40px;\r\n padding-top: 22px;\r\n }\r\n\r\n .card-control-section.flip_card_layout #card_flip.e-card .e-card-actions button,\r\n .card-control-section.flip_card_layout #card_flip_profile.e-card .e-card-actions button {\r\n background-color: transparent;\r\n text-transform: none;\r\n border: none;\r\n }\r\n\r\n .highcontrast .card-control-section.flip_card_layout .e-card-header .e-card-header-image {\r\n border: none;\r\n }\r\n\r\n .card-control-section.flip_card_layout .e-card.e-flip .e-card-header.e-front,\r\n .card-control-section.flip_card_layout .e-card.e-flip .e-card-front.e-front,\r\n .card-control-section.flip_card_layout .e-card.e-flip .e-card-actions.e-front {\r\n backface-visibility: hidden;\r\n\t\t-webkit-backface-visibility: hidden;\r\n transform-style: preserve-3d;\r\n transition: all 1s ease-in-out;\r\n overflow: hidden;\r\n }\r\n\r\n .card-control-section.flip_card_layout .e-card.e-business.e-flip .e-card-front.e-front {\r\n display: block;\r\n height: 100%;\r\n width: 100%;\r\n }\r\n\r\n .card-control-section.flip_card_layout .e-card.e-business.e-flip .e-card-front.e-front .e-card-header:first-child {\r\n padding-bottom: 0;\r\n }\r\n\r\n .card-control-section.flip_card_layout .e-card.e-business.e-flip .e-back,\r\n .card-control-section.flip_card_layout .e-card.e-business.e-flip .e-back,\r\n .card-control-section.flip_card_layout .e-card.e-business.e-flip .e-card-front.e-front {\r\n backface-visibility: hidden;\r\n\t\t-webkit-backface-visibility: hidden;\r\n transform-style: preserve-3d;\r\n transition: all 1s ease-in-out;\r\n overflow: hidden;\r\n position: absolute;\r\n\t\ttop: 0;\r\n }\r\n\r\n .card-control-section.flip_card_layout .e-card.e-business.e-flip .e-card-header.e-front,\r\n .card-control-section.flip_card_layout .e-card.e-business.e-flip .e-card-front.e-front,\r\n .card-control-section.flip_card_layout .e-card.e-business.e-flip .e-card-actions.e-front {\r\n transform: rotateX(0);\r\n }\r\n\r\n .card-control-section.flip_card_layout .e-card.e-business.e-flip .e-back {\r\n top: 45px;\r\n text-align: left;\r\n }\r\n\r\n .card-control-section.flip_card_layout .e-card.e-business.e-flip .e-back,\r\n .card-control-section.flip_card_layout .e-card.e-business.e-flip .e-back {\r\n transform: rotateX(180deg);\r\n }\r\n\r\n .card-control-section.flip_card_layout .e-card.e-business.e-flip.e-flipped .e-card-header.e-front,\r\n .card-control-section.flip_card_layout .e-card.e-business.e-flip.e-flipped .e-card-front.e-front,\r\n .card-control-section.flip_card_layout .e-card.e-business.e-flip.e-flipped .e-card-actions.e-front {\r\n transform: rotateX(180deg);\r\n }\r\n\r\n .card-control-section.flip_card_layout .e-card.e-business.e-flip.e-flipped .e-back,\r\n .card-control-section.flip_card_layout .e-card.e-business.e-flip.e-flipped .e-back {\r\n transform: rotateX(0);\r\n }\r\n\r\n .card-control-section.flip_card_layout .col-xs-6.col-sm-6.col-lg-6.col-md-6 {\r\n width: 100%;\r\n padding: 10px;\r\n }\r\n\r\n .card-control-section.flip_card_layout .card-layout {\r\n margin: auto;\r\n max-width: 400px;\r\n }\r\n\r\n @media (min-width: 870px) {\r\n .card-control-section.flip_card_layout .col-xs-6.col-sm-6.col-lg-6.col-md-6 {\r\n width: 50%;\r\n }\r\n .card-control-section.flip_card_layout .card-layout {\r\n max-width: 870px;\r\n }\r\n }\r\n /* Horizontal Card Layout Customization */\r\n\r\n .card-control-section.horizontal_card_layout #horizontal_phone_product .e-card-stacked {\r\n justify-content: flex-start;\r\n }\r\n\r\n .card-control-section.horizontal_card_layout #horizontal_phone_product .e-card-actions button:last-child {\r\n margin-left: 20px;\r\n }\r\n\r\n .card-control-section.horizontal_card_layout .e-card.e-card-horizontal.e-product .e-card-stacked> :first-child,\r\n .card-control-section.horizontal_card_layout #vertical_Sample .e-card.e-card-horizontal .e-card-stacked> :first-child,\r\n .card-control-section.horizontal_card_layout #vertical_Sample .e-card.e-card-horizontal .e-card-stacked> :first-child {\r\n flex-grow: 0;\r\n }\r\n\r\n .card-control-section.horizontal_card_layout #vertical_Sample {\r\n height: inherit;\r\n }\r\n\r\n .card-control-section.horizontal_card_layout #vertical_Sample .e-card img {\r\n height: 188px;\r\n }\r\n\r\n .card-control-section.horizontal_card_layout #vertical_Sample .e-card {\r\n height: 50%;\r\n }\r\n\r\n .card-control-section.horizontal_card_layout #vertical_Sample .e-card:first-child {\r\n margin-bottom: 10px;\r\n }\r\n\r\n .card-control-section.horizontal_card_layout #vertical_Sample .e-card>* {\r\n width: 50%;\r\n justify-content: flex-start;\r\n }\r\n\r\n .card-control-section.horizontal_card_layout #horizontal_product .e-card-header {\r\n width: 100%;\r\n }\r\n\r\n #source_link {\r\n float: right;\r\n margin-right: 10px;\r\n }\r\n\r\n @media screen and (max-width: 768px) {\r\n #source_link {\r\n margin-top: -10px;\r\n margin-right: 0px;\r\n }\r\n }\r\n\r\n .card-control-section.horizontal_card_layout .e-card-resize-container {\r\n margin-bottom: 50px;\r\n }\r\n\r\n .card-control-section.horizontal_card_layout .col-xs-6.col-sm-6.col-lg-6.col-md-6 {\r\n width: 100%;\r\n padding: 10px;\r\n margin: auto;\r\n }\r\n\r\n .card-control-section.horizontal_card_layout .card-layout {\r\n margin: auto;\r\n max-width: 870px;\r\n }\r\n\r\n @media (min-width: 912px) {\r\n .card-control-section.horizontal_card_layout .col-xs-6.col-sm-6.col-lg-6.col-md-6 {\r\n width: 50%;\r\n }\r\n .card-control-section.horizontal_card_layout .card-layout {\r\n max-width: 800px;\r\n }\r\n }\r\n\r\n @media (max-width: 600px) {\r\n .card-control-section.horizontal_card_layout .card-layout {\r\n max-width: 400px !important;\r\n }\r\n }\r\n\r\n @media (max-width: 912px) {\r\n .card-control-section.horizontal_card_layout .row.card-layout {\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n .card-control-section.horizontal_card_layout .card-layout {\r\n max-width: 640px;\r\n }\r\n }\r\n\r\n @media (min-width: 700px) and (max-width: 912px) {\r\n .card-control-section.horizontal_card_layout .col-xs-6.col-sm-6.col-lg-6.col-md-6 {\r\n width: 70%;\r\n }\r\n }\r\n\r\n @media (min-width: 600px) and (max-width: 700px) {\r\n .card-control-section.horizontal_card_layout .col-xs-6.col-sm-6.col-lg-6.col-md-6 {\r\n width: 80%;\r\n }\r\n }\r\n .card-control-section.reveal_card_layout .e-card #card_revealed .e-card-content table td,\r\n .card-control-section.reveal_card_layout .e-card #card_reveal .e-card-header .e-card-header-caption {\r\n text-align: left\r\n }\r\n\r\n .card-control-section.reveal_card_layout .e-card #card_revealed .e-card-content table td .e-card-actions .e-card-btn {\r\n background-color: #fff;\r\n border: none;\r\n }\r\n\r\n .highcontrast .card-control-section.reveal_card_layout .e-card #card_revealed .e-card-content table td .e-card-actions .e-card-btn {\r\n background-color: #000;\r\n }\r\n\r\n .card-control-section.reveal_card_layout .row.card-layout .e-card #card_reveal.e-reveal-show {\r\n display: block;\r\n height: auto;\r\n overflow: hidden;\r\n }\r\n\r\n .card-control-section.reveal_card_layout .row.card-layout .e-card .e-reveal-show {\r\n animation: reveal 0.3s cubic-bezier(.8, .2, .1, 0.8);\r\n }\r\n\r\n .card-control-section.reveal_card_layout .row.card-layout .e-card #card_reveal.e-reveal-hide {\r\n animation: hidden 0.3s cubic-bezier(.8, .2, .1, 0.8);\r\n transition: all 200ms;\r\n transform: translateY(0px) scale(0);\r\n }\r\n\r\n .card-control-section.reveal_card_layout .e-card #card_reveal {\r\n display: none;\r\n }\r\n\r\n .card-control-section.reveal_card_layout .card-layout .e-card .e-reveal-hide {\r\n display: none;\r\n height: 0;\r\n overflow: hidden;\r\n }\r\n\r\n @keyframes hidden {\r\n 0% {\r\n transform: translateY(-100px);\r\n display: block !important;\r\n z-index: 20;\r\n }\r\n 10% {\r\n transform: translateY(-90px);\r\n }\r\n 20% {\r\n transform: translateY(-80px);\r\n }\r\n 30% {\r\n transform: translateY(-70px);\r\n }\r\n 40% {\r\n transform: translateY(-60px);\r\n }\r\n 50% {\r\n transform: translateY(-50px);\r\n }\r\n 60% {\r\n transform: translateY(-40px);\r\n }\r\n 70% {\r\n transform: translateY(-30px);\r\n }\r\n 80% {\r\n transform: translateY(-20px);\r\n }\r\n 90% {\r\n transform: translateY(-10px);\r\n }\r\n 100% {\r\n transform: translateY(0px) scale(0);\r\n display: none;\r\n z-index: 0;\r\n }\r\n }\r\n\r\n @keyframes reveal {\r\n 0% {\r\n transform: translateY(100px);\r\n }\r\n 10% {\r\n transform: translateY(90px);\r\n }\r\n 20% {\r\n transform: translateY(80px);\r\n }\r\n 30% {\r\n transform: translateY(70px);\r\n }\r\n 40% {\r\n transform: translateY(60px);\r\n }\r\n 50% {\r\n transform: translateY(50px);\r\n }\r\n 60% {\r\n transform: translateY(40px);\r\n }\r\n 70% {\r\n transform: translateY(30px);\r\n }\r\n 80% {\r\n transform: translateY(20px);\r\n }\r\n 90% {\r\n transform: translateY(10px);\r\n }\r\n 100% {\r\n transform: translateY(0px) scale(0);\r\n }\r\n }\r\n\r\n .card-control-section.reveal_card_layout .e-card .e-collapse:before {\r\n content: \"\\e7fc\";\r\n font-size: 12px;\r\n }\r\n\r\n .card-control-section.reveal_card_layout .e-card .e-reveal-icon {\r\n -webkit-transform: rotate(-90deg);\r\n transform: rotate(-90deg);\r\n -moz-transform: rotate(-90deg);\r\n -ms-transform: rotate(-90deg);\r\n }\r\n\r\n .card-control-section.reveal_card_layout .e-card .e-reveal-icon:before {\r\n content: \"\\e984\";\r\n }\r\n\r\n .card-control-section.reveal_card_layout .col-xs-6.col-sm-6.col-lg-6.col-md-6 {\r\n width: 100%;\r\n padding: 10px;\r\n }\r\n\r\n .card-control-section.reveal_card_layout .card-layout {\r\n margin: auto;\r\n max-width: 250px;\r\n }\r\n\r\n @media (min-width: 560px) {\r\n .card-control-section.reveal_card_layout .col-xs-6.col-sm-6.col-lg-6.col-md-6 {\r\n width: 100%;\r\n }\r\n .card-control-section.reveal_card_layout .col-xs-6.col-sm-6.col-lg-6.col-md-6 .e-card {\r\n width: 250px;\r\n margin: auto;\r\n }\r\n }\r\n /* Swipeable card customization */\r\n\r\n .card-control-section.swipe_card_layout #source_link {\r\n position: absolute;\r\n bottom: 0;\r\n right: 0;\r\n }\r\n\r\n .card-control-section.swipe_card_layout .row.card-layout {\r\n display: flex;\r\n }\r\n\r\n .card-control-section.swipe_card_layout .row.card-layout .col-xs-6.col-sm-6.col-lg-6.col-md-6 {\r\n margin: 0 auto;\r\n }\r\n\r\n .card-control-section.swipe_card_layout .e-card.e-card-horizontal .e-card-stacked .e-card-actions {\r\n flex-grow: 1;\r\n }\r\n\r\n .card-control-section.swipe_card_layout .e-card.e-card-horizontal .e-card-stacked .e-card-actions button {\r\n background: #fff;\r\n margin-left: 5px;\r\n margin-right: 5px;\r\n background-color: transparent;\r\n }\r\n\r\n .card-control-section.swipe_card_layout .e-card.e-card-horizontal .e-card-stacked> :first-child {\r\n flex-grow: initial;\r\n }\r\n\r\n .card-control-section.swipe_card_layout #horizontal_product .e-card {\r\n user-select: none;\r\n width: calc(100% - 15px);\r\n }\r\n\r\n .card-control-section.swipe_card_layout .col-xs-6.col-sm-6.col-lg-6.col-md-6 {\r\n position: relative;\r\n top: 50px;\r\n width: 100%;\r\n }\r\n\r\n .card-control-section.swipe_card_layout {\r\n min-height: 450px;\r\n }\r\n\r\n .card-control-section.swipe_card_layout #horizontal_product .e-card {\r\n position: absolute;\r\n transition: all 200ms;\r\n touch-action: none;\r\n }\r\n\r\n .card-control-section.swipe_card_layout .card-out {\r\n animation: card-out 0.3s cubic-bezier(.8, .2, .1, 0.8);\r\n transform: translateX(0px) rotate(0deg) translateY(0px) scale(1);\r\n }\r\n\r\n .card-control-section.swipe_card_layout .card-out-left {\r\n animation: card-out-left 0.3s cubic-bezier(.8, .2, .1, 0.8);\r\n transform: translateX(0px) rotate(0deg) translateY(0px) scale(1);\r\n }\r\n\r\n @keyframes card-out-left {\r\n 0% {\r\n z-index: 20;\r\n transform: translateX(0px) translateY(0px);\r\n }\r\n 10% {\r\n transform: translateX(-50px) translateY(0px);\r\n }\r\n 20% {\r\n transform: translateX(-100px) translateY(0px);\r\n }\r\n 30% {\r\n transform: translateX(-150px) translateY(0px);\r\n }\r\n 40% {\r\n transform: translateX(-200px) translateY(0px);\r\n }\r\n 50% {\r\n transform: translateX(-250px) translateY(0px);\r\n }\r\n 60% {\r\n transform: translateX(-200px) translateY(0px);\r\n z-index: 0;\r\n }\r\n 70% {\r\n transform: translateX(-150px) translateY(0px);\r\n z-index: 0;\r\n }\r\n 80% {\r\n transform: translateX(-100px) translateY(0px);\r\n z-index: 0;\r\n }\r\n 90% {\r\n transform: translateX(-50px) translateY(0px);\r\n z-index: 0;\r\n }\r\n 100% {\r\n transform: translateX(0px) translateY(0px) scale(1);\r\n }\r\n }\r\n\r\n @keyframes card-out {\r\n 0% {\r\n z-index: 20;\r\n transform: translateX(0px) translateY(0px);\r\n }\r\n 10% {\r\n transform: translateX(50px) translateY(0px);\r\n }\r\n 20% {\r\n transform: translateX(100px) translateY(0px);\r\n }\r\n 30% {\r\n transform: translateX(150px) translateY(0px);\r\n }\r\n 40% {\r\n transform: translateX(200px) translateY(0px);\r\n }\r\n 50% {\r\n transform: translateX(250px) translateY(0px);\r\n }\r\n 60% {\r\n transform: translateX(200px) translateY(0px);\r\n z-index: 0;\r\n }\r\n 70% {\r\n transform: translateX(150px) translateY(0px);\r\n z-index: 0;\r\n }\r\n 80% {\r\n transform: translateX(100px) translateY(0px);\r\n z-index: 0;\r\n }\r\n 90% {\r\n transform: translateX(50px) translateY(0px);\r\n z-index: 0;\r\n }\r\n 100% {\r\n transform: translateX(0px) translateY(0px) scale(1);\r\n }\r\n }\r\n\r\n .card-control-section.swipe_card_layout .e-card>* {\r\n max-width: 50%;\r\n justify-content: flex-start;\r\n }\r\n\r\n #source_link {\r\n float: right;\r\n margin-right: 10px;\r\n }\r\n\r\n @media screen and (max-width: 768px) {\r\n #source_link {\r\n margin-top: -10px;\r\n margin-right: 0px;\r\n }\r\n }\r\n\r\n @media (min-width: 540px) {\r\n .card-control-section.swipe_card_layout .col-xs-6.col-sm-6.col-lg-6.col-md-6 {\r\n width: 50%;\r\n }\r\n .card-control-section.swipe_card_layout .card-layout {\r\n margin: auto;\r\n max-width: 870px;\r\n }\r\n }\r\n /* Tile view card customization */\r\n\r\n .tile_layout.card-control-section .row.filter .tile_search {\r\n justify-content: flex-end;\r\n }\r\n\r\n .tile_layout.card-control-section .row .e-card {\r\n text-align: left;\r\n }\r\n\r\n .tile_layout.card-control-section .control-wrapper {\r\n padding: 0 20px;\r\n }\r\n\r\n .tile_layout.card-control-section .row.filter {\r\n margin: 0;\r\n }\r\n\r\n .tile_layout.card-control-section .e-card .e-card-actions a {\r\n border: 1px solid;\r\n display: block;\r\n margin: auto;\r\n width: 100px;\r\n border-radius: inherit;\r\n }\r\n\r\n .tile_layout.card-control-section .e-card .e-card-header .e-card-header-caption .e-card-header-title {\r\n font-size: 18px;\r\n }\r\n\r\n .tile_layout.card-control-section .e-card .e-card-image {\r\n height: 165px;\r\n width: 200px;\r\n }\r\n\r\n .tile_layout.card-control-section .row.filter .col-xs-6.col-sm-6.col-lg-6.col-md-6 {\r\n display: inline-flex;\r\n flex-direction: column;\r\n width: 100%;\r\n }\r\n\r\n .tile_layout.card-control-section .col-xs-6.col-sm-6.col-lg-6.col-md-6 {\r\n width: 100%;\r\n padding: 10px;\r\n }\r\n\r\n .card-control-section.tile_layout .e-card-layout {\r\n margin: auto;\r\n max-width: 190px;\r\n }\r\n\r\n #source_link {\r\n float: right;\r\n margin-right: 10px;\r\n }\r\n\r\n @media screen and (max-width: 768px) {\r\n #source_link {\r\n margin-right: 0px;\r\n }\r\n }\r\n\r\n @media (min-width: 960px) {\r\n .tile_layout.card-control-section .col-xs-6.col-sm-6.col-lg-6.col-md-6 {\r\n width: 25%;\r\n }\r\n .card-control-section.tile_layout .e-card-layout {\r\n max-width: 850px;\r\n }\r\n }\r\n\r\n @media (min-width: 540px) {\r\n .tile_layout.card-control-section .row.filter {\r\n display: flex\r\n }\r\n .tile_layout.card-control-section .e-card .e-card-content {\r\n min-height: 170px;\r\n max-height: 170px;\r\n }\r\n }\r\n\r\n @media (max-width: 960px) and (min-width: 540px) {\r\n .tile_layout.card-control-section .col-xs-6.col-sm-6.col-lg-6.col-md-6 {\r\n width: 50%;\r\n }\r\n .card-control-section.tile_layout .e-card-layout {\r\n max-width: 410px;\r\n }\r\n }\r\n @font-face {\r\n font-family: 'Card_Icon';\r\n src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');\r\n font-weight: normal;\r\n font-style: normal;\r\n }\r\n \r\n .fabric .card-control-section.swipe_card_layout .e-card:hover,\r\n .highcontrast .card-control-section.swipe_card_layout .e-card:hover,\r\n .fabric .card-control-section.vertical_card_layout .e-card:hover,\r\n .highcontrast .card-control-section.vertical_card_layout .e-card:hover,\r\n .fabric .card-control-section.flip_card_layout .e-card:hover,\r\n .highcontrast .card-control-section.flip_card_layout .e-card:hover {\r\n border-width: 1px;\r\n padding: 1px;\r\n }\r\n\r\n\r\n .card-control-section.swipe_card_layout #horizontal_product .e-card .cb-icons {\r\n display: flex;\r\n width: inherit !important;\r\n height: inherit !important;\r\n font-size: 18px !important;\r\n justify-content: center;\r\n flex-direction: column;\r\n }\r\n\r\n .cb-icons {\r\n margin: auto;\r\n font-family: 'Card_Icon';\r\n speak: none;\r\n width: 38px !important;\r\n height: 38px !important;\r\n font-size: 37px !important;\r\n font-style: normal;\r\n font-weight: normal;\r\n font-variant: normal;\r\n text-transform: none;\r\n }\r\n\r\n .e-fav-icon.cb-icons::before {\r\n content: '\\e700';\r\n }\r\n\r\n .e-like-icon.cb-icons::before {\r\n content: '\\e703';\r\n }\r\n\r\n .e-share-icon.cb-icons::before {\r\n content: '\\e704';\r\n }\r\n\r\n .e-mail-icon.cb-icons::before {\r\n content: '\\e701';\r\n }\r\n\r\n .e-fb-icon.cb-icons::before {\r\n content: '\\e706';\r\n }\r\n\r\n .e-google-icon.cb-icons::before {\r\n content: '\\e702';\r\n }\r\n\r\n .e-tweet-icon.cb-icons::before {\r\n content: '\\e705';\r\n }\r\n\r\n /* Vertical card customization */\r\n\r\n .card-control-section.vertical_card_layout #vertical_business.e-card .e-card-header .e-card-header-title,\r\n .card-control-section.vertical_card_layout #vertical_business_profile.e-card .e-card-header .e-card-header-title {\r\n font-size: 18px;\r\n }\r\n\r\n .card-control-section.vertical_card_layout #vertical_business_profile.e-card .e-card-header {\r\n text-align: left;\r\n }\r\n\r\n .card-control-section.vertical_card_layout #vertical_business_profile.e-card>* {\r\n height: 50%;\r\n }\r\n\r\n .card-control-section.vertical_card_layout #vertical_business_profile.e-card .e-card-content {\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n\r\n .card-control-section.vertical_card_layout #vertical_business_profile.e-card .e-card-header-caption .e-card-sub-title,\r\n .card-control-section.vertical_card_layout #vertical_business_profile.e-card .e-card-header-caption .e-card-header-title,\r\n .card-control-section.vertical_card_layout #vertical_business_profile.e-card .e-card-content table td {\r\n color: #fff;\r\n }\r\n\r\n .card-control-section.vertical_card_layout #vertical_business.e-card {\r\n justify-content: flex-end;\r\n }\r\n\r\n .card-control-section.vertical_card_layout #vertical_business.e-card,\r\n .card-control-section.vertical_card_layout #vertical_business_profile.e-card {\r\n text-align: center;\r\n background-size: cover;\r\n height: 300px;\r\n }\r\n\r\n .card-control-section.vertical_card_layout #vertical_business.e-card .e-card-header-caption .e-card-header-title,\r\n .card-control-section.vertical_card_layout #vertical_business.e-card .e-card-header-caption .e-card-sub-title,\r\n .card-control-section.vertical_card_layout #vertical_business.e-card .e-card-actions button {\r\n color: #000;\r\n }\r\n\r\n .card-control-section.vertical_card_layout #vertical_business.e-card {\r\n background-image: url('http://ej2.syncfusion.com/react/demos/src/card/images/vertical_img.png');\r\n }\r\n\r\n .card-control-section.vertical_card_layout #vertical_business_profile.e-card {\r\n background-image: url('http://ej2.syncfusion.com/react/demos/src/card/images/vertical_img01.png');\r\n }\r\n\r\n .card-control-section.vertical_card_layout #vertical_business.e-card .e-card-actions,\r\n .card-control-section.vertical_card_layout #vertical_business_profile.e-card .e-card-actions {\r\n justify-content: center;\r\n padding-bottom: 40px;\r\n padding-top: 22px;\r\n }\r\n\r\n .card-control-section.vertical_card_layout #vertical_business.e-card .e-card-actions button,\r\n .card-control-section.vertical_card_layout #vertical_business_profile.e-card .e-card-actions button {\r\n background-color: transparent;\r\n text-transform: none;\r\n border: none;\r\n }\r\n\r\n /* Profile card Customization */\r\n\r\n .highcontrast .card-control-section.vertical_card_layout .e-card.profile .e-card-header-image {\r\n border-color: #fff;\r\n }\r\n\r\n .card-control-section.vertical_card_layout .e-card.profile .e-card-header-image {\r\n background-image: url('http://ej2.syncfusion.com/react/demos/src/card/images/8.png');\r\n width: 132px;\r\n height: 120px;\r\n background-size: cover;\r\n border-style: solid;\r\n border-color: rgba(0, 0, 0, 0.54);\r\n }\r\n\r\n .card-control-section.vertical_card_layout .e-card.profile .e-card-header-caption.center,\r\n .card-control-section.vertical_card_layout .e-card.profile .e-card-content {\r\n text-align: center;\r\n }\r\n\r\n .card-control-section.vertical_card_layout .e-card.profile .e-card-btn {\r\n height: 45px;\r\n width: 50px;\r\n background-color: transparent;\r\n border: none;\r\n }\r\n\r\n .card-control-section.vertical_card_layout .e-card.profile .e-card-actions button.e-card-btn:hover,\r\n .card-control-section.vertical_card_layout .e-card.profile .e-card-actions a:first-child:hover,\r\n .card-control-section.vertical_card_layout .e-card.profile .e-card-actions button.e-card-btn,\r\n .card-control-section.vertical_card_layout .e-card.profile .e-card-actions a:first-child {\r\n background: #ffff\r\n }\r\n\r\n .card-control-section.vertical_card_layout .e-card .e-card-actions.center {\r\n justify-content: center;\r\n display: flex; \r\n }\r\n\r\n .card-control-section.vertical_card_layout .e-card.profile .e-card-actions.center {\r\n background-color: transparent;\r\n border: none;\r\n }\r\n\r\n .card-control-section.vertical_card_layout .e-card.profile .e-card-header .e-card-header-caption .e-card-sub-title {\r\n font-size: 14px;\r\n font-weight: 400;\r\n color: rgba(0, 0, 0, 0.8);\r\n }\r\n\r\n .card-control-section.vertical_card_layout .e-card.profile .e-card-header .e-card-header-caption .e-card-header-title {\r\n font-size: 18px;\r\n font-weight: 500;\r\n }\r\n\r\n .card-control-section.vertical_card_layout .col-xs-6.col-sm-6.col-lg-6.col-md-6 {\r\n width: 100%;\r\n padding: 10px;\r\n }\r\n\r\n .card-control-section.vertical_card_layout .card-layout {\r\n margin: auto;\r\n max-width: 400px;\r\n }\r\n\r\n @media (min-width: 870px) {\r\n .card-control-section.vertical_card_layout .col-xs-6.col-sm-6.col-lg-6.col-md-6 {\r\n width: 50%;\r\n }\r\n\r\n .card-control-section.vertical_card_layout .card-layout {\r\n max-width: 870px;\r\n }\r\n }","systemjs.config.js":"System.config({\r\n transpiler: \"ts\",\r\n typescriptOptions: {\r\n target: \"es5\",\r\n module: \"commonjs\",\r\n moduleResolution: \"node\",\r\n emitDecoratorMetadata: true,\r\n experimentalDecorators: true,\r\n \"jsx\": \"react\"\r\n },\r\n meta: {\r\n 'typescript': {\r\n \"exports\": \"ts\"\r\n },\r\n '*.json': { loader: 'plugin-json' }\r\n },\r\n paths: {\r\n \"syncfusion:\": \"http://cdn.syncfusion.com/ej2/\"},\r\n map: {\r\n app: 'app',\r\n ts: \"https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js\",\r\n typescript: \"https://unpkg.com/typescript@2.2.2/lib/typescript.js\",\r\n \"plugin-json\":\"https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js\",\r\n \"@syncfusion/ej2-base\": \"syncfusion:ej2-base/dist/ej2-base.umd.min.js\",\r\n \"@syncfusion/ej2-buttons\": \"syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js\",\r\n \"@syncfusion/ej2-splitbuttons\": \"syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js\",\r\n \"@syncfusion/ej2-charts\": \"syncfusion:ej2-charts/dist/ej2-charts.umd.min.js\",\r\n \"@syncfusion/ej2-maps\": \"syncfusion:ej2-maps/dist/ej2-maps.umd.min.js\",\r\n \"@syncfusion/ej2-treemap\": \"syncfusion:ej2-treemap/dist/ej2-treemap.umd.min.js\",\r\n \"@syncfusion/ej2-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\",\r\n \"@syncfusion/ej2-lineargauge\": \"syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js\",\r\n \"@syncfusion/ej2-calendars\": \"syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js\",\r\n \"@syncfusion/ej2-data\": \"syncfusion:ej2-data/dist/ej2-data.umd.min.js\",\r\n \"@syncfusion/ej2-dropdowns\": \"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js\",\r\n \"@syncfusion/ej2-grids\": \"syncfusion:ej2-grids/dist/ej2-grids.umd.min.js\",\r\n \"@syncfusion/ej2-lists\": \"syncfusion:ej2-lists/dist/ej2-lists.umd.min.js\",\r\n \"@syncfusion/ej2-inputs\": \"syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js\",\r\n \"@syncfusion/ej2-navigations\": \"syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js\",\r\n \"@syncfusion/ej2-popups\": \"syncfusion:ej2-popups/dist/ej2-popups.umd.min.js\",\r\n \"@syncfusion/ej2-schedule\": \"syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js\",\r\n \"@syncfusion/ej2-pdf-export\": \"syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js\", \r\n \"@syncfusion/ej2-compression\": \"syncfusion:ej2-compression/dist/ej2-compression.umd.min.js\",\r\n \"@syncfusion/ej2-excel-export\": \"syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js\", \r\n \"@syncfusion/ej2-file-utils\": \"syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js\",\r\n \"@syncfusion/ej2-documenteditor\": \"syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js\",\r\n \"@syncfusion/ej2-notifications\": \"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js\",\r\n \"@syncfusion/ej2-richtexteditor\": \"syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js\",\r\n\t\t\"@syncfusion/ej2-svg-base\": \"syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js\",\r\n \"@syncfusion/ej2-pivotview\": \"syncfusion:ej2-pivotview/dist/ej2-pivotview.umd.min.js\",\r\n \"@syncfusion/ej2-heatmap\": \"syncfusion:ej2-heatmap/dist/ej2-heatmap.umd.min.js\",\r\n \"@syncfusion/ej2-react-base\": \"syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js\",\r\n \"@syncfusion/ej2-react-buttons\": \"syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js\",\r\n \"@syncfusion/ej2-react-splitbuttons\": \"syncfusion:ej2-react-splitbuttons/dist/ej2-react-splitbuttons.umd.min.js\",\r\n \"@syncfusion/ej2-react-charts\": \"syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js\",\r\n \"@syncfusion/ej2-react-maps\": \"syncfusion:ej2-react-maps/dist/ej2-react-maps.umd.min.js\",\r\n \"@syncfusion/ej2-react-treemap\": \"syncfusion:ej2-react-treemap/dist/ej2-react-treemap.umd.min.js\",\r\n \"@syncfusion/ej2-react-circulargauge\": \"syncfusion:ej2-react-circulargauge/dist/ej2-react-circulargauge.umd.min.js\",\r\n \"@syncfusion/ej2-react-lineargauge\": \"syncfusion:ej2-react-lineargauge/dist/ej2-react-lineargauge.umd.min.js\",\r\n \"@syncfusion/ej2-react-calendars\": \"syncfusion:ej2-react-calendars/dist/ej2-react-calendars.umd.min.js\",\r\n \"@syncfusion/ej2-react-dropdowns\": \"syncfusion:ej2-react-dropdowns/dist/ej2-react-dropdowns.umd.min.js\",\r\n \"@syncfusion/ej2-react-grids\": \"syncfusion:ej2-react-grids/dist/ej2-react-grids.umd.min.js\",\r\n \"@syncfusion/ej2-react-inputs\": \"syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js\",\r\n \"@syncfusion/ej2-react-lists\": \"syncfusion:ej2-react-lists/dist/ej2-react-lists.umd.min.js\",\r\n \"@syncfusion/ej2-react-navigations\": \"syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js\",\r\n \"@syncfusion/ej2-react-popups\": \"syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js\",\r\n \"@syncfusion/ej2-react-schedule\": \"syncfusion:ej2-react-schedule/dist/ej2-react-schedule.umd.min.js\",\r\n \"@syncfusion/ej2-react-documenteditor\": \"syncfusion:ej2-react-documenteditor/dist/ej2-react-documenteditor.umd.min.js\",\r\n \"@syncfusion/ej2-react-notifications\": \"syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.min.js\",\r\n \"@syncfusion/ej2-react-richtexteditor\": \"syncfusion:ej2-react-richtexteditor/dist/ej2-react-richtexteditor.umd.min.js\",\r\n \"@syncfusion/ej2-react-pivotview\": \"syncfusion:ej2-react-pivotview/dist/ej2-react-pivotview.umd.min.js\",\r\n \"@syncfusion/ej2-react-heatmap\": \"syncfusion:ej2-react-heatmap/dist/ej2-react-heatmap.umd.min.js\",\r\n \"react-dom\":\"https://unpkg.com/react-dom@15.5.4/dist/react-dom.min.js\",\r\n \"react\":\"https://unpkg.com/react@15.5.4/dist/react.min.js\",\r\n },\r\n packages: {\r\n 'app': { main: 'index', defaultExtension: 'tsx' },\r\n }\r\n});\r\n\r\nSystem.import('app');","index.html":"<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <title>Card · Basic · Essential JS 2 for React · Syncfusion</title>\r\n <meta charset=\"utf-8\" />\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\" />\r\n <meta http-equiv=\"x-ua-compatible\" content=\"ie=edge\">\r\n <!-- {{:meta}} -->\r\n <meta name=\"author\" content=\"Syncfusion\" />\r\n <script type=\"text/javascript\">\r\n var themeName = location.hash || 'material';\r\n themeName = themeName.replace('#','');\r\n window.ripple = (themeName === \"material\")\r\n document.write('<link href=\"http://cdn.syncfusion.com/ej2/' + themeName + '.css\" rel=\"stylesheet\">');\r\n </script>\r\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\" />\r\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js\"></script>\r\n <script src=\"systemjs.config.js\"></script>\r\n <link href=\"index.css\" rel=\"stylesheet\" />\r\n <style>\r\n #loader {\r\n color: #008cff;\r\n height: 40px;\r\n left: 45%;\r\n position: absolute;\r\n top: 45%;\r\n width: 30%;\r\n }\r\n body {\r\n touch-action:none;\r\n }\r\n .body {\r\n font-family: \"Roboto\", \"Segoe UI\", \"GeezaPro\", \"DejaVu Serif\", \"sans-serif\";\r\n }\r\n\r\n .e-view {\r\n bottom: 0;\r\n left: 0;\r\n overflow: hidden;\r\n position: absolute;\r\n right: 0;\r\n top: 0;\r\n }\r\n\r\n .sb-left {\r\n float: left;\r\n }\r\n\r\n .sb-right {\r\n float: right;\r\n }\r\n\r\n .sb-block {\r\n display: block;\r\n }\r\n\r\n .sb-table {\r\n display: table;\r\n }\r\n\r\n .sb-table-cell {\r\n display: table-cell;\r\n vertical-align: middle;\r\n }\r\n\r\n /*sample header*/\r\n\r\n\r\n .sb-header {\r\n height: 48px;\r\n background: #FFFFFF;\r\n box-shadow: 0 2px 4px 0 rgba(0,0,0,0.12);\r\n z-index: 1001;\r\n opacity: 100;\r\n }\r\n\r\n\r\n .sb-header-left, .sb-header-right {\r\n height: 100%;\r\n }\r\n\r\n #sb-header-text {\r\n padding-left: 22px;\r\n opacity: 0.87;\r\n font-family: Roboto;\r\n font-weight: 500;\r\n font-size: 15px;\r\n color: #000000;\r\n text-align: left;\r\n }\r\n\r\n .header-logo {\r\n float: left;\r\n padding-left: 8px;\r\n padding-right: 22px;\r\n }\r\n\r\n .footer-logo {\r\n background: url(https://ej2.syncfusion.com/home/images/footer-logo.svg) no-repeat right;\r\n height: 40px;\r\n width: 140px;\r\n }\r\n\r\n .sb-header-splitter {\r\n float: left;\r\n border-left: 1px solid rgb(196, 196, 196);\r\n height: 32px;\r\n margin-top: 8px;\r\n padding-left: 22 px;\r\n }\r\n\r\n .sb-header-settings {\r\n display: none;\r\n }\r\n\r\n .product-style a{\r\n padding-right: 15px;\r\n font-family:Roboto;\r\n font-weight: 500;\r\n font-size: 13px;\r\n color: #363636;\r\n text-align: center;\r\n text-decoration: none;\r\n }\r\n .product-style a:hover {\r\n color:#3C78EF;\r\n }\r\n\r\n .sb-download-btn a {\r\n text-decoration: none;\r\n }\r\n\r\n .sb-download-text {\r\n color: #FFFFFF;\r\n }\r\n\r\n .sb-download-wrapper {\r\n padding-right: 27px;\r\n }\r\n\r\n .sb-download-btn:hover .sb-download-btn:focus .sb-download-btn.active {\r\n border-radius: 2px;\r\n font-family: \"Roboto\";\r\n font-weight: bold;\r\n color: #FFFFFF;\r\n }\r\n\r\n .sb-download-btn:hover {\r\n background: #006CE6;\r\n }\r\n\r\n .sb-download-btn:focus {\r\n background: #0051CB;\r\n }\r\n\r\n .sb-download-btn.active {\r\n background: #0036B1;\r\n }\r\n\r\n .sb-download-btn {\r\n background-color: #3C78EF;\r\n opacity: 100;\r\n border-radius: 2px;\r\n font-family: \"Roboto\", \"Segoe UI\", \"GeezaPro\", \"DejaVu Serif\", \"sans-serif\";\r\n font-weight: 500;\r\n line-height: 18px;\r\n height: 32px;\r\n border-color: transparent;\r\n }\r\n\r\n .sb-bread-crumb {\r\n padding-left: 20px;\r\n padding-top: 24px;\r\n padding-bottom: 10px;\r\n }\r\n\r\n .category-allcontrols a, .category-text a, .crumb-sample {\r\n display: table;\r\n opacity: 0.87;\r\n font-family: Roboto;\r\n font-weight: 500;\r\n font-size: 15px;\r\n color: #3C78EF;\r\n text-align: left;\r\n text-decoration: none;\r\n }\r\n\r\n .sb-bread-crumb .sb-bread-crumb-text>div {\r\n font-size: 15px;\r\n font-weight: 500;\r\n padding-right: 8px;\r\n cursor: default;\r\n display: table-cell;\r\n }\r\n\r\n .sb-bread-crumb-text>div.seperator {\r\n font-weight: 700;\r\n font-size: 15px;\r\n vertical-align: bottom;\r\n } \r\n\r\n .content {\r\n overflow: auto;\r\n height: calc(100% - 50px);\r\n top: 50px;\r\n }\r\n\r\n\r\n .sample-content {\r\n top: 48px;\r\n background: #FFFFFF;\r\n }\r\n\r\n .div {\r\n display: block;\r\n }\r\n\r\n .control-section {\r\n padding-left: 4px;\r\n }\r\n\r\n .crumb-sample {\r\n color: #000000;\r\n line-height: 18px;\r\n }\r\n\r\n #description {\r\n padding-bottom: 16px;\r\n padding-left: 20px;\r\n opacity: 0.75;\r\n font-family: Roboto;\r\n font-size: 13px;\r\n color: #000000;\r\n text-align: left;\r\n padding-top: 14px;\r\n }\r\n\r\n #action-description {\r\n padding-left: 20px;\r\n padding-bottom: 15px;\r\n opacity: 0.75;\r\n font-family: Roboto;\r\n font-size: 13px;\r\n color: #000000;\r\n text-align: left;\r\n }\r\n\r\n #description-section {\r\n padding-left: 20px;\r\n padding-top: 30px;\r\n opacity: 0.87;\r\n font-family:Roboto;\r\n font-weight: 700;\r\n font-size: 15px;\r\n color: #000000;\r\n text-align: left;\r\n }\r\n\r\n\r\n\r\n </style>\r\n</head>\r\n\r\n<body class='e-view ej2-new' aria-busy=\"true\">\r\n <div class=\"sample-browser\">\r\n <div id='sample-header' class=\"sb-header\" role=\"banner\">\r\n <div class='sb-header-left sb-left sb-table'>\r\n <div class='sb-header-item sb-table-cell'>\r\n <div class=\"header-logo\">\r\n <a href=\"https://ej2.syncfusion.com/home/react.html\" target=\"\" rel=\"noopener noreferrer\">\r\n <div class=\"footer-logo\"> </div>\r\n </a>\r\n </div>\r\n \r\n </div>\r\n <div class=\"sb-header-splitter sb-download-splitter\"></div>\r\n <div class='sb-header-item sb-table-cell'>\r\n <div id='sb-header-text' class='e-sb-header-text'>\r\n \r\n <span class='sb-header-text-left'>Essential JS 2 for React</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class='sb-header-right sb-right sb-table'>\r\n <div class='sb-header-item sb-table-cell'>\r\n <div class='product-style'>\r\n <div><a href=\"https://www.syncfusion.com/products/react/card\">PRODUCT DETAILS</a></div>\r\n </div>\r\n </div>\r\n <div class='sb-header-item sb-table-cell'>\r\n <div class=\"sb-header-item sb-table-cell sb-download-wrapper\">\r\n <a href=\"https://www.syncfusion.com/downloads/essential-js2\" target=\"_blank\">\r\n <button id=\"download-now\" class=\"sb-download-btn\">\r\n <span class=\"sb-download-text\">DOWNLOAD</span>\r\n </button>\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n <div class ='content e-view'>\r\n <div class='sample-content'>\r\n <div id=\"sample-bread-crumb\" class=\"sb-bread-crumb\">\r\n <div class=\"sb-bread-crumb-text\">\r\n <div class=\"category-allcontrols\"><a href=\"https://ej2.syncfusion.com/react/demos\"><span>All Controls</span></a></div>\r\n <div class=\"category-seperator sb-icons\"> / </div>\r\n <div class=\"category-text bread-ctext\"><a href=\"https://ej2.syncfusion.com/react/demos/#/material/card/default.html\"><span>Card</span></a></div>\r\n <div class=\"category-seperator sb-icons\"> / </div>\r\n <div class=\"crumb-sample\">Basic</div>\r\n </div>\r\n </div>\r\n <div class=\"control-content\">\r\n <div id=\"action-description\">\r\n <p>\r\n \n <p>\n This sample demonstrates\n <code>card</code> rendering with the following basic weather layout.\n </p>\n \r\n </p>\r\n </div>\r\n <div class=\"container-fluid\">\r\n <div class=\"control-section\">\r\n <div id='sample'>\r\n <div id='loader'>Loading....</div>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n <div id=\"description-section\">Description</div> \r\n <div id=\"description\">\r\n <p>\r\n \n <p>\n The card is a small content display area in which specific structure of the content can be shown. This sample demonstrates\n the defined structure and predefined classes for adding basic cards with header, and content elements.\n </p><p>More information about Card can be found in this\n <a target=\"_blank\" href=\"http://ej2.syncfusion.com/documentation/card/getting-started.html\">\n documentation</a> section.</p>\n <p></p>\n \r\n </p> \r\n </div> \r\n </div> \r\n </div>\r\n \r\n </div>\r\n </div>\r\n \r\n</body>\r\n</html>\r\n","app/index.tsx":"import * as ReactDOM from 'react-dom';\r\nimport * as React from 'react';\r\nimport { SampleBase } from './sample-base';\r\n\r\n\r\n// tslint:disable:max-line-length\r\n\r\n// * Sample for CSS Basic Layout Cards.\r\n\r\nexport class Basic extends SampleBase<{}, {}> {\r\n\r\n render() {\r\n return (\r\n <div className='control-pane'>\r\n <div className='control-section card-control-section basic_card_layout'>\r\n <div className=\"e-card-resize-container\">\r\n <div className='row'>\r\n <div className=\"row card-layout\" >\r\n <div className=\"col-xs-6 col-sm-6 col-lg-6 col-md-6\">\r\n <div className=\"e-card\" id=\"basic_card\" >\r\n <div className=\"e-card-header\">\r\n <div className=\"e-card-header-caption\">\r\n <div className=\"e-card-title\">Debunking Five Data Science Myths</div>\r\n <div className=\"e-card-sub-title\">By John Doe | Jan 20, 2018 </div>\r\n </div>\r\n </div>\r\n <div className=\"e-card-content\">\r\n Tech evangelists are currently pounding their pulpits about all things AI, machine learning, analytics—anything that sounds\r\n like the future and probably involves lots of numbers. Many of these topics can be grouped under\r\n the intimidating term data science.\r\n </div>\r\n <div className=\"e-card-actions\">\r\n <button className=\"e-btn e-outline e-primary\">\r\n Read More\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n <div className=\"col-xs-6 col-sm-6 col-lg-6 col-md-6\">\r\n <div className=\"e-card\" id=\"weather_card\" >\r\n <div className=\"e-card-header\">\r\n <div className=\"e-card-header-caption\">\r\n <div className=\"e-card-header-title\">Today</div>\r\n <div className=\"e-card-sub-title\">New York - Scattered Showers.</div>\r\n </div>\r\n </div>\r\n <div className=\"e-card-header weather_report\">\r\n <div className=\"e-card-header-image\"></div>\r\n <div className=\"e-card-header-caption\">\r\n <div className=\"e-card-header-title\">1º / -4º</div>\r\n <div className=\"e-card-sub-title\">Chance for snow: 100%</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\nReactDOM.render(<Basic />, document.getElementById('sample'));","app/sample-base.tsx":"import * as ReactDOM from 'react-dom';\r\nimport * as React from 'react';\r\nimport { RouteComponentProps } from 'react-router-dom';\r\nimport { enableRipple } from '@syncfusion/ej2-base';\r\n\r\nenableRipple((window as any).ripple);\r\nexport class SampleBase<P, S> extends React.PureComponent<RouteComponentProps<any> & P, S>{\r\n public rendereComplete(): void {\r\n /**custom render complete function */\r\n }\r\n componentDidMount(): void {\r\n setTimeout(() => {\r\n this.rendereComplete();\r\n }\r\n );\r\n }\r\n}"}