1 files changed, 63 insertions, 6 deletions

diff --git a/tpl/views/card.pug b/tpl/views/card.pug
index 61081a9..e982925 100644
--- a/tpl/views/card.pug
+++ b/tpl/views/card.pug
@@ -1,6 +1,63 @@
 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' shadow=true)
+                +card-body
+                    strong= 'Lorem ipsum dolor'
+                    = 'sit amet'
+            +card(href='#' class='l-card-list__card' borderless=true)
+                +card-body
+                    strong= 'Lorem ipsum dolor'
+                    = 'sit amet'
+            +card(href='#' class='l-card-list__card' shadow=true borderless=true)
+                +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' borderless=true)
+                +card-body
+                    strong= 'Lorem ipsum dolor'
+                    = 'sit amet'
+            +card(href='#' class='l-card-list__card' borderless=true)
+                +card-body
+                    strong= 'Lorem ipsum dolor'
+                    = 'sit amet'
+            +card(href='#' class='l-card-list__card' borderless=true)
+                +card-body
+                    strong= 'Lorem ipsum dolor'
+                    = 'sit amet'
+
+        +divider('faint')(class='u-mb-700')
+
+        .l-card-list.l-card-list--merge.l-card-list--borderless.l-card-list--shadow
+            +card(href='#' class='l-card-list__card' borderless=true)
+                +card-body
+                    strong= 'Lorem ipsum dolor'
+                    = 'sit amet'
+            +card(href='#' class='l-card-list__card' borderless=true)
+                +card-body
+                    strong= 'Lorem ipsum dolor'
+                    = 'sit amet'
+            +card(href='#' class='l-card-list__card' borderless=true)
+                +card-body
+                    strong= 'Lorem ipsum dolor'
+                    = 'sit amet'
+
+        +divider('faint')(class='u-mb-700')
+
         .l-card-list.l-card-list--masonry
+            +card(thumbnail=true href='#' class='l-card-list__card')
+                +card-image(src='Drawing_Half.png')
+                +card-body
+                    +card-title= 'XS Heading'
+
             +card(href='#' class='l-card-list__card')
                 +card-image(src='Drawing_Half.png' style={ 'aspect-ratio': '21 / 9' })
                 +card-avatar(src='avatar.png')
@@ -26,30 +83,30 @@ mixin view-card
                 +card-body
                     .l-media
                         .l-media__block
-                            +badge('positive')(quiet=true icon='repeat' href='#')
+                            +button(theme='positive' badge=true pill=true size='sm' icon='repeat' href='#')
                                 strong= '12'
                         .l-media__block
-                            +badge('warning')(quiet=true icon='star' href='#')
+                            +button(theme='warning' badge=true pill=true size='sm' icon='star' href='#')
                                 strong= '34'
                         .l-media__block.u-mis-auto
-                            +a-button(primary=true)= 'Reply'
+                            +button(selected=true)= 'Reply'
 
             +card(quiet=true href='#' class='l-card-list__card')
                 +card-image(src='Drawing_Half.png' style={ 'aspect-ratio': '21 / 9' })
-                    +badge= 'Drawings'
+                    +button(badge=true selected=true)= 'Drawings'
                 +card-body
                     +card-title= 'XS Heading'
                     +card-content
                         p= loremIpsum
                         p= loremIpsum
 
-        each layout in ['grid', 'masonry', 'masonry-h']
+        each layout in ['grid', 'grid-sm', 'masonry', 'masonry-h']
             -
                 let quiet = true
 
                 let classes = {
                     'l-card-list': true,
-                    'l-card-list--aspect-5/4': layout === 'grid',
+                    'l-card-list--aspect-5/4': ['grid', 'grid-sm'].includes(layout),
                     'l-card-list--quiet': quiet,
                 }
                 classes[`l-card-list--${layout}`] = true;