Create bootstrap-(h|v) cards & fontawesome bullets components

_includes/components/bullets/fontawesome.html

@@ -0,0 +1,4 @@
+<article class="col-sm-6 col-lg-4">
+  <span class="text-muted"><i class="text-primary fas fa-check-circle"></i> {% if i18n-resource-text %}{{ i18n-resource-text.name }}{% else %}{{ resource.name }}{% endif %}</span>
+  <div class="lead">{% if i18n-resource-text %}{{ i18n-resource-text.value }}{% else %}{{ resource.value }}{% endif %}</div>
+</article>

_includes/components/cards/bootstrap-h.html

@@ -0,0 +1,20 @@
+<div class="card m-2" style="max-width: 500px;">
+  <div class="row no-gutters">
+    <div class="col-md-4">
+      <a href="{{ card.href }}" class="card-link">
+        <img src="{{ site.amazon-s3 }}/assets/img/catalog/thumbnails/{{ card.img }}.png" class="card-img" alt="{{ card.title }}">
+      </a>
+    </div>
+    <div class="col-md-8">
+      <div class="card-body">
+        <a href="{{ card.href }}" class="card-link">
+          <h5 class="card-title">{{ card.title }}</h5>
+        </a>
+        <p class="card-text">{{ card.text }}</p>
+        <div class="card-body">
+          <a href="{{ card.href }}" class="card-link">{{ card.button }}</a>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

_includes/components/cards/bootstrap-v.html

@@ -0,0 +1,13 @@
+<div class="card m-3" style="width: 18rem;">
+   <a href="{{ card.href }}" class="card-link">
+     <img src="{{ site.amazon-s3 }}/assets/img/catalog/thumbnails/{{ card.img }}.png" class="card-img-top" alt="{{ card.title }}">
+   </a>
+  <div class="card-body">
+    <a href="{{ card.href }}" class="card-link">
+      <h5 class="card-title">{{ card.title }}</h5>
+    </a>
+  </div>
+  <div class="card-body">
+    <a href="{{ card.href }}" class="card-link">{{ card.button }}</a>
+  </div>
+</div>

_includes/components/product-cards/product-details.html

@@ -23,10 +23,7 @@ <h3>{{ site.data.i18n.components.product-cards[site.lang].product-details.featur
       <div class="row">
         {% for resource in page.resources.spec-sheets.specs %}
           {% assign i18n-resource-text = page.i18n[site.lang].resources.spec-sheets.specs.[forloop.index0] %}
-          <article class="col-sm-6 col-lg-4" style="padding:0px">
-            <span class="text-muted"><i class="text-primary fas fa-check-circle"></i> {% if i18n-resource-text %}{{ i18n-resource-text.name }}{% else %}{{ resource.name }}{% endif %}</span>
-            <div class="lead">{% if i18n-resource-text %}{{ i18n-resource-text.value }}{% else %}{{ resource.value }}{% endif %}</div>
-          </article>
+          {% include components/bullets/fontawesome.html %}
         {% endfor %}
       </div>
     </section>