diff --git a/pages/_data/menu.yml b/pages/_data/menu.yml
index 914728e6c..39777aeec 100644
--- a/pages/_data/menu.yml
+++ b/pages/_data/menu.yml
@@ -3,6 +3,11 @@ form-elements:
   title: Form elements
   icon: check-square
 
+cards:
+  url: cards.html
+  title: Cards
+  icon: file
+
 charts:
   url: charts.html
   title: Charts
diff --git a/pages/_docs/avatars.md b/pages/_docs/avatars.md
index cacf26e3a..d974fd63c 100644
--- a/pages/_docs/avatars.md
+++ b/pages/_docs/avatars.md
@@ -85,11 +85,7 @@ Change the shape of an avatar with the default Bootstrap image classes.
 ### Avatars list
 
 {% example %}
-<div class="avatar-list">
-{% for person in site.data.people limit: 5 offset: 20 %}
-  {% include ui/avatar.html person=person %}
-{% endfor %}
-</div>
+{% include ui/avatar-list.html %}
 {% endexample %}
 
 {% example %}
diff --git a/pages/_includes/cards/card-group.html b/pages/_includes/cards/card-group.html
index 1ad0c8c5f..881b8cd43 100644
--- a/pages/_includes/cards/card-group.html
+++ b/pages/_includes/cards/card-group.html
@@ -1,5 +1,5 @@
 <div class="card-group">
-   {% include_cached cards/card.html body="This is first card"%}
-   {% include_cached cards/card.html body="This is second card"%}
-   {% include_cached cards/card.html body="This is third card"%}
+   {% include_cached cards/card.html link=true class="text-center" body="This is first card" inactive=true %}
+   {% include_cached cards/card.html link=true class="text-center" body="This is second card" active=true %}
+   {% include_cached cards/card.html link=true class="text-center" body="This is third card" %}
 </div>
diff --git a/pages/_includes/cards/card-image.html b/pages/_includes/cards/card-image.html
index 7d12adb2d..9475f38ea 100644
--- a/pages/_includes/cards/card-image.html
+++ b/pages/_includes/cards/card-image.html
@@ -1,7 +1,7 @@
 <div class="card">
    <div class="row row-0">
       <div class="col-md-3{% if include.right %} order-md-last{% endif %}">
-         <img src="//placehold.it/258x258" class="w-100" alt="{{ include.img-alt | default: 'Card side image' }}">
+         <img src="{{ site.base }}/img/photos/{{ include.img | default: 'ff23569f1a45865d.jpg' }}" class="w-100" alt="{{ include.img-alt | default: 'Card side image' }}">
       </div>
       <div class="col">
          <div class="card-body">
diff --git a/pages/_includes/cards/card.html b/pages/_includes/cards/card.html
index 24b9b2e30..9053fc4df 100644
--- a/pages/_includes/cards/card.html
+++ b/pages/_includes/cards/card.html
@@ -1,95 +1,116 @@
-<div class="card{% if include.active %} border-primary{% endif %}{% if include.inactive %} card-inactive{% endif %}">
-   {% if include.img-top %}
-   <img src="//placehold.it/374x210" class="card-img-top" alt="{{ include.img-top-alt | default: 'Card top image' }}">
-   {% endif %}
+{% removeemptylines %}
+{% assign link = include.link | default: false %}
+<{% if link %}a href="#"{% else %}div{% endif %} class="card{% if include.active %} card-active{% endif %}{% if include.inactive %} card-inactive{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
 
-   {% if include.status-top %}
-   <div class="card-status-top bg-{{ include.status-top | default: 'blue' }}"></div>
-   {% endif %}
+   {% if include['empty'] %}
+      {% include ui/empty.html illustration=true %}
 
-   {% if include.header or include.header-title %}
-   <div class="card-header">
-      <h3 class="card-title">{{ include.header-title | default: 'Header title' }}</h3>
-   </div>
-   {% endif %}
+   {% else %}
 
-   {% if include.alert %}
-   <div class="card-alert alert alert-{{ include.alert-type | default: 'success' }} mb-0">
-      {{ include.alert }}
-   </div>
-   {% endif %}
-   <div class="card-body">
-      {% if include.title %}
-      <h3 class="card-title">{{ include.title }}</h3>
-      {% endif %}
-      {% if include.subtitle %}
-      <div class="card-subtitle">Card subtitle</div>
+      {% if include.img-top %}
+      <img src="{{ site.base }}/img/photos/9f36332564ca271d.jpg" class="card-img-top" alt="{{ include.img-top-alt | default: 'Card top image' }}">
       {% endif %}
 
-      {% if include.body %}
-      <p>{{ include.body }}</p>
-      {% else %}
-      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
-         neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
+      {% if include.status-top %}
+         <div class="card-status-top bg-{{ include.status-top | default: 'blue' }}"></div>
+      {% elsif include.status-bottom %}
+         <div class="card-status-bottom bg-{{ include.status-bottom | default: 'blue' }}"></div>
+      {% elsif include.status-left %}
+         <div class="card-status-left bg-{{ include.status-left | default: 'blue' }}"></div>
       {% endif %}
 
-      {% if include.link %}
-      <div class="card-text">
+      {% if include.header or include.header-title or include.header-tabs or include.header-pills %}
+      <div class="card-header">
+         {% if include.header-tabs or include.header-pills %}
+            {% include_cached ui/nav.html header=true pills=include.header-pills tabs=include.header-tabs %}
+
+         {% else %}
+            <h3 class="card-title">{{ include.header-title | default: 'Header title' }}</h3>
+         {% endif %}
+      </div>
+      {% endif %}
+
+      {% if include.alert %}
+      <div class="card-alert alert alert-{{ include.alert-type | default: 'success' }} mb-0">
+         {{ include.alert }}
+      </div>
+      {% endif %}
+      <div class="card-body">
+         {% if include.title %}
+         <h3 class="card-title">{{ include.title }}</h3>
+         {% endif %}
+         {% if include.subtitle %}
+         <div class="card-subtitle">Card subtitle</div>
+         {% endif %}
+
+         {% if include.body %}
+         <p>{{ include.body }}</p>
+         {% else %}
+         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+            neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
+         {% endif %}
+
+         {% if include.button %}
+         <div class="card-text">
+            <a href="#" class="btn btn-primary">Go somewhere</a>
+         </div>
+         {% endif %}
+      </div>
+
+      {% if include.footer or include.footer-button or include.footer-buttons or include.footer-elements %}
+      <!-- Card footer -->
+      <div class="card-footer">
+         {% if include.footer-elements %}
+         <div class="row align-items-center">
+            {% assign elements = include.footer-elements | split: "," %}
+
+            {% for element in elements %}
+               {% assign el = element %}
+               {% assign first_letter = el | slice: 0 %}
+               {% if first_letter == ">" %}
+                  {% assign right = true %}
+                  {% assign el = element | slice: 1, element.size %}
+               {% endif %}
+
+               <div class="col-auto{% if right %} ml-auto{% endif %}">
+                  {% case el %}
+                     {% when "switch" %}
+                        {% include ui/form/check.html switch=true empty=true checked=true class="m-0" %}
+                     {% when "check" %}
+                        {% include ui/form/check.html empty=true checked=true class="m-0" %}
+                     {% when "avatars" %}
+                        {% include ui/avatar-list.html stacked=true size="sm" text="+3" %}
+                     {% when "more" %}
+                        <a href="#">More information</a>
+                  {% endcase %}
+               </div>
+            {% endfor %}
+         </div>
+
+         {% elsif include.footer-button %}
          <a href="#" class="btn btn-primary">Go somewhere</a>
+
+         {% elsif include.footer-buttons %}
+         <div class="d-flex">
+            <a href="#" class="btn btn-link">Cancel</a>
+            <a href="#" class="btn btn-primary ml-auto">Go somewhere</a>
+         </div>
+
+         {% else %}
+         This is standard card footer
+
+         {% endif %}
       </div>
       {% endif %}
-   </div>
-
-   {% if include.footer or include.footer-button or include.footer-buttons or include.footer-elements %}
-   <!-- Card footer -->
-   <div class="card-footer">
-      {% if include.footer-elements %}
-      <div class="row align-items-center">
-         {% assign elements = include.footer-elements | split: "," %}
-
-         {% for element in elements %}
-            {% assign el = element %}
-            {% assign first_letter = el | slice: 0 %}
-            {% if first_letter == ">" %}
-               {% assign right = true %}
-               {% assign el = element | slice: 1, element.size %}
-            {% endif %}
-
-            <div class="col-auto{% if right %} ml-auto{% endif %}">
-               {% case el %}
-                  {% when "switch" %}
-                     {% include ui/form/check.html switch=true empty=true checked=true class="m-0" %}
-                  {% when "check" %}
-                     {% include ui/form/check.html empty=true checked=true class="m-0" %}
-                  {% when "more" %}
-                     <a href="#">More information</a>
-               {% endcase %}
-            </div>
-         {% endfor %}
-      </div>
-
-      {% elsif include.footer-button %}
-      <a href="#" class="btn btn-primary">Go somewhere</a>
-
-      {% elsif include.footer-buttons %}
-      <div class="d-flex">
-         <a href="#" class="btn btn-link">Cancel</a>
-         <a href="#" class="btn btn-primary ml-auto">Go somewhere</a>
-      </div>
-
-      {% else %}
-      This is standard card footer
 
+      {% if include.img-bottom %}
+      <img src="{{ site.base }}/img/photos/56614e12b2a7bd68.jpg" class="card-img-bottom"
+           alt="{{ include.img-bottom-alt | default: 'Card bottom image' }}">
       {% endif %}
-   </div>
-   {% endif %}
 
-   {% if include.status-bottom %}
-   <div class="card-status card-status-bottom bg-{{ include.status-bottom }}"></div>
+      {% if include.progress %}
+         {% include ui/progress.html class="progress-sm card-progress" %}
+      {% endif %}
    {% endif %}
-
-   {% if include.img-bottom %}
-   <img src="//placehold.it/374x210" class="card-img-bottom"
-        alt="{{ include.img-bottom-alt | default: 'Card bottom image' }}">
-   {% endif %}
-</div>
+</{% if link %}a{% else %}div{% endif %}>
+{% endremoveemptylines %}
diff --git a/pages/_includes/ui/avatar-list.html b/pages/_includes/ui/avatar-list.html
index 0c530fd38..190c8a74c 100644
--- a/pages/_includes/ui/avatar-list.html
+++ b/pages/_includes/ui/avatar-list.html
@@ -6,6 +6,6 @@
         {% include ui/avatar.html person=person size=size %}
     {% endfor %}
     {% if include.text %}
-        <a href="javascript:void(0)" class="avatar">{{ include.text }}</a>
+      {% include ui/avatar.html placeholder=include.text size=size %}
     {% endif %}
 </div>
diff --git a/pages/_includes/ui/avatar.html b/pages/_includes/ui/avatar.html
index 28259f8db..ea18bce21 100644
--- a/pages/_includes/ui/avatar.html
+++ b/pages/_includes/ui/avatar.html
@@ -14,8 +14,10 @@
 		{% assign placeholder = person.full_name | first_letters %}
 	{% endunless %}
 {% endif %}
-{% assign element = include.element | default: 'span' %}
-<{{ element }} class="avatar{% if include['size'] %} avatar-{{ include['size'] }}{% endif %}{% if include.thumb %} avatar-thumb{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.shape %} {{ include.shape }}{% endif %}{% if include.color %} bg-{{ include.color }}-lt{% endif %}"{% if src %} style="background-image: url({{ site.base }}{{ src }})"{% endif %}>{% if include.status %}
+{% assign link = include.link | default: false %}
+{% assign el = 'span' %}
+{% if link %}{% assign el = 'a' %}{% endif %}
+<{{ el }} class="avatar{% if include['size'] %} avatar-{{ include['size'] }}{% endif %}{% if include.thumb %} avatar-thumb{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.shape %} {{ include.shape }}{% endif %}{% if include.color %} bg-{{ include.color }}-lt{% endif %}"{% if src %} style="background-image: url({{ site.base }}{{ src }})"{% endif %}>{% if include.status %}
   <span class="badge bg-{{ include.status }}">{% if include.status-text %}{{ include.status-text }}{% elsif include.status-icon %}{% include ui/icon.html icon=include.status-icon class="avatar-status-icon" %}{% endif %}</span>
-{% endif %}{% if placeholder %}{{ placeholder }}{% elsif include.icon %}   {% include ui/icon.html icon=include.icon class="avatar-icon" %}{% endif %}</{{ element }}>
+{% endif %}{% if placeholder %}{{ placeholder }}{% elsif include.icon %}   {% include ui/icon.html icon=include.icon class="avatar-icon" %}{% endif %}</{{ el }}>
 {% endremoveemptylines %}
diff --git a/pages/_includes/ui/empty.html b/pages/_includes/ui/empty.html
index 229b46da5..066b901bb 100644
--- a/pages/_includes/ui/empty.html
+++ b/pages/_includes/ui/empty.html
@@ -8,11 +8,9 @@
       {% else %}
       {% include ui/icon.html icon=icon %}
       {% endif %}
-
-
    </div>
 
-   <p class="empty-title h3">{{ include.title | default: "No results found" }}</p>
+   <p class="empty-title h4">{{ include.title | default: "No results found" }}</p>
    <p class="empty-subtitle">
       {{ include.subtitle | default: "Try adjusting your search or filter to find what you're looking for." }}
    </p>
diff --git a/pages/_includes/ui/nav.html b/pages/_includes/ui/nav.html
new file mode 100644
index 000000000..aecafb50d
--- /dev/null
+++ b/pages/_includes/ui/nav.html
@@ -0,0 +1,23 @@
+<ul class="nav {% if include.pills %}nav-pills{% if include.header %} card-header-pills{% endif %}{% elsif include.tabs %}nav-tabs{% if include.header %} card-header-tabs{% endif %}{% endif %}">
+   <li class="nav-item">
+      <a class="nav-link active" href="#">
+         Active
+      </a>
+   </li>
+   <li class="nav-item">
+      <a class="nav-link" href="#">
+         {% include ui/icon.html icon="star" class="mr-1" %}
+         Link
+      </a>
+   </li>
+   <li class="nav-item">
+      <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">
+         Disabled
+      </a>
+   </li>
+   <li class="nav-item ml-auto">
+      <a class="nav-link" href="#">
+         {% include ui/icon.html icon="settings" %}
+      </a>
+   </li>
+</ul>
diff --git a/pages/_includes/ui/progress.html b/pages/_includes/ui/progress.html
index 9305e4a36..e9ed2d958 100644
--- a/pages/_includes/ui/progress.html
+++ b/pages/_includes/ui/progress.html
@@ -1,5 +1,5 @@
 {% assign percentage = include.percentage | default: 38 %}
-<div class="progress{% if include['size'] %} progress-{{ include['size'] }}{% endif %}{% if include.class %}{{ include.class }}{% endif %}">
+<div class="progress{% if include['size'] %} progress-{{ include['size'] }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
    {% if include.indeterminate %}
    <div class="progress-bar progress-bar-indeterminate"></div>
    {% else %}
diff --git a/pages/buttons.html b/pages/buttons.html
index 07c3a1fb8..072972442 100644
--- a/pages/buttons.html
+++ b/pages/buttons.html
@@ -12,7 +12,7 @@ done: true
     {% include ui/button.html text="Button" color="teal" %}
     {% include ui/button.html text="Button" color="yellow" %}
     {% include ui/button.html text="Button" color="dark" %}
-    {% include ui/button.html text="Button" color="red" element="a" %}
+    {% include ui/button.html text="Button" color="red" link=true %}
     {% include ui/button.html text="Button" color="red" disabled=true %}
     {% include ui/button.html text="Button" link=true %}
     {% include ui/button.html text="Button" link=true class="text-danger" %}
diff --git a/pages/cards.html b/pages/cards.html
index b80d29162..ded6dbce1 100644
--- a/pages/cards.html
+++ b/pages/cards.html
@@ -9,20 +9,26 @@ page-title: Cards
       {% include_cached cards/card.html img-bottom=true title="Card with bottom image" %}
       {% include_cached cards/card.html active=true body="This is a card with active state." %}
       {% include_cached cards/card.html inactive=true body="This is some text inactive state." %}
-
       {% include_cached cards/card.html footer-elements="more,>switch"  %}
+      {% include_cached cards/card.html footer-elements=">avatars"  %}
+      {% include_cached cards/card.html header-tabs=true %}
+      {% include_cached cards/card.html header-pills=true %}
+      {% include_cached cards/card.html progress=true title="Card with progress bar" %}
+      {% include_cached cards/card.html empty=true %}
    </div>
    <div class="col-md-6 col-xl-8">
       {% include_cached cards/card-image.html title="Card with left side image" %}
-      {% include_cached cards/card-image.html title="Card with right side image" right=true %}
+      {% include_cached cards/card-image.html title="Card with right side image" right=true img="de6d0fd1feebb6a2.jpg" %}
       {% include_cached cards/card-group.html %}
 
       <div class="row">
          <div class="col-xl-6">
             {% include_cached cards/card.html img-top=true title="Card with top image" %}
-            {% include_cached cards/card.html link=true title="Card with button link" %}
+            {% include_cached cards/card.html button=true title="Card with button link" %}
             {% include_cached cards/card.html status-top="danger" title="Card with top status" %}
             {% include_cached cards/card.html status-bottom="success" title="Card with bottom status" %}
+            {% include_cached cards/card.html status-left="primary" title="Card with side status" %}
+            {% include_cached cards/card.html class="card-stacked" title="Stacked card" %}
          </div>
          <div class="col-xl-6">
             {% include_cached cards/card.html title="Card title" subtitle="Card subtitle" %}
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 6e8531fc5..029f8ad97 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -220,6 +220,9 @@ $card-active-border-color: $blue !default;
 $card-status-size: 2px !default;
 $card-group-margin: 1.5rem !default;
 
+$card-shadow: rgba($dark, .04) 0 2px 4px 0;
+$card-shadow-hover: rgba($dark, .08) 0 2px 12px 0;
+
 //close
 $close-font-weight: 400 !default;
 $close-font-size: 1.5rem !default;
@@ -239,6 +242,9 @@ $breadcrumb-variants: (
   bullets: '\02022',
 ) !default;
 
+//nav
+$nav-link-padding-y: .25rem !default;
+
 //pagination
 $pagination-border-width: 0 !default;
 $pagination-padding-y: .25rem !default;
diff --git a/scss/ui/_avatars.scss b/scss/ui/_avatars.scss
index 7946c6bf5..30577a67b 100644
--- a/scss/ui/_avatars.scss
+++ b/scss/ui/_avatars.scss
@@ -11,7 +11,7 @@
   text-transform: uppercase;
   vertical-align: bottom;
   user-select: none;
-  background: $body-bg no-repeat center/cover;
+  background: $gray-200 no-repeat center/cover;
   border-radius: 50%;
 
   .icon {
@@ -56,7 +56,6 @@
   }
 
   a.avatar {
-
     &:hover {
       z-index: 1;
     }
@@ -67,5 +66,9 @@
   .avatar {
     margin-right: -.5em !important;
     box-shadow: 0 0 0 2px #fff;
+
+    @at-root .card-footer & {
+      box-shadow: 0 0 0 2px $card-cap-bg;
+    }
   }
 }
diff --git a/scss/ui/_cards.scss b/scss/ui/_cards.scss
index ae6dc9f08..9e858108b 100644
--- a/scss/ui/_cards.scss
+++ b/scss/ui/_cards.scss
@@ -1,6 +1,16 @@
 .card {
   margin-bottom: $card-group-margin;
-  box-shadow: rgba(0, 0, 0, 0.04) 0 2px 4px 0;
+  box-shadow: $card-shadow;
+
+  @at-root a#{&} {
+    color: inherit;
+    transition: .3s box-shadow;
+
+    &:hover {
+      text-decoration: none;
+      box-shadow: $card-shadow-hover;
+    }
+  }
 }
 
 .card-group {
@@ -9,8 +19,27 @@
 
 .card-inactive {
   box-shadow: none;
-  opacity: .8;
   pointer-events: none;
+
+  .card-body {
+    opacity: .64;
+  }
+}
+
+.card-active {
+  position: relative;
+  background-color: rgba($primary, .03);
+
+  &:before {
+    content: '';
+    position: absolute;
+    top: -1px;
+    left: -1px;
+    right: -1px;
+    bottom: -1px;
+    border: 1px solid $primary;
+    border-radius: inherit;
+  }
 }
 
 .card-link {
@@ -35,6 +64,23 @@
   }
 }
 
+.card-stacked {
+  position: relative;
+
+  &:after {
+    content: '';
+    position: absolute;
+    top: -5px;
+    left: 5px;
+    right: 5px;
+    border: 1px solid $card-border-color;
+    border-radius: $card-border-radius $card-border-radius 0 0;
+    background: $card-bg;
+    z-index: -1;
+    height: 5px
+  }
+}
+
 .card-cover {
   position: relative;
   padding: $card-spacer-y $card-spacer-x;
@@ -65,20 +111,23 @@
 .card-header {
   display: flex;
   align-items: center;
-  min-height: 3.5rem;
   background: transparent;
 }
 
 .card-header-tabs {
+  flex: 1;
   margin: (- $card-spacer-y) (- $card-spacer-x);
 }
 
+.card-header-pills {
+  flex: 1;
+}
+
 .card-footer {
   color: $text-muted;
 }
 
 .card-progress {
-  height: 4px;
 
   &:last-child {
     border-radius: 0 0 2px 2px;
@@ -103,7 +152,7 @@
   }
 
   .card-header & {
-    margin: 0;
+    margin: -.125rem 0;
   }
 }
 
@@ -158,7 +207,7 @@ Card status
   right: auto;
   bottom: 0;
   height: 100%;
-  width: 2px;
+  width: $card-status-size;
   border-radius: $card-border-radius 0 0 $card-border-radius;
 }
 
@@ -167,7 +216,7 @@ Card status
   bottom: 0;
   width: 100%;
   top: initial;
-  height: 2px;
+  height: $card-status-size;
   border-radius: 0 0 $card-border-radius $card-border-radius;
 }
 
@@ -231,21 +280,6 @@ Card chart
   z-index: 1;
   height: 3.5rem;
 }
-/*
-Card Aside
-*/
-.card-aside {
-  flex-direction: row;
-}
-
-.card-aside-column {
-  min-width: 5rem;
-  width: 30%;
-  flex: 0 0 30%;
-  border-top-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-  background: no-repeat center/cover;
-}
 
 /*
 Card profile
diff --git a/scss/ui/_empty.scss b/scss/ui/_empty.scss
index 7b16bca5c..b97150300 100644
--- a/scss/ui/_empty.scss
+++ b/scss/ui/_empty.scss
@@ -1,7 +1,7 @@
 .empty {
   text-align: center;
   color: $text-muted;
-  padding: 2rem 1rem;
+  padding: 2rem 3rem;
   height: 100%;
 
   display: flex;
@@ -18,7 +18,7 @@
 
   .empty-title,
   .empty-subtitle {
-    margin: 0 0 .25rem;
+    margin: 0 0 .5rem;
   }
 
   .empty-action {
diff --git a/scss/ui/_nav.scss b/scss/ui/_nav.scss
index 74b60024b..0e59cc531 100644
--- a/scss/ui/_nav.scss
+++ b/scss/ui/_nav.scss
@@ -1,11 +1,11 @@
+
 .nav-tabs {
   .icon {
     color: $text-muted;
   }
 
   .nav-link {
-    padding-right: $card-spacer-x;
-    padding-left: $card-spacer-x;
+    padding: $card-spacer-y $card-spacer-x;
     line-height: 20px;
     color: $text-muted;
     cursor: pointer;
@@ -24,6 +24,7 @@
     }
 
     &.active {
+      color: $body-color;
       background: inherit;
       border-color: transparent;
       border-bottom-color: $primary;