@openeuropa/bcl-twig-templates 0.22.0 → 0.23.0

package/package.json

@@ -2,74 +2,74 @@
   "name": "@openeuropa/bcl-twig-templates",
   "author": "European Commission",
   "license": "EUPL-1.2",
-  "version": "0.22.0",
+  "version": "0.23.0",
   "description": "OE Bcl Twig Templates",
   "publishConfig": {
     "access": "public"
   },
   "devDependencies": {
-    "@openeuropa/bcl-accordion": "^0.22.0",
-    "@openeuropa/bcl-alert": "^0.22.0",
-    "@openeuropa/bcl-badge": "^0.22.0",
-    "@openeuropa/bcl-banner": "^0.22.0",
-    "@openeuropa/bcl-base-templates": "^0.22.0",
-    "@openeuropa/bcl-blockquote": "^0.22.0",
-    "@openeuropa/bcl-breadcrumb": "^0.22.0",
-    "@openeuropa/bcl-button": "^0.22.0",
-    "@openeuropa/bcl-button-group": "^0.22.0",
-    "@openeuropa/bcl-card": "^0.22.0",
-    "@openeuropa/bcl-card-layout": "^0.22.0",
-    "@openeuropa/bcl-carousel": "^0.22.0",
-    "@openeuropa/bcl-contact-form": "^0.22.0",
-    "@openeuropa/bcl-content-banner": "^0.22.0",
-    "@openeuropa/bcl-date-block": "^0.22.0",
-    "@openeuropa/bcl-description-list": "^0.22.0",
-    "@openeuropa/bcl-dropdown": "^0.22.0",
-    "@openeuropa/bcl-event": "^0.22.0",
-    "@openeuropa/bcl-fact-figures": "^0.22.0",
-    "@openeuropa/bcl-featured-media": "^0.22.0",
-    "@openeuropa/bcl-file": "^0.22.0",
-    "@openeuropa/bcl-footer": "^0.22.0",
-    "@openeuropa/bcl-form": "^0.22.0",
-    "@openeuropa/bcl-form-input": "^0.22.0",
-    "@openeuropa/bcl-gallery": "^0.22.0",
-    "@openeuropa/bcl-group": "^0.22.0",
-    "@openeuropa/bcl-header": "^0.22.0",
-    "@openeuropa/bcl-heading": "^0.22.0",
-    "@openeuropa/bcl-icon": "^0.22.0",
-    "@openeuropa/bcl-inpage-navigation": "^0.22.0",
-    "@openeuropa/bcl-landing-page": "^0.22.0",
-    "@openeuropa/bcl-language-list": "^0.22.0",
-    "@openeuropa/bcl-language-switcher": "^0.22.0",
-    "@openeuropa/bcl-link": "^0.22.0",
-    "@openeuropa/bcl-links-block": "^0.22.0",
-    "@openeuropa/bcl-list-group": "^0.22.0",
-    "@openeuropa/bcl-listing": "^0.22.0",
-    "@openeuropa/bcl-modal": "^0.22.0",
-    "@openeuropa/bcl-multilingual": "^0.22.0",
-    "@openeuropa/bcl-navbar": "^0.22.0",
-    "@openeuropa/bcl-navigation": "^0.22.0",
-    "@openeuropa/bcl-news": "^0.22.0",
-    "@openeuropa/bcl-offcanvas": "^0.22.0",
-    "@openeuropa/bcl-page": "^0.22.0",
-    "@openeuropa/bcl-pagination": "^0.22.0",
-    "@openeuropa/bcl-person": "^0.22.0",
-    "@openeuropa/bcl-placeholder": "^0.22.0",
-    "@openeuropa/bcl-progress": "^0.22.0",
-    "@openeuropa/bcl-project": "^0.22.0",
-    "@openeuropa/bcl-project-status": "^0.22.0",
-    "@openeuropa/bcl-recent-activities": "^0.22.0",
-    "@openeuropa/bcl-search": "^0.22.0",
-    "@openeuropa/bcl-search-form": "^0.22.0",
-    "@openeuropa/bcl-select": "^0.22.0",
-    "@openeuropa/bcl-spinner": "^0.22.0",
-    "@openeuropa/bcl-subscription": "^0.22.0",
-    "@openeuropa/bcl-subscription-block": "^0.22.0",
-    "@openeuropa/bcl-table": "^0.22.0",
-    "@openeuropa/bcl-textarea": "^0.22.0",
-    "@openeuropa/bcl-timeline": "^0.22.0",
-    "@openeuropa/bcl-toast": "^0.22.0",
-    "@openeuropa/bcl-user": "^0.22.0",
+    "@openeuropa/bcl-accordion": "^0.23.0",
+    "@openeuropa/bcl-alert": "^0.23.0",
+    "@openeuropa/bcl-badge": "^0.23.0",
+    "@openeuropa/bcl-banner": "^0.23.0",
+    "@openeuropa/bcl-base-templates": "^0.23.0",
+    "@openeuropa/bcl-blockquote": "^0.23.0",
+    "@openeuropa/bcl-breadcrumb": "^0.23.0",
+    "@openeuropa/bcl-button": "^0.23.0",
+    "@openeuropa/bcl-button-group": "^0.23.0",
+    "@openeuropa/bcl-card": "^0.23.0",
+    "@openeuropa/bcl-card-layout": "^0.23.0",
+    "@openeuropa/bcl-carousel": "^0.23.0",
+    "@openeuropa/bcl-contact-form": "^0.23.0",
+    "@openeuropa/bcl-content-banner": "^0.23.0",
+    "@openeuropa/bcl-date-block": "^0.23.0",
+    "@openeuropa/bcl-description-list": "^0.23.0",
+    "@openeuropa/bcl-dropdown": "^0.23.0",
+    "@openeuropa/bcl-event": "^0.23.0",
+    "@openeuropa/bcl-fact-figures": "^0.23.0",
+    "@openeuropa/bcl-featured-media": "^0.23.0",
+    "@openeuropa/bcl-file": "^0.23.0",
+    "@openeuropa/bcl-footer": "^0.23.0",
+    "@openeuropa/bcl-form": "^0.23.0",
+    "@openeuropa/bcl-form-input": "^0.23.0",
+    "@openeuropa/bcl-gallery": "^0.23.0",
+    "@openeuropa/bcl-group": "^0.23.0",
+    "@openeuropa/bcl-header": "^0.23.0",
+    "@openeuropa/bcl-heading": "^0.23.0",
+    "@openeuropa/bcl-icon": "^0.23.0",
+    "@openeuropa/bcl-inpage-navigation": "^0.23.0",
+    "@openeuropa/bcl-landing-page": "^0.23.0",
+    "@openeuropa/bcl-language-list": "^0.23.0",
+    "@openeuropa/bcl-language-switcher": "^0.23.0",
+    "@openeuropa/bcl-link": "^0.23.0",
+    "@openeuropa/bcl-links-block": "^0.23.0",
+    "@openeuropa/bcl-list-group": "^0.23.0",
+    "@openeuropa/bcl-listing": "^0.23.0",
+    "@openeuropa/bcl-modal": "^0.23.0",
+    "@openeuropa/bcl-multilingual": "^0.23.0",
+    "@openeuropa/bcl-navbar": "^0.23.0",
+    "@openeuropa/bcl-navigation": "^0.23.0",
+    "@openeuropa/bcl-news": "^0.23.0",
+    "@openeuropa/bcl-offcanvas": "^0.23.0",
+    "@openeuropa/bcl-page": "^0.23.0",
+    "@openeuropa/bcl-pagination": "^0.23.0",
+    "@openeuropa/bcl-person": "^0.23.0",
+    "@openeuropa/bcl-placeholder": "^0.23.0",
+    "@openeuropa/bcl-progress": "^0.23.0",
+    "@openeuropa/bcl-project": "^0.23.0",
+    "@openeuropa/bcl-project-status": "^0.23.0",
+    "@openeuropa/bcl-recent-activities": "^0.23.0",
+    "@openeuropa/bcl-search": "^0.23.0",
+    "@openeuropa/bcl-search-form": "^0.23.0",
+    "@openeuropa/bcl-select": "^0.23.0",
+    "@openeuropa/bcl-spinner": "^0.23.0",
+    "@openeuropa/bcl-subscription": "^0.23.0",
+    "@openeuropa/bcl-subscription-block": "^0.23.0",
+    "@openeuropa/bcl-table": "^0.23.0",
+    "@openeuropa/bcl-textarea": "^0.23.0",
+    "@openeuropa/bcl-timeline": "^0.23.0",
+    "@openeuropa/bcl-toast": "^0.23.0",
+    "@openeuropa/bcl-user": "^0.23.0",
     "copyfiles": "2.4.1",
     "rimraf": "3.0.2"
   },
@@ -92,5 +92,5 @@
     "design-system",
     "twig"
   ],
-  "gitHead": "57304ad94ae3c234f2f2b904208ce540a7a53f23"
+  "gitHead": "fa2097e14024989cddf6f9cd7a9115bed5886aeb"
 }

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

@@ -33,22 +33,25 @@
   {% set _classes = _classes|merge([ 'bg-' ~ _background]) %}
 {% endif %}
 
-{% if _background in ['light', 'warning'] %}
-  {% set _classes = _classes|merge(['text-dark']) %}
-{% endif %}
-
 {% if attributes is empty %}
   {% set attributes = create_attribute() %}
 {% endif %}
 
+{%- if _url is not empty -%}
+  {% set attributes = attributes.setAttribute('title', _title).setAttribute('href', _url) %}
+{%- endif -%}
+
 {% set attributes = attributes.addClass(_classes) %}
 
 {%- if _url is not empty -%}
-<a href="{{ _url }}" title="{{ _title }}">
+<a
+  {{ attributes }}
+>
+{%- else -%}
+<span
+  {{ attributes }}
+>
 {%- endif -%}
-  <span
-    {{ attributes }}
-  >
   {%- if _assistive_text is not empty -%}
     <span class="visually-hidden">
       {{- _assistive_text -}}
@@ -63,9 +66,10 @@
       } only %}
     </span>
   {%- endif -%}
-  </span>
 {%- if _url is not empty -%}
 </a>
+{%- else -%}
+</span>
 {%- endif -%}
 
 {% endspaceless %}

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

@@ -3,6 +3,8 @@
 {# Parameters:
   - title: (string) (default: "")
   - title_tag: (string) (default: "div")
+  - title_link: (link object) (default: {})
+  - title_attributes (drupal attrs)
   - description: (string) (default: "")
   - link: (link object) (default: {}): predefined structure for Link component
   - image: (string) <img> tag
@@ -14,6 +16,7 @@
 
 {% set _title = title|default('') %}
 {% set _title_tag = title_tag|default('div') %}
+{% set _title_link = title_link|default({}) %}
 {% set _title_attributes = title_attributes ?: create_attribute() %}
 {% set _description = description|default('') %}
 {% set _link = link|default({}) %}
@@ -60,6 +63,7 @@
         {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
           title: _title,
           title_tag: _title_tag,
+          title_link: _title_link,
           attributes: _title_attributes,
         } only %}
       {% endif %}

package/templates/bcl-base-templates/content-type.html.twig

@@ -116,6 +116,9 @@
       {% block related %}
         {{ related }}
       {% endblock %}
+      {% block share %}
+        {{ share }}
+      {% endblock %}
     </div>
   </div>
 </main>
@@ -123,9 +126,6 @@
 {% block feedback %}
   {{ feedback }}
 {% endblock %}
-{% block share %}
-  {{ share }}
-{% endblock %}
 
 {% if _with_footer %}
   {% include '@oe-bcl/bcl-footer/footer.html.twig' with footer only %}

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

@@ -1,29 +1,39 @@
 {#
   Parameters:
+  - title: (string) (default: '')
+  - title_tag: (string) (default: 'h2')
+  - title_link: (link object) (default: {})
+  - title_attributes (drupal attrs)
   - listing (object) (default: {})
   - pagination (object) (default: {})
   - sidebar (object) (default: '')
-  - page_title (string) (default: '')
 #}
 
 {% extends "@oe-bcl/bcl-base-templates/content-type.html.twig" %}
 
+{% 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 _listing = listing|default({}) %}
 {% set _pagination = pagination|default({}) %}
 {% set _search = search|default({}) %}
 {% set _sidebar = sidebar|default({}) %}
-{% set _page_title = page_title|default({}) %}
+
+{% set _title_attributes = _title_attributes ?: create_attribute() %}
 
 {% block content_top %}
   {% include '@oe-bcl/bcl-button/button.html.twig' with filter_button only %}
   <div class="row">
     <div class="col-md-6 col-lg-8 align-self-center">
-      <h4 class="mb-0">
-        <span class="text-capitalize">
-          {{- _page_title -}}
-        </span>
-        ({{ listing.items.length }})
-      </h4>
+      {% if _title is not empty %}
+        {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+          title: _title ~ ' (' ~ listing.items.length ~ ')',
+          title_tag: _title_tag,
+          title_link: _title_link,
+          attributes: _title_attributes.addClass(['mb-0', 'text-capitalize']),
+        } only %}
+      {% endif %}
     </div>
     {% if badges is not empty and badges is iterable %}
       <div class="col-md-12 order-md-2 mt-3">
@@ -47,7 +57,7 @@
 
 {% block content %}
   {% if _listing is not empty %}
-    {% include '@oe-bcl/bcl-listing/listing.html.twig' with  _listing %}
+    {% include '@oe-bcl/bcl-listing/listing.html.twig' with  _listing only %}
   {% endif %}
 {% endblock %}
 

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

@@ -1,12 +1,10 @@
 {% spaceless %}
 
 {# Parameters:
-  - title (object) (default: {})
-    format: {
-      content: '',
-      tag: '',
-      classes: ''
-    }
+  - title: (string) (default: '')
+  - title_tag: (string) (default: 'h5')
+  - title_link: (link object) (default: {})
+  - title_attributes (drupal attrs)
   - subtitle (object) (default: {})
     format: {
       content: '',
@@ -51,7 +49,10 @@
     - card_links
 #}
 
-{% set _title = title|default({}) %}
+{% set _title = title|default('') %}
+{% set _title_tag = title_tag|default('h1') %}
+{% set _title_link = title_link|default({}) %}
+{% set _title_attributes = title_attributes ?: create_attribute() %}
 {% set _subtitle = subtitle|default({}) %}
 {% set _text = text|default({}) %}
 {% set _content = content|default('') %}
@@ -116,7 +117,7 @@
 
 {% set attributes = attributes.addClass(_classes) %}
 
-<div
+<article
   {{ attributes }}
 >
 {% if _card_header is not empty %}
@@ -171,16 +172,18 @@
 <div class='{{ _horizontal_grid.right_col_classes }}'>
 {% endif %}
   <div class='{{ _body_classes }}'>
-  {%- if _title is not empty -%}
-    {% set _title_tag = _title.tag ?? 'h5' %}
-    <{{ _title_tag }}
-      {% set _title_attributes = title.attributes ?: create_attribute() %}
-      {% set _title_attributes = _title_attributes.addClass("card-title") %}
-      {{ _title_attributes }}
-    >
-      {{- title.content -}}
-    </{{ _title_tag }}>
-  {%- endif -%}
+  {% if _title is not empty %}
+    {% if _title_attributes.class is empty %}
+      {% set _title_attributes = _title_attributes.addClass('fs-5') %}
+    {% endif %}
+    {% set _title_attributes = _title_attributes.addClass('card-title') %}
+    {% 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 _subtitle is not empty -%}
     {% set _subtitle_tag = _subtitle.tag ?? 'h6' %}
     <{{ _subtitle_tag }}
@@ -270,6 +273,6 @@
     {{- _card_footer -}}
   </div>
 {% endif %}
-</div>
+</article>
 
 {% endspaceless %}

package/templates/bcl-content-banner/content-banner.html.twig

@@ -2,29 +2,37 @@
 
 {#
   Parameters:
-    - "background" (string) (default: 'white')
+    - background: (string) (default: 'white')
       options: [ white, gray ]
-    - "title" (object)
-    - "image" (object)
-    - "image_size" (string) 
+    - title: (string) (default: '')
+    - title_tag: (string) (default: 'h5')
+    - title_link: (link object) (default: {})
+    - title_attributes: (drupal attrs)
+    - image (object)
+    - image_size: (string)
+    - date: (object)
       options: ['sm', 'md', 'lg']
-    - "content" (string)
-    - "badges" (array of objects of type badge)
-    - "links" (array of objects of type link)
-    - "action_button" (object of type button) (default: {})
-    - "service_buttons" (array of objects of type button) (default: [])
-    - "attributes" (drupal attrs)
+    - content: (string)
+    - badges: (array of objects of type badge)
+    - links: (array of objects of type link)
+    - attributes: (drupal attrs)
+
+  Blocks
+    - "action_bar" (string)
 #}
 
+{% set _title = title|default('') %}
+{% set _title_tag = title_tag|default('h1') %}
+{% set _title_link = title_link|default({}) %}
+{% set _title_attributes = title_attributes ?: create_attribute() %}
 {% set _background = background|default('white') %}
-{% set _action_button = action_button|default({}) %}
-{% set _service_buttons = service_buttons|default([]) %}
+{% set _action_bar = action_bar|default('') %}
 {% set _image = image|default({}) %}
+{% set _date = date|default({}) %}
 {% set _image_size = image_size|default('md') %}
 
 {% set _css_classes = [
   'bcl-content-banner',
-  'pt-lg-4-75',
 ] %}
 
 {% if _background != 'white' %}
@@ -32,10 +40,12 @@
     'pb-md-4-75',
     'pb-4',
     'pt-4',
+    'pt-md-4-75',
   ]) %}
 {% else %}
   {% set _css_classes = _css_classes|merge([
-    'pt-3'
+    'pt-4',
+    'pt-md-4-75',
   ]) %}
 {% endif %}
 
@@ -64,6 +74,10 @@
     {% set _left_col_classes = 'col-6 col-md-4 col-lg-2 offset-3 offset-md-0' %}
   {% endif %}
 {% endif %}
+{% if _date is not empty %}
+  {% set _left_col_classes = 'col-8 col-md-3 col-lg-2 offset-4 offset-md-0' %}
+  {% set _right_col_classes = 'col-md-9 col-lg-10 col-xxl-8' %}
+{% endif %}
 
 {% set _horizontal_classes = {
   left_col_classes: _left_col_classes,
@@ -71,10 +85,10 @@
 } %}
 
 {% set _card = {
-  title: title|default({})|merge({
-    tag: 'h2',
-    attributes: create_attribute().addClass(['fw-bold']),
-  }),
+  title: _title,
+  title_tag: _title_tag,
+  title_link: _title_link,
+  title_attributes: _title_attributes.addClass('mb-0'),
   horizontal: true,
   horizontal_grid: _horizontal_classes,
   extra_classes_header: 'bg-transparent pt-0 pb-0 border-0',
@@ -92,20 +106,9 @@
   <div class="container">
   {% include '@oe-bcl/bcl-card/card.html.twig' with _card %}
 
-  {% if _service_buttons is not empty or _action_button is not empty %}
-    <div class="d-flex justify-content-end mt-2 align-items-center">
-    {% if _service_buttons is not empty %}
-      {% for _button in _service_buttons %}
-        {% include '@oe-bcl/bcl-button/button.html.twig' with _button only %}
-      {% endfor %}
-    {% endif %}
-    {% if _action_button is not empty %}
-      <div class="d-grid d-md-block ms-3">
-        {% include '@oe-bcl/bcl-button/button.html.twig' with _action_button only %}
-      </div>
-    {% endif %}
-    </div>
-  {% endif %}
+    {%- block action_bar -%}
+      {{ _action_bar }}
+    {%- endblock -%}
   </div>
 </div>
 

package/templates/bcl-description-list/description-list.html.twig

@@ -4,25 +4,25 @@
   Parameters:
   - title: (string) (default: "")
   - title_tag: (string) (default: "h2")
+  - title_link: (link object) (default: {})
   - title_attributes (drupal attrs)
-  - "items" (array) (default: []): format: [
+  - items (array) (default: []): format: [
       {
-        "term" (object or array of object) -format: {
+        term (object or array of object) -format: {
           icon: {} - icon object,
           label: ""
         }
-        "definition" (block or array of string)
+        definition (block or array of string)
       },
       ...
     ]
-  - "variant" (string) (default: '') 
+  - variant (string) (default: '') 
     - option: ["horizontal"]
 #}
 
-{# Parameters #}
-
 {% 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('') %}
@@ -39,6 +39,7 @@
   {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
     title: _title,
     title_tag: _title_tag,
+    title_link: _title_link,
     attributes: _title_attributes,
   } only %}
 {% endif %}

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

@@ -7,7 +7,7 @@
 {% block content %}
   {% include '@oe-bcl/bcl-description-list/description-list.html.twig' with details_list only %}
 
-  <h3 id="item-1" class="fw-bold my-4">Description</h3>
+  <h2 id="item-1" class="my-4">Description</h2>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sit amet eleifend tortor. In facilisis eros vitae turpis ullamcorper,
   a euismod dolor lacinia. Nam facilisis ipsum et sollicitudin imperdiet. Curabitur a efficitur ante. Phasellus non felis laoreet,
   posuere ante ut, rhoncus tortor. Proin sed erat vel nisl luctus vulputate. Nunc tristique ultricies turpis, eu dictum enim ultrices vel.
@@ -18,7 +18,7 @@
   a euismod dolor lacinia. Nam facilisis ipsum et sollicitudin imperdiet.
   </p>
 
-  <h3 id="item-2" class="fw-bold my-4">Related documents</h3>
+  <h2 id="item-2" class="my-4">Related documents</h2>
   {% include '@oe-bcl/bcl-file/file.html.twig' with files[0] only %}
   {% include '@oe-bcl/bcl-file/file.html.twig' with files[1] only %}
 {% endblock %}

package/templates/bcl-fact-figures/fact-figures.html.twig

@@ -2,31 +2,32 @@
 
 {#
   Parameters:
-  - "title" (string) (default: '')
-  - "title_tag" (string) (default: 'h2')
-  - "variant" (string) (default: '') options:
+  - title (string) (default: '')
+  - title_tag (string) (default: 'h2')
+  - title_link: (link object) (default: {})
+  - title_attributes (drupal attrs)
+  - variant (string) (default: '') options:
     [ default, block ]
-  - "display_icons" (boolean) (default: true)
-  - "items" (array) (default: []):
-    - "icon" (associate array) (default: { size: 'm' })
-    - "subtitle" (string) (default: '')
-    - "title" (string) (default: '')
-    - "description" (string) (default:'')
-  - "grid_columns" (int) (default: 1)
-  - "responsiveness" (string) (default: 'md')
-  - "responsive_columns" (integer) (default: 3)
-  - "gutter" (int) (default: 4)
-  - "equal_height" (boolean) (default: false)
-  - "cols_extra_classes" (string) (default: '')
-  - "icon_path" (string) (default: '')
-  - "link_more" (object of type link) (default {})
+  - display_icons (boolean) (default: true)
+  - items (array) (default: []):
+    - icon (associate array) (default: { size: 'm' })
+    - subtitle (string) (default: '')
+    - title (string) (default: '')
+    - description (string) (default:'')
+  - grid_columns (int) (default: 1)
+  - responsiveness (string) (default: 'md')
+  - responsive_columns (integer) (default: 3)
+  - gutter (int) (default: 4)
+  - equal_height (boolean) (default: false)
+  - cols_extra_classes (string) (default: '')
+  - icon_path (string) (default: '')
+  - link_more (object of type link) (default {})
 #}
 
-{# Parameters #}
-
 {% set _title = title|default('') %}
 {% set _title_tag = title_tag|default('h2') %}
-{% set _title_attributes = title_attributes ?: create_attribute().addClass(['fw-bold']) %}
+{% set _title_link = title_link|default({}) %}
+{% set _title_attributes = title_attributes ?: create_attribute() %}
 {% set _variant = variant|default('default') %}
 {% set _css_classes = ['bcl-fact-figures', 'bcl-fact-figures--' ~ _variant] %}
 {% set _display_icons = display_icons ?? true %}
@@ -72,6 +73,7 @@
   {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
     title: _title,
     title_tag: _title_tag,
+    title_link: _title_link,
     attributes: _title_attributes,
   } only %}
 {% endif %}
@@ -94,14 +96,14 @@
         {% include '@oe-bcl/bcl-icon/icon.html.twig' with _item.icon only %}
       {% endif %}
       {% if _item.title is defined and _item.title is not empty %}
-        <h4 class="text-capitalize fw-bold mt-2">
+        <div class="fs-3 mt-2">
           {{- _item.title -}}
-        </h4>
+        </div>
       {% endif %}
       {% if _item.subtitle is defined and _item.subtitle is not empty %}
-        <h5 class="fw-bold">
+        <div class="fs-5">
           {{- _item.subtitle -}}
-        </h5>
+        </div>
       {% endif %}
       {% if _item.description is defined and _item.description is not empty %}
         <p>