[ { "target": "demo", "code": "<div class=\"card__box\">\n <div class=\"card__img\"></div>\n <div class=\"card__contents\">\n <div class=\"card__title\">Card</div>\n <p class=\"card__desc\">text...text...text....text....text....</p>\n </div>\n</div>" }, { "target": "html", "code": "<div class=\"card__box\">\n <div class=\"card__img\"></div>\n <div class=\"card__contents\">\n <div class=\"card__title\">Card</div>\n <p class=\"card__desc\">text...text...text....text....text....</p>\n </div>\n</div>" }, { "target": "sass", "code": "@mixin card() {\n width: 10em;\n border: 1px solid #ccc;\n}\n\n@mixin card__img($url: '//placehold.it/300x300') {\n height: 7em;\n background: url($url) center center / cover;\n}\n\n@mixin card__body() {\n padding: .3em .5em;\n}\n\n@mixin card__headline() {\n text-align: center;\n margin: .5em 0;\n}\n\n@mixin card__text() {\n font-size: .9em;\n word-break: break-all;\n}\n", "altCode": "@import \"card\";\n\n.card__box {\n @include card;\n}\n\n.card__img {\n @include card__img;\n}\n\n.card__contents {\n @include card__body;\n}\n\n.card__title {\n @include card__headline;\n}\n\n.card__desc {\n @include card__text;\n}\n" }, { "target": "css", "code": ".card__box {\n width: 10em;\n border: 1px solid #ccc;\n}\n\n.card__img {\n height: 7em;\n background: url(//placehold.it/300x300) center center / cover;\n}\n\n.card__contents {\n padding: .3em .5em;\n}\n\n.card__title {\n text-align: center;\n margin: .5em 0;\n}\n\n.card__desc {\n font-size: .9em;\n word-break: break-all;\n}\n" } ]