Card layout for showcases

1 files changed, 38 insertions, 12 deletions

diff --git a/showcase/templates/showcase/show_case.html b/showcase/templates/showcase/show_case.html
index b6a4afa..6a2f13b 100644
--- a/showcase/templates/showcase/show_case.html
+++ b/showcase/templates/showcase/show_case.html
@@ -4,17 +4,43 @@
 {% block body_class %}template-showcase{% endblock %}
 
 {% block content %}
-{% image page.image width-500 %}
-{{ page.body|richtext }}
-{% if page.data %}<ul>
-{% for item in page.data %}
-    <li>
-        <a href="{% url 'display-item' page.slug forloop.counter0 %}">
-            {{item.denomination}}
-            <img src="{{item.images.0.thumbnail}}">
-        </a>
-    </li>
-{% endfor %}
-</ul>{% endif %}
+
+<div class="row justify-content-md-center">
+<div class="card" style="max-width: 1024px;">
+  <div class="row no-gutters">
+    <div class="col-md-6">
+      {% image page.image original as head_image %}
+      <img src="{{ head_image.url }}" alt="{{ head_image.alt }}" class="card-img" />
+    </div>
+    <div class="col-md-6">
+      <div class="card-body">
+        <h5 class="card-title">{{page.title}}</h5>
+        {{ page.body|richtext }}
+      </div>
+    </div>
+  </div>
+</div>
+</div>
+
+<hr>
+
+{% if page.data %}
+<div class="row justify-content-md-center">
+    {% for item in page.data %}
+    <div class="col-md-auto m-1" style="width: 12rem;">
+    <div class="card">
+    {% if item.images.0.thumbnail %}
+        <img src="{{item.images.0.thumbnail}}" class="card-img-top">
+    {% endif %}
+    <div class="card-body">
+      <a href="{% url 'display-item' page.slug forloop.counter0 %}">
+        {{item.denomination}}
+      </a>
+    </div>
+    </div>
+    </div>
+    {% endfor %}
+</div>
+{% endif %}
 
 {% endblock %}