bottom cards component

pages/_components/card-tabs-bottom.md

+---
+title: Card with bottom tabs 
+columns: 2
+---
+
+{% include cards/card-tabs.html count=4 bottom=true id="bottom" %}

pages/_includes/cards/card-tabs.html

-{% assign tabs = (1..3) %}
+{% assign tabs-count = include.count | default: 3 %}
+{% assign id = include.id | default: 'top' %}
+{% assign tabs = (1..tabs-count) %}
 
-<div class="card-tabs">
-   <ul class="nav nav-tabs">
-      {% for tab in tabs %}
-      <li class="nav-item"><a href="#tab-{{ tab }}" class="nav-link{% if forloop.first %} active{% endif %}" data-toggle="tab">Tab {{ tab }}</a></li>
-      {% endfor %}
-   </ul>
-   <div class="tab-content">
-      {% for tab in tabs %}
-      <div id="tab-{{ tab }}" class="card tab-pane{% if forloop.first %} active show{% endif %}">
-         <div class="card-body">
-            <div class="card-title">Content of tab #{{ tab }}</div>
-            <p>
-               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
-            </p>
-         </div>
+{% capture tabs-html %}
+<!-- Cards navigation -->
+<ul class="nav nav-tabs{% if include.bottom %} nav-tabs-bottom{% endif %}">
+   {% for tab in tabs %}
+   <li class="nav-item"><a href="#tab-{{ id }}-{{ tab }}" class="nav-link{% if forloop.first %} active{% endif %}" data-toggle="tab">Tab {{ tab }}</a></li>
+   {% endfor %}
+</ul>
+{% endcapture %}
+
+{% capture tabs-content-html %}
+<div class="tab-content">
+   {% for tab in tabs %}
+   <!-- Content of card #{{ tab }} -->
+   <div id="tab-{{ id }}-{{ tab }}" class="card tab-pane{% if forloop.first %} active show{% endif %}">
+      <div class="card-body">
+         <div class="card-title">Content of tab #{{ tab }}</div>
+         <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
+         </p>
       </div>
-      {% endfor %}
    </div>
+   {% endfor %}
+</div>
+{% endcapture %}
+
+<!-- Cards with tabs component -->
+<div class="card-tabs">
+   {% if include.bottom %}
+      {{ tabs-content-html }}
+      {{ tabs-html }}
+   {% else %}
+      {{ tabs-html }}
+      {{ tabs-content-html }}
+   {% endif %}
 </div>

pages/_layouts/component.html

@@ -9,7 +9,8 @@ page-title: Tabler components
 <div class="row">
    <div class="col-lg-3">
       <div class="list-group list-group-transparent mb-0">
-         {% for component in site.components %}
+         {% assign components = site.components | sort: title %}
+         {% for component in components %}
          <a href="{{ component.url }}" class="list-group-item list-group-item-action{% if component.url == page.url %} active{% endif %}">{{ component.title }}</a>
          {% endfor %}
       </div>

pages/cards.html

@@ -15,8 +15,8 @@ page-title: Cards
       {% 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 %}
-
-      {% include cards/card-tabs.html %}
+      {% include cards/card-tabs.html count=4 %}
+      {% include cards/card-tabs.html count=4 bottom=true id="bottom" %}
    </div>
    <div class="col-md-6 col-xl-8">
       {% include_cached cards/card-image.html title="Card with left side image" %}

scss/ui/_cards.scss

@@ -338,9 +338,10 @@ Card list group
 Card tabs
  */
 .card-tabs {
+  margin-bottom: $card-group-margin;
+
   .nav-tabs {
-    border-bottom-color: transparent;
-    margin-bottom: -1px;
+    border-bottom: 0;
     z-index: $zindex-dropdown;
     position: relative;
 
@@ -380,7 +381,25 @@ Card tabs
     }
   }
 
+  .nav-tabs-bottom {
+    margin-bottom: 0;
+
+    .nav-item {
+      margin-top: -1px;
+      margin-bottom: 0;
+
+      .nav-link {
+        border-bottom: $card-border-width solid $card-border-color;
+        border-top-width: 0;
+
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+      }
+    }
+  }
+
   .card {
     border-top-left-radius: 0;
+    margin: 0;
   }
 }