diff --git a/_includes/cards/event_card.html b/_includes/cards/event_card.html
new file mode 100644
index 0000000000000000000000000000000000000000..741d2d7938c77271d9e28d53aae83ce87f37bafd
--- /dev/null
+++ b/_includes/cards/event_card.html
@@ -0,0 +1,26 @@
+{%- 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>
diff --git a/_includes/frontpage/image-card.html b/_includes/frontpage/image-card.html
index 1895c8dead6c7b3ba26b7d645f846a7c4d5ef27c..2a9a1d02e5f5f84b55225f5e1c81151c3ebaa5f3 100644
--- a/_includes/frontpage/image-card.html
+++ b/_includes/frontpage/image-card.html
@@ -1,4 +1,3 @@
-
 {% if include.image_path %}
 {% assign image_path = site.directory.images | append: include.image_path %}
 {% assign url = include.url %}
diff --git a/_layouts/frontpage.html b/_layouts/frontpage.html
index eef4964f3bbf91a3402c84e5e4b67872de0182ab..81af7c5ffb2bf75e55e0e3e4aad8ae02d6492a2e 100644
--- a/_layouts/frontpage.html
+++ b/_layouts/frontpage.html
@@ -16,7 +16,7 @@
             <div class="info-col">
                 <div class="frontpage-jumbotron">
                         <h1><a href="{{ 'events' | relative_url }}"><i class="far fa-calendar-alt" aria-hidden="true"></i>&nbsp; Events</a></h1>
-                        <div class="flex-content-wrapper">
+                        <div class="flex-cards">
                             {% assign sorted_events = site.events | sort: "start.date" %}
                             {% assign today = "now" | date: "%Y-%m-%d" %}
                             {% assign has_upcoming_events = false %}
@@ -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  %}
diff --git a/_sass/common/_cards.scss b/_sass/common/_cards.scss
index 56f78500e7fa2fb319afc2c8894fa6ee32f26c38..e4b35e88ad83e8188cbd70b0fb56a3abb5e39d3e 100644
--- a/_sass/common/_cards.scss
+++ b/_sass/common/_cards.scss
@@ -12,8 +12,10 @@
 .card {
     @include drop-shadow;
 
-    width: 15rem;
+    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 {