Add card

6 files changed, 45 insertions, 31 deletions

diff --git a/tpl/objects/avatar.pug b/tpl/objects/avatar.pug
index 19439bb..ca3de07 100644
--- a/tpl/objects/avatar.pug
+++ b/tpl/objects/avatar.pug
@@ -20,11 +20,21 @@ mixin avatar
             styles['--avatar--colors--h'] = attributes.hue;
         }
 
-    a(class=classes style=styles href=attributes.href)
-        if attributes.status 
-            +status-indicator(attributes.status)(class='o-avatar__status')
-        if attributes.src 
-            img.o-avatar__content(src=attributes.src)
-        else
-            .o-avatar__content
-                block
+    if attributes.href
+        a(class=classes style=styles href=attributes.href)
+            if attributes.status 
+                +status-indicator(attributes.status)(class='o-avatar__status')
+            if attributes.src 
+                img.o-avatar__content(src=attributes.src)
+            else
+                .o-avatar__content
+                    block
+    else
+        div(class=classes style=styles)
+            if attributes.status 
+                +status-indicator(attributes.status)(class='o-avatar__status')
+            if attributes.src 
+                img.o-avatar__content(src=attributes.src)
+            else
+                .o-avatar__content
+                    block
diff --git a/tpl/objects/card.pug b/tpl/objects/card.pug
index d6516be..d61393d 100644
--- a/tpl/objects/card.pug
+++ b/tpl/objects/card.pug
@@ -1,29 +1,34 @@
 mixin card
-    - const slots = {}
-
-    mixin slot(key)
-        - slots[key] = block
-
     -
-        block ? block() : undefined 
-
         let classes = {
             'o-card': true,
         }
 
     if attributes.href
         a(href=attributes.href class=classes)
-            if slots.body
-                .o-card__body
-                    - slots.body()
-            if slots.footer
-                .o-card__footer
-                    - slots.footer()
+            block
     else
         div(class=classes)
-            if slots.body
-                .o-card__body
-                    - slots.body()
-            if slots.footer
-                .o-card__footer
-                    - slots.footer()
+            block
+
+mixin card-image
+    .o-card__image
+        img.o-card__image-img(src=attributes.src)
+
+mixin card-body
+    .o-card__body
+        block
+
+mixin card-title 
+    h1.o-card__title
+        block
+
+mixin card-avatar 
+    +avatar(class='o-card__avatar' src=attributes.src size='xl')
+
+mixin card-content 
+    .o-card__content
+        block
+mixin card-footer
+    footer.o-card__footer
+        block
diff --git a/tpl/objects/menu.pug b/tpl/objects/menu.pug
index a8b20d7..578f9bc 100644
--- a/tpl/objects/menu.pug
+++ b/tpl/objects/menu.pug
@@ -19,7 +19,7 @@ mixin menu-item
         let classes = {
             'o-menu__item':   true,
             'l-media':        true,
-            'l-media--75':    true,
+            'l-media--sm':    true,
             'o-menu__header': attributes.header,
             'is-selected':    attributes.selected,
         }
diff --git a/tpl/objects/message.pug b/tpl/objects/message.pug
index d644347..6b64a40 100644
--- a/tpl/objects/message.pug
+++ b/tpl/objects/message.pug
@@ -45,7 +45,7 @@ mixin message(user)
 
     article(class=classes)
         if user && attributes.avatar
-            .l-media.l-media--flush.l-flex--align-start
+            .l-media.l-flex--align-start
                 .l-media__block.u-mt-50.u-p-sticky-top
                     +avatar= user.slice(0, 2)
                 .l-media__block.l-media__block--main
diff --git a/tpl/objects/side-nav.pug b/tpl/objects/side-nav.pug
index 511f298..ccd24e4 100644
--- a/tpl/objects/side-nav.pug
+++ b/tpl/objects/side-nav.pug
@@ -19,7 +19,7 @@ mixin side-nav-item
         let classes = {
             'o-side-nav__item':   true,
             'l-media':        true,
-            'l-media--75':    true,
+            'l-media--sm':    true,
             'o-side-nav__header': attributes.header,
             'is-selected':    attributes.selected,
         }
diff --git a/tpl/objects/text-field.pug b/tpl/objects/text-field.pug
index f8e5263..0342f01 100644
--- a/tpl/objects/text-field.pug
+++ b/tpl/objects/text-field.pug
@@ -15,7 +15,6 @@ mixin text-field
             'is-invalid':             attributes.invalid,
             'is-disabled':            attributes.disabled,
             'l-media':                !!block,
-            'l-media--flush':         !!block,
             'l-media--gapless':       !!block,
         }
         if (attributes.class) {