Date block show better ratio for vertical cards with dates

[msnassar]

When using the date block with the vertical card, the style for the date block looks broken. See screenshot

For ucpkn, in order to fix this, we have patch BCL with: https://github.com/digit-devs/echo-ucpkn-dev/blob/develop/resources/patches/oe_bootstrap_theme_show_better_ratio_for_vertical_cards_with_dates.patch

diff --git a/assets/bcl/bcl-card/bcl-card.html.twig b/assets/bcl/bcl-card/bcl-card.html.twig
index e2b394d..0c2cab0 100644
--- a/assets/bcl/bcl-card/bcl-card.html.twig
+++ b/assets/bcl/bcl-card/bcl-card.html.twig
@@ -149,6 +149,11 @@
   <div class='{{ _horizontal_grid.left_col_classes  }}'>
 {% endif %}
   {% if _date is not empty %}
+    {% if not _horizontal %}
+      {% set _date = _date|merge({
+        attributes: create_attribute().addClass('ratio-16x9')
+      }) %}
+    {% endif %}
     {% block card_date %}
       {% include '@oe-bcl/bcl-date-block/date-block.html.twig' with _date only %}
     {% endblock %}
diff --git a/assets/bcl/bcl-date-block/bcl-date-block.html.twig b/assets/bcl/bcl-date-block/bcl-date-block.html.twig
index e48d0c6..194fcad 100644
--- a/assets/bcl/bcl-date-block/bcl-date-block.html.twig
+++ b/assets/bcl/bcl-date-block/bcl-date-block.html.twig
@@ -23,16 +23,14 @@
   'bcl-date-block',
   'bg-date',
   'rounded',
-  'mw-date',
   'text-center',
   'd-flex',
   'flex-column',
-  'ratio',
-  'ratio-1x1'
+  'ratio'
 ] %}

 {% if attributes is empty %}
-  {% set attributes = create_attribute() %}
+  {% set attributes = create_attribute().addClass(['mw-date', 'ratio-1x1']) %}
 {% endif %}

 {% set attributes = attributes.addClass(_classes) %}

And here is the result:

[tibi2303]

We are following the design here and the card component should not have cover all the space.

Here is the screenshot of the design.

I am waiting for your reply but we should not update this if it's not covered in the design. Please close this if there are no more points to discuss.

[msnassar]

Thanks for the reply, Yes, what I am proposing is not in the design. However, in UCPKN, we have a case where we display 3 date cards (events) next to each other. See example here https://civil-protection-knowledge-network.europa.eu/projects/arctic-reihn

The screenshot you provided is one col card without background (search variant)