_includes/cards/event_card.html

+{%- comment -%}
+
+This is a card displaying event title and date.
+Parameters:
+event: The event which sould be displayed on the card
+
+{%- endcomment -%}
+<div class="card bg-light">
+    <div class="card-body card-overlay">
+        <div class="card-title">
+            <span class="badge badge-secondary">
+                <i class="fas fa-calendar-day" aria-hidden="true"></i>
+                {{ include.event.date | date: "%d.&thinsp;%b.&thinsp;%y" }}
+            </span>
+            <span class="badge badge-secondary">
+                <i class="fas fa-tag" aria-hidden="true"></i>
+                {{ include.event.type | capitalize }}
+            </span>
+        </div>
+        <div class="card-text">
+            <a href="{{ include.event.url | relative_url }}" class="stretched-link">
+                <h4>{{ include.event.title }}</h4>
+            </a>
+        </div>
+    </div>
+</div>

_includes/frontpage/event-card.html

@@ -44,8 +44,8 @@
         {% if event.excerpt %}
         {% assign card_text = event.excerpt | strip_html %}
         <p class="card-text">
-            {{ card_text | slice: 0, 40 }}
-            {% if card_text.size > 40 %} &mldr; {% endif %}
+            {{ card_text | slice: 0, 150 }}
+            {% if card_text.size > 150 %} &mldr; {% endif %}
         </p>
         {% endif %}
 

_includes/frontpage/image-card.html

-
 {% if include.image_path %}
 {% assign image_path = site.directory.images | append: include.image_path %}
 {% assign url = include.url %}

_layouts/frontpage.html

@@ -27,8 +27,7 @@
                             {%   else %}
                             {%      assign has_upcoming_events = true %}
                             {%   endif %}
-                            {%   include frontpage/event-card.html
-                                title = event.excerpt %}                         
+                            {%   include cards/event_card.html event = event %}                         
                             {%  assign events_counter = events_counter|plus:1 %}
                             {%  if events_counter >= 3   %}
                             {%     break  %}

_sass/common/_cards.scss

@@ -12,8 +12,10 @@
 .card {
     @include drop-shadow;
 
-    width: 13rem;
+    width: 12rem;
     margin: 0.5rem;
+    height: 9rem;
+    border: 0;
 
     .badge {
         @include drop-shadow(
@@ -22,6 +24,12 @@
             $color:     rgba(black, 0.25)
         );
     }
+
+    .card-overlay {
+        display:            flex;
+        flex-direction:     column;
+        justify-content:    flex-start;
+    }
 }
 
 .card-body {

assets/css/frontpage.scss

@@ -23,32 +23,6 @@
     }
 }
 
-.frontpage-card {
-    @include drop-shadow;
-
-    width:      13rem;
-    max-width:  13rem;
-    max-height: 9rem;
-
-    margin:     0.5rem;
-    border:     0;
-
-    color: black;
-
-    .card-body {
-        display:    flex;
-        flex-flow:  column nowrap;
-
-        .badge {
-            margin: 0.1rem;
-        }
-
-        a {
-            margin-top: auto;
-        }
-    }
-}
-
 .howto-col {
     display: grid;
     grid-template-columns: 1fr 1fr  1fr  1fr  1fr;