diff --git a/css/styles.css b/css/styles.css
index f0bf6c2e86a9be9424093963267526014f83ef1c..ee81eda5ff9748da7ce903944368210fcc21b805 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -3921,6 +3921,13 @@ button {
       padding-left: 0;
       padding-right: 0; } }
 
+.uw-date {
+  width: 100%; }
+
+.uw-date-details .uw-date {
+  margin-bottom: 0.25rem;
+  margin-top: 0.25rem; }
+
 /* stylelint-disable-next-line selector-no-qualifying-type */
 details.details {
   margin: 0 0 1.5rem;
diff --git a/source/_patterns/04-components/card/card.twig b/source/_patterns/04-components/card/card.twig
index 107f8396c7a57aba3115d124ea462819f5381797..92754eaa1bbe3b998051674712302680f9856787 100644
--- a/source/_patterns/04-components/card/card.twig
+++ b/source/_patterns/04-components/card/card.twig
@@ -6,19 +6,10 @@
       <div class="card__header">
         {% if date %}
           <div class="card__date">
-            {% if date is iterable %}
-              {% for d in date %}
-                {% include "@base/date-formats/_date-format.twig" with {
-                  'date_format': date_format,
-                  'date': d
-                }%}
-              {% endfor %}
-            {% else %}
-              {% include "@base/date-formats/_date-format.twig" with {
-                'date_format': date_format,
-                'date': date
-              }%}
-            {% endif %}
+            {% include '@components/date/date.twig' with {
+              'date_format': date_format,
+              'date': date,
+            } %}
           </div>
         {% endif %}
         {% if title or sub_title %}
diff --git a/source/_patterns/04-components/date/_date.scss b/source/_patterns/04-components/date/_date.scss
new file mode 100644
index 0000000000000000000000000000000000000000..579995524f75476b8243e839db973be9904ba01d
--- /dev/null
+++ b/source/_patterns/04-components/date/_date.scss
@@ -0,0 +1,10 @@
+.uw-date {
+  width: 100%
+}
+
+.uw-date-details {
+  .uw-date {
+    margin-bottom: 0.25rem;
+    margin-top: 0.25rem;
+  }
+}
\ No newline at end of file
diff --git a/source/_patterns/04-components/date/date.twig b/source/_patterns/04-components/date/date.twig
new file mode 100644
index 0000000000000000000000000000000000000000..52a5ce2d8a8d4aaa1788495c5188816f1be12cb7
--- /dev/null
+++ b/source/_patterns/04-components/date/date.twig
@@ -0,0 +1,33 @@
+{% if date is iterable %}
+  {% if date|length == 1 %}
+    {% include "@base/date-formats/_date-format.twig" with {
+      'date_format': date_format,
+      'date': date.0
+    } %}
+  {% else %}
+    {% for d in date %}
+        {% if loop.index0 == 0 %}
+          <details class="uw-date-details">
+            <summary role="button" aria-controls="edit-future-dates-collapsible" aria-expanded="false" aria-pressed="false" class="uw-date-details__summary">
+              {% include "@base/date-formats/_date-format.twig" with {
+                'date_format': date_format,
+                'date': d
+              }%}
+            </summary>
+      {% else %}
+        {% include "@base/date-formats/_date-format.twig" with {
+          'date_format': date_format,
+          'date': d
+        }%}
+      {% endif %}
+      {% if loop.last %}
+        </details>
+      {% endif %}
+    {% endfor %}
+  {% endif %}
+{% else %}
+  {% include "@base/date-formats/_date-format.twig" with {
+    'date_format': date_format,
+    'date': date
+  } %}
+{% endif %}