{"id":4195,"date":"2020-10-29T12:05:35","date_gmt":"2020-10-29T11:05:35","guid":{"rendered":"https:\/\/solidt.eu\/site\/?p=4195"},"modified":"2020-11-08T22:09:05","modified_gmt":"2020-11-08T21:09:05","slug":"css-card-layout","status":"publish","type":"post","link":"https:\/\/solidt.eu\/site\/css-card-layout\/","title":{"rendered":"CSS Card Layout"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"596\" height=\"311\" src=\"https:\/\/solidt.eu\/site\/wp-content\/uploads\/2020\/10\/afbeelding-1.png\" alt=\"\" class=\"wp-image-4197\" srcset=\"https:\/\/solidt.eu\/site\/wp-content\/uploads\/2020\/10\/afbeelding-1.png 596w, https:\/\/solidt.eu\/site\/wp-content\/uploads\/2020\/10\/afbeelding-1-300x157.png 300w\" sizes=\"auto, (max-width: 596px) 100vw, 596px\" \/><\/figure>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"xml\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;div class=\"card\">\n  &lt;div class=\"button\">1&lt;br\/>A&lt;\/div>\n  &lt;div class=\"content\">&lt;\/div>\n  &lt;div class=\"button\">OK&lt;\/div>\n&lt;\/div>\n\n&lt;div class=\"card\">\n  &lt;div class=\"button\">1&lt;br\/>A&lt;\/div>\n  &lt;div class=\"content\">\n    Sed facilisis venenatis egestas. Mauris dictum, ligula at scelerisque porta, felis augue hendrerit enim, ut rutrum eros ligula sed lacus. \n  &lt;\/div>\n  &lt;div class=\"button\">OK&lt;\/div>\n&lt;\/div>\n\n&lt;div class=\"card\">\n  &lt;div class=\"button\">1&lt;br\/>B&lt;\/div>\n  &lt;div class=\"content\">\n    Sed facilisis venenatis egestas. Mauris dictum, ligula at scelerisque porta, felis augue hendrerit enim, ut rutrum eros ligula sed lacus. \n        Sed facilisis venenatis egestas. Mauris dictum, ligula at scelerisque porta, felis augue hendrerit enim, ut rutrum eros ligula sed lacus. \n  &lt;\/div>\n  &lt;div class=\"button\">OK&lt;\/div>\n&lt;\/div>\n<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.card {\n    display: grid;\n    grid-template-columns: 45px 1fr 45px;\n    align-content: center;\n    user-select: none;\n    overflow: hidden;\n    background-color: #fff;\n    margin: 1em 1em 0 1em;\n    border-radius: 1em;\n    position: relative;\n    min-height: 1em;\n    background: linear-gradient(0deg, rgba(200, 200, 200, 1) 0%, rgba(255, 255, 255, 1) 100%);\n}\n\n.card>.content {\n    padding: 10px;\n}\n\n.card>.button {\n    position: static;\n    background-color: #00AAFF;\n    color: #fff;\n    display: grid;\n    align-content: center;\n    justify-content: center;\n    cursor: pointer;\n}\n\n.card>.button:hover, .card>.button:focus {\n    filter: brightness(0.8);\n}\n\n.card>.button:active {\n    filter: brightness(0.6);\n}\n\n\/* environment *\/\nbody {\n    background: #aaa;\n    padding: 0;\n    margin: 0;\n    font-family: Arial;\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-4195","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/4195","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/comments?post=4195"}],"version-history":[{"count":4,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/4195\/revisions"}],"predecessor-version":[{"id":4221,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/4195\/revisions\/4221"}],"wp:attachment":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/media?parent=4195"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/categories?post=4195"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/tags?post=4195"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}