Improved card

2 files changed, 23 insertions, 12 deletions

diff --git a/tpl/objects/card.pug b/tpl/objects/card.pug
index acb86eb..1db2fe5 100644
--- a/tpl/objects/card.pug
+++ b/tpl/objects/card.pug
@@ -1,8 +1,9 @@
 mixin card
     -
         let classes = {
-            'o-card':        true,
-            'o-card--quiet': !!attributes.quiet,
+            'o-card':            true,
+            'o-card--quiet':     !!attributes.quiet,
+            'o-card--thumbnail': !!attributes.thumbnail,
         }
 
         if (attributes.class) {
@@ -38,13 +39,7 @@ mixin card-image
                 block
 
 mixin card-body
-    -
-        let classes = {
-            'o-card__body': true,
-            'o-card__body--hidden': attributes.hidden,
-        }
-
-    div(class=classes)(style=attributes.style)
+    .o-card__body(style=attributes.style)
         block
 
 mixin card-title 
diff --git a/tpl/views/card.pug b/tpl/views/card.pug
index 3fd0113..8dde279 100644
--- a/tpl/views/card.pug
+++ b/tpl/views/card.pug
@@ -1,5 +1,21 @@
 mixin view-card 
     +view('card', 'Card')(wide=true)
+        .l-card-list
+            +card(href='#' class='l-card-list__card')
+                +card-body
+                    strong= 'Lorem ipsum dolor'
+                    = 'sit amet'
+            +card(href='#' class='l-card-list__card')
+                +card-body
+                    strong= 'Lorem ipsum dolor'
+                    = 'sit amet'
+            +card(href='#' class='l-card-list__card')
+                +card-body
+                    strong= 'Lorem ipsum dolor'
+                    = 'sit amet'
+
+        +divider('faint')(class='u-mb-700')
+
         .l-card-list.l-card-list--merge
             +card(href='#' class='l-card-list__card')
                 +card-body
@@ -17,10 +33,10 @@ mixin view-card
         +divider('faint')(class='u-mb-700')
 
         .l-card-list.l-card-list--masonry
-            +card(href='#' class='l-card-list__card')
-                +card-body(hidden=true)
-                    +card-title= 'XS Heading'
+            +card(thumbnail=true href='#' class='l-card-list__card')
                 +card-image(src='Drawing_Half.png' style={ 'aspect-ratio': '21 / 9' })
+                +card-body
+                    +card-title= 'XS Heading'
 
             +card(href='#' class='l-card-list__card')
                 +card-image(src='Drawing_Half.png' style={ 'aspect-ratio': '21 / 9' })