3 files changed, 44 insertions, 9 deletions

diff --git a/tpl/objects/card.pug b/tpl/objects/card.pug
index 1db2fe5..feb1441 100644
--- a/tpl/objects/card.pug
+++ b/tpl/objects/card.pug
@@ -1,9 +1,11 @@
 mixin card
     -
         let classes = {
-            'o-card':            true,
-            'o-card--quiet':     !!attributes.quiet,
-            'o-card--thumbnail': !!attributes.thumbnail,
+            'o-card':             true,
+            'o-card--borderless': !!attributes.borderless,
+            'o-card--shadow':     !!attributes.shadow,
+            'o-card--quiet':      !!attributes.quiet,
+            'o-card--thumbnail':  !!attributes.thumbnail,
         }
 
         if (attributes.class) {
diff --git a/tpl/views/card.pug b/tpl/views/card.pug
index 5e48dde..9a35b37 100644
--- a/tpl/views/card.pug
+++ b/tpl/views/card.pug
@@ -5,11 +5,15 @@ mixin view-card
                 +card-body
                     strong= 'Lorem ipsum dolor'
                     = 'sit amet'
-            +card(href='#' class='l-card-list__card')
+            +card(href='#' class='l-card-list__card' shadow=true)
                 +card-body
                     strong= 'Lorem ipsum dolor'
                     = 'sit amet'
-            +card(href='#' class='l-card-list__card')
+            +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'
@@ -17,15 +21,31 @@ mixin view-card
         +divider('faint')(class='u-mb-700')
 
         .l-card-list.l-card-list--merge
-            +card(href='#' class='l-card-list__card')
+            +card(href='#' class='l-card-list__card' borderless=true)
                 +card-body
                     strong= 'Lorem ipsum dolor'
                     = 'sit amet'
-            +card(href='#' class='l-card-list__card')
+            +card(href='#' class='l-card-list__card' borderless=true)
                 +card-body
                     strong= 'Lorem ipsum dolor'
                     = 'sit amet'
-            +card(href='#' class='l-card-list__card')
+            +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'
@@ -86,7 +106,7 @@ mixin view-card
 
                 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;
diff --git a/tpl/views/divider.pug b/tpl/views/divider.pug
index ea08984..5429ab5 100644
--- a/tpl/views/divider.pug
+++ b/tpl/views/divider.pug
@@ -12,34 +12,45 @@ mixin view-divider
 
         .c-box
             +div-heading('xs')= 'Heading'
+            +divider('quiet')
+            p= loremIpsum
+
+        .c-box
+            +div-heading('xs')= 'Heading'
             +divider('faint')
             p= loremIpsum
 
         .c-box
             +divider('strong')= 'Strong'
             +divider('medium')= 'Medium'
+            +divider('quiet')= 'Quiet'
             +divider('faint')= 'Faint'
             +divider('strong')
             +divider('medium')
+            +divider('quiet')
             +divider('faint')
 
         .c-box
             .l-media(style="height: 1em")
                 +divider('strong')(vertical=true class="l-media__block")
                 +divider('medium')(vertical=true class="l-media__block")
+                +divider('quiet')(vertical=true class="l-media__block")
                 +divider('faint')(vertical=true class="l-media__block")
             .l-media(style="height: 1em")
                 +divider('strong')(dot=true class="l-media__block")
                 +divider('medium')(dot=true class="l-media__block")
+                +divider('quiet')(dot=true class="l-media__block")
                 +divider('faint')(dot=true class="l-media__block")
 
         each theme in ['accent', 'negative']
             .c-box
                 +divider('strong')(color=theme)= 'Strong'
                 +divider('medium')(color=theme)= 'Medium'
+                +divider('quiet')(color=theme)= 'Quiet'
                 +divider('faint')(color=theme)= 'Faint'
                 +divider('strong')(color=theme)
                 +divider('medium')(color=theme)
+                +divider('quiet')(color=theme)
                 +divider('faint')(color=theme)
 
         each theme in ['static-black', 'static-white']
@@ -49,7 +60,9 @@ mixin view-divider
             .c-box(style=`background-color: var(--colors--blue-static--${bg});`)
                 +divider('strong')(color=theme)= 'Strong'
                 +divider('medium')(color=theme)= 'Medium'
+                +divider('quiet')(color=theme)= 'Quiet'
                 +divider('faint')(color=theme)= 'Faint'
                 +divider('strong')(color=theme)
                 +divider('medium')(color=theme)
+                +divider('quiet')(color=theme)
                 +divider('faint')(color=theme)