new card elements

pages/_includes/cards/card-group.html

@@ -0,0 +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"%}
+</div>

pages/_includes/cards/card-image.html

@@ -0,0 +1,16 @@
+<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' }}">
+      </div>
+      <div class="col">
+         <div class="card-body">
+            {% if include.title %}
+            <h3 class="card-title">{{ include.title }}</h3>
+            {% endif %}
+            <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>
+         </div>
+      </div>
+   </div>
+</div>

pages/_includes/cards/card.html

@@ -1,15 +1,15 @@
-<div class="card{% if include.active %} border-primary{% endif %}">
+<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 %}
 
-   {% if include.status-position %}
+   {% if include.status-top %}
-   <div class="card-status-{{include.status-position}} bg-{{ include.status-color | default: 'blue' }}"></div>
+   <div class="card-status-top bg-{{ include.status-top | default: 'blue' }}"></div>
    {% endif %}
 
-   {% if include.header-title %}
+   {% if include.header or include.header-title %}
    <div class="card-header">
-      <h3 class="card-title">{{ include.header-title }}</h3>
+      <h3 class="card-title">{{ include.header-title | default: 'Header title' }}</h3>
    </div>
    {% endif %}
 
@@ -40,18 +40,46 @@
       {% endif %}
    </div>
 
-   {% if include.footer or include.footer-button or include.footer-buttons %}
+   {% if include.footer or include.footer-button or include.footer-buttons or include.footer-elements %}
    <!-- Card footer -->
    <div class="card-footer">
-      {% if include.footer-button %}
+      {% 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
+
       {% endif %}
    </div>
    {% endif %}

pages/_includes/ui/form/check.html

@@ -12,7 +12,7 @@
    {% assign title = title | append: ' ' | append: type %}
    {% assign title = title | append: ' input' | lstrip | capitalize %}
 {% endunless %}
-<label class="form-check{% if include.inline %} form-check-inline{% endif %}{% if switch %} form-switch{% endif %}">
+<label class="form-check{% if include.inline %} form-check-inline{% endif %}{% if switch %} form-switch{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
    <input class="form-check-input{% if is_empty %} position-static{% endif %}" type="{{ type }}"{% if checked %} checked{% endif %}{% if disabled %} disabled{% endif %}>
    {% unless is_empty %}<span class="form-check-label">{{ title }}</span>{% endunless %}
 </label>

pages/cards.html

@@ -1,21 +1,37 @@
 ---
+title: Cards
 page-title: Cards
 ---
 
 <div class="row">
    <div class="col-md-6 col-xl-4">
       {% include_cached cards/card.html body="This is some text within a card body." %}
-      {% include_cached cards/card.html active=true body="This is a card with active state."%}
       {% 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"  %}
    </div>
-   <div class="col-md-6 col-xl-4">
+   <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-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 status-top="danger" title="Card with top status" %}
+            {% include_cached cards/card.html status-bottom="success" title="Card with bottom status" %}
          </div>
-   <div class="col-md-6 col-xl-4">
+         <div class="col-xl-6">
             {% include_cached cards/card.html title="Card title" subtitle="Card subtitle" %}
+            {% include_cached cards/card.html header=true  %}
             {% include_cached cards/card.html title="Card with footer" footer=true %}
             {% include_cached cards/card.html title="Card with footer button" footer-button=true %}
             {% include_cached cards/card.html title="Card with footer buttons" footer-buttons=true %}
          </div>
       </div>
+   </div>
+
+</div>

scss/_variables.scss

@@ -217,6 +217,8 @@ $card-border-radius: $border-radius !default;
 $card-cap-bg: $body-bg !default;
 
 $card-active-border-color: $blue !default;
+$card-status-size: 2px !default;
+$card-group-margin: 1.5rem !default;
 
 //close
 $close-font-weight: 400 !default;

scss/tabler.scss

@@ -12,7 +12,6 @@
 @import "fonts/webfonts";
 
 @import "layout/core";
-@import "layout/grid";
 @import "layout/navbar";
 @import "layout/page";
 
@@ -25,6 +24,7 @@
 @import "ui/cards";
 @import "ui/dropdowns";
 @import "ui/empty";
+@import "ui/grid";
 @import "ui/highlight";
 @import "ui/icons";
 @import "ui/inputs";

scss/ui/_cards.scss

@@ -1,8 +1,18 @@
 .card {
-  margin-bottom: 1.5rem;
+  margin-bottom: $card-group-margin;
   box-shadow: rgba(0, 0, 0, 0.04) 0 2px 4px 0;
 }
 
+.card-group {
+  margin-bottom: $card-group-margin;
+}
+
+.card-inactive {
+  box-shadow: none;
+  opacity: .8;
+  pointer-events: none;
+}
+
 .card-link {
   color: inherit;
 
@@ -136,7 +146,7 @@ Card status
  */
 .card-status-top {
   position: absolute;
-  height: 3px;
+  height: $card-status-size;
   border-radius: $card-border-radius $card-border-radius 0 0;
   top: 0;
   right: 0;
@@ -148,7 +158,7 @@ Card status
   right: auto;
   bottom: 0;
   height: 100%;
-  width: 3px;
+  width: 2px;
   border-radius: $card-border-radius 0 0 $card-border-radius;
 }
 
@@ -157,7 +167,7 @@ Card status
   bottom: 0;
   width: 100%;
   top: initial;
-  height: 3px;
+  height: 2px;
   border-radius: 0 0 $card-border-radius $card-border-radius;
 }
 

scss/ui/_grid.scss

@@ -2,6 +2,10 @@
   @include make-container-breakpoints();
 }
 
+.col-separator {
+  border-left: 1px solid $border-color;
+}
+
 .row-deck {
   > .col,
   > [class*='col-'] {

scss/ui/forms/_input.custom.scss

@@ -45,3 +45,8 @@ Bootstrap color input
     border: none;
   }
 }
+
+.form-check-input {
+  background: $white;
+  transition: .3s background-position, .3s background-color;
+}