@openeuropa/bcl-theme-default 0.20.0 → 0.23.0

package/templates/bcl-file/file.html.twig

@@ -4,6 +4,8 @@
   Parameters:
   - title (string) (default: '')
   - title_tag (string) (default: 'h2')
+  - title_link: (link object) (default: {})
+  - title_attributes (drupal attrs)
   - item_title (string) (default: '')
   - icon (icon Object) (default: {})
   - text (string) (default: '')
@@ -37,6 +39,8 @@
 {% set _icon = icon|default({}) %}
 {% set _title = title|default('') %}
 {% set _title_tag = title_tag|default('h2') %}
+{% set _title_link = title_link|default({}) %}
+{% set _title_attributes = title_attributes ?: create_attribute() %}
 {% set _item_title = item_title|default('') %}
 {% set _text = text|default('') %}
 {% set _content = content|default('') %}
@@ -49,6 +53,12 @@
 {% set _translation = translation|default({}) %}
 {% set _icon_path = icon_path|default({}) %}
 
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
+{% set attributes = attributes.addClass(['bcl-file']) %}
+
 {% set _container_classes = 'w-100 d-md-flex' %}
 {% if _icon is not empty %}
   {% set _container_classes = _container_classes ~ ' ms-2-5' %}
@@ -57,15 +67,13 @@
   }) %}
 {% endif %}
 
-{% if attributes is empty %}
-  {% set attributes = create_attribute() %}
-{% endif %}
-
 {% if _title is not empty %}
-  {% set _title_classes = 'fw-bold mb-4' %}
-  <{{ _title_tag }} class="{{ _title_classes }}">
-    {{- _title -}}
-  </{{ _title_tag }}>
+  {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+    title: _title,
+    title_tag: _title_tag,
+    title_link: _title_link,
+    attributes: _title_attributes,
+  } only %}
 {% endif %}
 
 {% if _variant == 'card' %}
@@ -82,9 +90,7 @@
       right_col_classes: "col-12 col-md-8",
     },
     badges: _badges,
-    title: {
-      content: _item_title,
-    },
+    title: _item_title,
     text: {
       content: _text,
       classes: "mb-2",
@@ -134,7 +140,8 @@
             path: _icon_path,
           },
           attributes: create_attribute()
-                      .setAttribute('download', _download.url)
+                      .setAttribute('download', true)
+                      .setAttribute('target', '_blank')
                       .addClass(['standalone', 'align-self-center', 'd-inline-block', 'mt-1', 'mt-md-0'])
         }) %}
         {% include '@oe-bcl/bcl-link/link.html.twig' with _download only %}
@@ -168,7 +175,7 @@
               {% if _item.title is not empty %}
                 <p class="fw-bold m-0">{{ _item.title }}</p>
               {% endif %}
-              {% if _item.title is not empty %}
+              {% if _item.description is not empty %}
                 <p class="m-0">{{ _item.description }}</p>
               {% endif %}
               {% if _item.language is not empty or _item.meta is not empty %}
@@ -193,7 +200,8 @@
                 path: _icon_path,
               },
               attributes: create_attribute()
-                          .setAttribute("download", _item.download.url)
+                          .setAttribute('download', true)
+                          .setAttribute('target', '_blank')
                           .addClass(['d-block', 'standalone', 'mt-1'])
             }) only %}
             </div>

package/templates/bcl-footer/footer.html.twig

@@ -69,9 +69,11 @@
                   {% endif %}
                   {% if item.type == 'links' %}
                     {% for link in item.links %}
+                      <div class="mb-1">
                       {% include '@oe-bcl/bcl-link/link.html.twig' with link|merge({
-                        attributes: create_attribute().addClass(['d-block', 'standalone', 'mb-1'])
+                        attributes: create_attribute().addClass(['standalone'])
                       }) only %}
+                      </div>
                     {% endfor %}
                   {% endif %}
                 {% endfor %}

package/templates/bcl-form/form.html.twig

@@ -3,6 +3,8 @@
 {# Parameters:
   - title: (string) (default: '')
   - title_tag: (string) (default: 'h2')
+  - title_link: (link object) (default: {})
+  - title_attributes (drupal attrs)
   - helper_text (string) (default: '')
   - antispam (string) (default: '')
   - items (array of array of objects) (default: []) format: [
@@ -26,6 +28,8 @@
 
 {% set _title = title|default('') %}
 {% set _title_tag = title_tag|default('h2') %}
+{% set _title_link = title_link|default({}) %}
+{% set _title_attributes = title_attributes ?: create_attribute() %}
 {% set _helper_text = helper_text|default('') %}
 {% set _items = items|default([]) %}
 {% set _antispam = antispam|default('') %}
@@ -36,10 +40,12 @@
 {% endif %}
 
 {% if _title is not empty %}
-  {% set _title_classes = 'fw-bold mb-4' %}
-  <{{ _title_tag }} class="{{ _title_classes }}">
-    {{- _title -}}
-  </{{ _title_tag }}>
+  {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+    title: _title,
+    title_tag: _title_tag,
+    title_link: _title_link,
+    attributes: _title_attributes,
+  } only %}
 {% endif %}
 
 {% if _helper_text is not empty %}

package/templates/bcl-gallery/gallery.html.twig

@@ -0,0 +1,207 @@
+{% spaceless %}
+
+{#
+Parameters:
+  - id (string) (default: '')
+  - title (string) (default: '')
+  - title_tag (string) (default: 'h2')
+  - title_link: (link object) (default: {})
+  - title_attributes (drupal attrs)
+  - counter (string) (default: '')
+  - toggle_collapsed (string) (default: '')
+  - toggle_expanded (string) (default: '')
+  - previous_label (string) (default: '')
+  - next_label (string) (default: '')
+  - max_visible_thumbnails (int) (default: 5)
+  - items (array of objects) format: [
+      {
+        thumbnails (string) img path
+        media: (string) <img> tag
+        caption (string)
+        caption_title (string)
+        caption_classes (string)
+        interval (integer) (default: 0)
+      }
+      ...
+    ],
+  - icon_path (string) (default: '')
+#}
+
+{% set _id = id|default('gallery-' ~ random(1000)) %}
+{% set _title = title|default('') %}
+{% set _title_tag = title_tag|default('h2') %}
+{% set _title_link = title_link|default({}) %}
+{% set _title_attributes = title_attributes ?: create_attribute() %}
+{% set _counter = counter|default('') %}
+{% set _toggle_collapsed = toggle_collapsed|default('') %}
+{% set _toggle_expanded = toggle_expanded|default('') %}
+{% set _next_label = next_label|default('Next') %}
+{% set _prev_label = prev_label|default('Previous') %}
+{% set _items = items|default([]) %}
+{% set _max_visible_thumbnails = max_visible_thumbnails|default(5) %}
+{% set _icon_path = icon_path|default('') %}
+
+{% set _carousel_items = [] %}
+{% set _carousel_id = "carousel" ~ _id|capitalize %}
+{% set _modal_id = "modal" ~ _id|capitalize %}
+{% set _collpase_id = "collapse" ~ _id|capitalize %}
+{% set _max_visible_thumbnails = _max_visible_thumbnails + 1 %}
+
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
+{% set attributes = attributes.addClass('bcl-gallery') %}
+
+{# Print the result #}
+
+{% if _items is not empty %}
+
+  <div {{ attributes }}>
+    {% if _items is iterable %}
+      <div class="d-sm-flex flex-sm-row align-items-sm-center">
+        <div class="flex-sm-grow-1">
+        {% if _title is not empty %}
+          {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+            title: _title,
+            title_tag: _title_tag,
+            title_link: _title_link,
+            attributes: _title_attributes,
+          } only %}
+        {% endif %}
+        </div>
+        <div class="mb-3 mb-sm-0 fw-bold">
+          {%- if _counter is not empty -%}
+            {{ _counter|replace({'%d': _items|length}) }}
+          {%- endif -%}
+        </div>
+      </div>
+
+      {% for _item in _items %}
+        {% if loop.first %}
+          <div class="bcl-gallery__thumbnails">
+        {% endif %}
+          {% if loop.index == _max_visible_thumbnails %}
+            <div class="bcl-gallery__thumbnails-collaspe collapse" id="{{ _collpase_id }}">
+          {% endif %}
+            {% if loop.index % _max_visible_thumbnails == 0 or loop.first %}
+              <ul class="bcl-gallery__grid">
+            {% endif %}
+                <li>
+                  <a href="#" data-bs-target="#{{ _carousel_id }}" data-bs-slide-to="{{ loop.index - 1 }}" class="bcl-gallery__item d-block w-100 img-fluid">
+                    <div class="bcl-gallery__item-overlay" data-bs-target="#{{ _modal_id }}" data-bs-toggle="modal">
+                    {% if '<iframe' in _item.media or '<video' in _item.media %}
+                      <span class="bcl-gallery__item-play-icon">
+                      {% include '@oe-bcl/bcl-icon/icon.html.twig' with {
+                        name: 'play-fill',
+                        size: 's',
+                        path: _icon_path,
+                      } only %}
+                      </span>
+                    {% endif %}
+                    {% if _item.caption is not empty or item.caption_title is not empty %}
+                      <div class="bcl-gallery__item-caption">
+                      {% if _item.caption_title is not empty %}
+                        <h5>{{ _item.caption_title }}</h5>
+                      {% endif %}
+                      {% if _item.caption is not empty %}
+                        <div class="bcl-gallery__item-description">
+                          {{ _item.caption }}
+                        </div>
+                      {% endif %}
+                      </div>
+                    {% endif %}
+                    </div>
+                    {{ _item.thumbnail }}
+                  </a>
+                </li>
+            {% if loop.index % 5 == 0 or loop.last %}
+              </ul>
+            {% endif %}  
+          {% if loop.last %}
+            </div>
+          {% endif %}
+        {% if loop.index > _max_visible_thumbnails and loop.last %}
+          </div>
+          <div class="bg-lighter py-3 px-4 mt-2 rounded text-center">
+            <a 
+              class="bcl-gallery__collapse standalone d-none d-sm-inline-block" 
+              aria-controls="{{ _collpase_id }}" 
+              data-bs-toggle="collapse" 
+              aria-expanded="false" 
+              role="button" 
+              href="#{{ _collpase_id }}"
+            >
+              <span class="label-collapsed">{{ _toggle_collapsed|replace({'%d': _items|length}) }}</span>
+              <span class="label-expanded">{{ _toggle_expanded }}</span>
+              {% include '@oe-bcl/bcl-icon/icon.html.twig' with {
+                name: 'caret-down-fill',
+                size: '2xs',
+                path: _icon_path,
+                attributes: create_attribute().addClass('ms-2-5'),
+              } only %}
+            </a>
+            <a 
+              class="bcl-gallery__mobile-view-more standalone d-inline-block d-sm-none" 
+              data-bs-target="#{{ _carousel_id }}" 
+              data-bs-slide-to="{{ _max_visible_thumbnails - 1 }}" 
+              role="button" 
+              href="#"
+            >
+              <span data-bs-target="#{{ _modal_id }}" data-bs-toggle="modal">
+                <span class="label-collapsed">{{ _toggle_collapsed|replace({'%d': _items|length}) }}</span>
+                {% include '@oe-bcl/bcl-icon/icon.html.twig' with {
+                  name: 'caret-down-fill',
+                  size: '2xs',
+                  path: _icon_path,
+                  attributes: create_attribute().addClass('ms-2-5'),
+                } only %}
+              <span>
+            </a>
+          </div>
+        {% endif %}
+      {% endfor %}
+    {% endif %}
+
+    <div class="modal" id="{{ _modal_id }}" tabindex="-1" aria-labelledby="{{ _modal_id }}" aria-hidden="true" data-bs-backdrop="false">
+      <div class="modal-dialog modal-dialog-centered modal-fullscreen">
+        <div class="modal-content">
+          <div class="modal-header border-0 justify-content-between">
+            {% if _title is not empty %}
+              <div class="modal-title">
+                <h3 class="d-none d-sm-block">{{- _title -}}</h3>
+              </div>
+            {% endif %}
+            <div class="carousel-pager">
+              <span>1</span> / {{ _items|length }}
+            </div>
+            <div class="modal-close">
+              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+          </div>
+          
+          <div class="modal-body d-flex align-items-center justify-content-center">
+            {% for _item in _items %}
+              {% set _carousel_items = _carousel_items|merge([_item|merge({
+                caption: ('<iframe' in _item.media or '<video' in _item.media) ? '' : _item.caption,
+                image: ('<iframe' in _item.media or '<img' in _item.media) ? _item.media|replace({'src=': 'data-src='}) : _item.media,
+              })]) %}
+            {% endfor %}
+            {% include '@oe-bcl/bcl-carousel/carousel.html.twig' with {
+              id: _carousel_id,
+              with_controls: true,
+              with_indicators: false,
+              prev_label: _prev_label,
+              next_label: _next_label,
+              autoplay: false,
+              items: _carousel_items,
+            } only %}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  
+{% endif %}
+
+{% endspaceless %}

package/templates/bcl-group/group-landing.html.twig

@@ -17,7 +17,7 @@
     {% endif %}
     {% if banner.title is not empty %}
       <div class="p-md-3-5 pt-3 bg-lighter d-md-flex n-mx-container">
-        <h2 class="mb-0 d-inline-block fw-bold">{{ banner.title }}</h2>
+        <h1 class="mb-0 d-inline-block">{{ banner.title }}</h1>
         {% if banner.actions is not empty and banner.actions is iterable %}
         <div class="d-grid d-md-block ms-auto">
           {% for _action in banner.actions %}
@@ -56,10 +56,10 @@
         </div>
       </div>
       <div class="col-md-4">
-        <h4 class="mb-3 pb-2">{{ contact.title }}</h4>
+        <h2 class="mb-3 pb-2">{{ contact.title }}</h2>
         {% if contact.profiles is not empty and contact.profiles is iterable %}
           {% for _profile in contact.profiles %}
-            {% include '@oe-bcl/bcl-user/user-view-compact.html.twig' with _profile only %}
+            {% include '@oe-bcl/bcl-user/user-compact.html.twig' with _profile only %}
           {% endfor %}
         {% endif %}
         {% if contact.more_link is not empty %}
@@ -76,14 +76,14 @@
   {% if recent is not empty and members is not empty %}
   <div class="row mt-3">
     <div class="col-md-8">
-      <h4 class="mb-4 pb-2">{{ recent.title }}</h4>
+      <h2 class="mb-4 pb-2">{{ recent.title }}</h2>
       {% include '@oe-bcl/bcl-recent-activities/recent-activities.html.twig' with recent.block_data only %}
     </div>
     <div class="col-md-4">
-      <h4 class="mt-4 mt-md-0 mb-4 pb-2">{{ members.title}}</h4>
+      <h2 class="mt-4 mt-md-0 mb-4 pb-2">{{ members.title}}</h2>
       {% if members.profiles is not empty and members.profiles is iterable %}
         {% for _profile in members.profiles %}
-          {% include '@oe-bcl/bcl-user/user-view-compact.html.twig' with _profile only %}
+          {% include '@oe-bcl/bcl-user/user-compact.html.twig' with _profile only %}
         {% endfor %}
       {% endif %}
       {% if members.more_link is not empty %}
@@ -93,7 +93,7 @@
   </div>
   {% endif %}
   {% if contributions is not empty %}
-    <h4 class="my-4 pt-3 pb-2">{{ contributions.title}}</h4>
+    <h2 class="my-4 pt-3 pb-2">{{ contributions.title}}</h2>
     {% if contributions.listing is not empty %}
       {% include '@oe-bcl/bcl-listing/listing.html.twig' with contributions.listing only %}
     {% endif %}

package/templates/bcl-group/group.html.twig

@@ -4,7 +4,7 @@
 <div class="container mt-4 mt-md-5">
   <div class="col-xxl-11">
     <div class="p-md-3-5 pt-3 bg-lighter d-md-flex n-mx-container">
-      <h2 class="mb-0 d-inline-block fw-bold">{{ banner.title }}</h2>
+      <h1 class="mb-0 d-inline-block">{{ banner.main_title }}</h1>
       {% if banner.actions is not empty and banner.actions is iterable %}
       <div class="d-grid d-md-block ms-auto">
         {% for _action in banner.actions %}

package/templates/bcl-heading/heading.html.twig

@@ -0,0 +1,40 @@
+{% spaceless %}
+
+{# Parameters:
+  - title (string) (default: '')
+  - title_tag (string) (default: 'h2')
+  - title_link: (object) (default: {})
+  - attributes (drupal attrs)
+#}
+
+{% set _title = title|default('') %}
+{% set _title_tag = title_tag|default('h2') %}
+{% set _title_link = title_link|default({}) %}
+
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{%  endif %}
+
+{% if attributes.class is empty %}
+  {% set attributes = attributes.addClass(['mb-4']) %}
+{% endif %}
+
+{% set attributes = attributes.addClass(['bcl-heading']) %}
+
+{% if _title_link is not empty and _title is not empty and _title_link.label is empty %}
+  {% set _title_link = _title_link|merge({ label: _title }) %}
+{% endif %}
+
+{% if _title is not empty or _title_link is not empty %}
+<{{ _title_tag }} 
+  {{- attributes -}}
+>
+{%- if _title_link is not empty -%}
+  {% include '@oe-bcl/bcl-link/link.html.twig' with _title_link|merge({ standalone: true }) only %}
+{%- else -%}
+  {{- _title -}}
+{%- endif %}
+</{{ _title_tag }}>
+{% endif -%}
+
+{% endspaceless %}

package/templates/bcl-inpage-navigation/inpage-navigation.html.twig

@@ -2,14 +2,19 @@
 
 {#
 Parameters:
-  - "title": (string) (default: '')
-  - "full_layout": (boolean) (default: false)
-  - "links": (array of link objects) (default: [])
-  - "content": (string) (default: '')
+  - title: (string) (default: '')
+  - title_tag: (string) (default: 'h5')
+  - title_link: (link object) (default: {})
+  - title_attributes (drupal attrs)
+  - full_layout: (boolean) (default: false)
+  - links: (array of link objects) (default: [])
+  - content: (string) (default: '')
 #}
 
-{# Internal properties #}
 {% set _title = title|default('') %}
+{% set _title_tag = title_tag|default('h3') %}
+{% set _title_link = title_link|default({}) %}
+{% set _title_attributes = title_attributes ?: create_attribute() %}
 {% set _links = links|default([]) %}
 {% set _content = content|default('') %}
 {% set _id = id|default('bcl-inpage-navigation-' ~ random(5)) %}
@@ -27,9 +32,12 @@ Parameters:
   <div class="col-md-3 d-none d-md-block">
 {% endif %}
     <nav {{ attributes }}>
-      {% if _title is defined and _title is not empty %}
-        <h5>{{ _title }}</h5>
-      {% endif %}
+      {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+        title: _title,
+        title_tag: _title_tag,
+        title_link: _title_link,
+        attributes: _title_attributes,
+      } only %}
       {% include '@oe-bcl/bcl-navigation/navigation.html.twig' with {
         'pills': true,
         'vertical': true,

package/templates/bcl-landing-page/landing-page.html.twig

@@ -11,7 +11,7 @@
 <div class="container">
   {% if featured_section is defined %}
     <div class="my-4">
-      <h2 class="mb-4 fw-bold">{{ featured_section.title }}</h2>
+      <h2 class="mb-4">{{ featured_section.title }}</h2>
       <div class="row">
         <div class="col-12 col-md-6">
           {{ featured_section.content }}
@@ -37,7 +37,7 @@
 
   {% if activity_featured is defined %}
     <div class="my-4">
-      <h2 class="mb-4 fw-bold">{{ activity_featured.title }}</h2>
+      <h2 class="mb-4">{{ activity_featured.title }}</h2>
       <div class="row">
         <div class="col-12 col-md-6">
           {{ activity_featured.content }}

package/templates/bcl-links-block/links-block.html.twig

@@ -1,21 +1,27 @@
 {% spaceless %}
 
 {# Parameters:
+  - title: (string) (default: "")
+  - title_tag: (string) (default: "h2")
+  - title_link: (link object) (default: {})
+  - title_attributes (drupal attrs)
   - background: (string) (default: "gray")
     - options ["gray", "transparent"]
   - variant: (string) (default: "vertical")
     - options ["vertical", "horizontal"]
-  - title: (string) (default: "")
-  - title_tag: (string) (default: "h2")
   - links (array of link objects) (default: [])
 #}
 
-{% set _background = background|default("gray") %}
-{% set _variant = variant|default("vertical") %}
 {% set _title = title|default("") %}
 {% set _title_tag = title_tag|default("h2") %}
+{% set _title_link = title_link|default({}) %}
+{% set _title_attributes = title_attributes ?: create_attribute() %}
+{% set _background = background|default("gray") %}
+{% set _variant = variant|default("vertical") %}
 {% set _links = links|default([])%}
 
+{% set _title_classes = ['pb-3', 'mb-3', 'border-bottom'] %}
+
 {% if attributes is empty %}
   {% set attributes = create_attribute() %}
 {% endif %}
@@ -28,8 +34,12 @@
   {{ attributes }}
 >
   {% if _title is not empty %}
-    {% set _title_classes = 'fw-bold pb-3 mb-3 border-bottom' %}
-    <{{ _title_tag }} class="{{ _title_classes }}">{{ _title }}</{{ _title_tag }}>
+    {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+      title: _title,
+      title_tag: _title_tag,
+      title_link: _title_link,
+      attributes: _title_attributes.addClass(_title_classes),
+    } only %}
   {% endif %}
   {% if _links is not empty and _links is iterable %}
     <ul class="ps-0 mb-0">

package/templates/bcl-listing/listing.html.twig

@@ -1,20 +1,24 @@
 {% spaceless %}
 
 {# Parameters:
-  - variant: (string) (default: "horizontal") options:
-  [ default-1-col, highlight-1-col, default-2-col, default-3-col, highlight-2-col, highlight-3-col ]
   - title: (string) (default: "")
   - title_tag: (string) (default: "h2")
+  - title_link: (link object) (default: {})
+  - title_attributes (drupal attrs)
+  - variant: (string) (default: "horizontal") options:
+  [ default-1-col, highlight-1-col, default-2-col, default-3-col, highlight-2-col, highlight-3-col ]
   - items: (array of objects of type card)
   - link: (object of type link)
   - alignment: (string) (default: '') options:
   ['start', 'end', 'center', 'baseline', 'stretch']
 #}
 
-{% set _items = items|default([]) %}
-{% set _variant = variant|default('default-1-col') %}
 {% set _title = title|default('') %}
 {% set _title_tag = title_tag|default('h2') %}
+{% set _title_link = title_link|default({}) %}
+{% set _title_attributes = title_attributes ?: create_attribute() %}
+{% set _items = items|default([]) %}
+{% set _variant = variant|default('default-1-col') %}
 {% set _alignment = alignment|default('') %}
 {% set _link = link|default({}) %}
 {% set _classes = ['bcl-listing', 'bcl-listing--' ~ _variant] %}
@@ -35,10 +39,12 @@
 <div {{ attributes }}>
 
 {% if _title is not empty %}
-  {% set _title_classes = 'fw-bold mb-4' %}
-  <{{ _title_tag }} class="{{ _title_classes }}">
-    {{- _title -}}
-  </{{ _title_tag }}>
+  {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+    title: _title,
+    title_tag: _title_tag,
+    title_link: _title_link,
+    title_attributes: _title_attributes,
+  } only %}
 {% endif %}
 
 {% if _items is not empty %}
@@ -56,13 +62,17 @@
         classes: _image_classes,
       })}) %}
     {% elseif _card.date is not empty %}
-      {% set _max_width = 'mw-date mb-3' %}
+      {% set _max_width = 'mw-col-date mb-3' %}
     {% endif %}
     {% if _alignment is not empty %}
       {% set _alignment_class = ' align-self-' ~ _alignment %}
     {% endif %}
     {% set _card_classes = [] %}
     {% set _card_attributes = card.attributes ? card.attributes : create_attribute() %}
+    {% set _card_title_attributes = card.title_attributes ? card.title_attributes : create_attribute() %}
+    {% set _card = _card|merge({
+      title_attributes: _card_title_attributes.addClass(['fs-5'])
+    }) %}
 
     {% if _variant == 'default-1-col' %}
       {% set _card_classes = [

package/templates/bcl-modal/modal.html.twig

@@ -37,6 +37,10 @@
                     .addClass(_classes)
 %}
 
+{% if _static_backdrop %}
+  {% set attributes = attributes.setAttribute('data-bs-backdrop', 'static') %}
+{% endif %}
+
 <div
   {{ attributes }}
 >
@@ -45,7 +49,6 @@
   {{- _fullscreen_responsive ? ' modal-fullscreen-' ~ _fullscreen_responsive ~ '-down' -}}
   {{- _verticaly_centered ? ' modal-dialog-centered' -}}
   {{- _scrollable ? ' modal-dialog-scrollable' -}}"
-  {{- _static_backdrop ? ' data-bs-backdrop="static"' -}}
   >
     <div class="modal-content">
       {% if header is not empty %}