4 files changed, 55 insertions, 2 deletions

diff --git a/tpl/objects/action-button.pug b/tpl/objects/action-button.pug
index c3a9b53..e9b6fe3 100644
--- a/tpl/objects/action-button.pug
+++ b/tpl/objects/action-button.pug
@@ -26,4 +26,9 @@ mixin action-button
         if attributes.icon
             +icon(attributes.icon)
             = ' '
-        block
+        if block
+            span.o-action-button__label
+                block
+        if attributes.postIcon
+            = ' '
+            +icon(attributes.postIcon)
diff --git a/tpl/objects/card.pug b/tpl/objects/card.pug
index 2ab9bef..e0f6a15 100644
--- a/tpl/objects/card.pug
+++ b/tpl/objects/card.pug
@@ -26,7 +26,16 @@ mixin card-image
             classes[attributes.class] = true;
         }
 
-    img(class=classes src=attributes.src style=attributes.style)
+        let imgClasses = {
+            'o-card__image-img': true,
+            'l-card-list__card-image': attributes.list
+        }
+
+    div(class=classes)
+        img(class=imgClasses src=attributes.src style=attributes.style)
+        if block
+            .o-card__image-overlay 
+                block
 
 mixin card-body
     .o-card__body(style=attributes.style)
diff --git a/tpl/objects/divider.pug b/tpl/objects/divider.pug
index 46425cd..ed4d27a 100644
--- a/tpl/objects/divider.pug
+++ b/tpl/objects/divider.pug
@@ -3,6 +3,8 @@ mixin divider(level)
         let classes = {
             'o-divider':                        true,
             'o-divider--labelled':              !!block,
+            'o-divider--vertical':              !!attributes.vertical,
+            'o-divider--dot':                   !!attributes.dot,
             ['o-divider--' + level]:            true,
             ['o-divider--' + attributes.color]: !!attributes.color
         }
diff --git a/tpl/objects/navbar.pug b/tpl/objects/navbar.pug
new file mode 100644
index 0000000..5c7642c
--- /dev/null
+++ b/tpl/objects/navbar.pug
@@ -0,0 +1,37 @@
+include icon.pug
+include status-indicator.pug
+include action-button.pug
+
+mixin navbar
+    -
+        let classes = {
+            'o-navbar': true,
+            'o-navbar--quiet': attributes.quiet,
+        }
+        if (attributes.class) {
+            classes[attributes.class] = true;
+        }
+
+    div(class=classes)&attributes(attributes)
+        block
+
+mixin navbar-item
+    -
+        let classes = {
+            'o-navbar__item': true,
+            'is-selected':    attributes.selected,
+        }
+        if (attributes.class) {
+            classes[attributes.class] = true;
+        }
+
+    #{!!attributes.tag ? attributes.tag : 'button'}(class=classes)&attributes(attributes)
+        .o-navbar__item-content
+            if attributes.icon
+                +icon(attributes.icon)
+                = ' '
+            span.o-navbar__item-content-text
+                block
+            if attributes.postIcon
+                = ' '
+                +icon(attributes.postIcon)