@openeuropa/bcl-twig-templates 0.23.0 → 0.24.0

package/package.json

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

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

@@ -3,18 +3,17 @@
 {#
   Parameters:
   - id (int) (default: random(1000))
-  - flush (boolean) (default: false) flush variant of the accordion
+  - flush (boolean) (default: false)
   - items (array) (default: []): format: [
       {
         title: (string),
         title_tag: (string),
         content: (block),
-        stay_open (boolean) (default: false) stay open after another selected
+        stay_open (boolean) (default: false)
       },
-      ...
     ]
-  - open_item_id (int) (default: 0) index value of the item to open (starting from 1),
-    all closed by default (0)
+  - open_item_id (int) (default: 0)
+  - attributes (drupal attrs)
 #}
 
 {% set _id = id|default(random(1000)) %}

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

@@ -8,15 +8,17 @@
   - animated_dismiss (boolean) (default: true)
   - icon_path (string) (default: '')
   - icon_name (string) (default: '')
+  - attributes (drupal attrs)
 #}
 
 {% set _message = message|default('') %}
-{% set _variant = variant|default('primary') %}
 {% set _heading = heading|default('') %}
-{% set _icon_path = icon_path|default('') %}
+{% set _variant = variant|default('primary') %}
 {% set _dismissible = dismissible ?? true %}
 {% set _animated_dismiss = animated_dismiss ?? true %}
+{% set _icon_path = icon_path|default('') %}
 {% set _icon_name = icon_name|default('') %}
+
 {% set _classes = ['alert', 'alert-' ~ _variant|e('html_attr'), 'd-flex', 'align-items-center'] %}
 {% set _icon_names = {
     primary: "info-circle-fill",
@@ -62,7 +64,7 @@
 {% endif %}
   <div class="alert-content flex-grow-1">
   {%- if _heading is not empty -%}
-    <h4 class="alert-heading">{{ _heading }}</h4>
+    <div class="alert-heading h4">{{ _heading }}</div>
   {%- endif -%}
   {%- if _message is not empty -%}
     {{- _message -}}

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

@@ -10,18 +10,20 @@
   - rounded_pill (boolean) (default: false)
   - outline (boolean) (default: false)
   - icon_path (string) (default: '')
+  - attributes (drupal attrs)
 #}
 
-{% set _rounded_pill = rounded_pill|default(false) %}
-{% set _outline = outline|default(false) %}
-{% set _background = background|default('primary') %}
 {% set _label = label|default('') %}
-{% set _classes = ['badge'] %}
+{% set _background = background|default('primary') %}
 {% set _url = url|default('') %}
-{% set _icon_path = icon_path|default('') %}
 {% set _title = title|default(_label) %}
 {% set _dismissible = dismissible|default(false) %}
 {% set _assistive_text = assistive_text|default('') %}
+{% set _rounded_pill = rounded_pill|default(false) %}
+{% set _outline = outline|default(false) %}
+{% set _icon_path = icon_path|default('') %}
+
+{% set _classes = ['badge'] %}
 
 {% if _rounded_pill %}
   {% set _classes = _classes|merge(['rounded-pill']) %}

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

@@ -1,17 +1,18 @@
 {% spaceless %}
 
 {# Parameters:
-  - title: (string) (default: "")
-  - title_tag: (string) (default: "div")
+  - title: (string) (default: '')
+  - title_tag: (string) (default: 'div')
   - title_link: (link object) (default: {})
   - title_attributes (drupal attrs)
-  - description: (string) (default: "")
+  - description: (string) (default: '')
   - link: (link object) (default: {}): predefined structure for Link component
   - image: (string) <img> tag
   - shade: (boolean) (default: false)
   - hero: (boolean) (default: false)
   - full_width: (boolean) (default: false)
-  - content_classes: (string) (default: "")
+  - content_classes: (string) (default: '')
+  - attributes (drupal attrs)
 #}
 
 {% set _title = title|default('') %}
@@ -26,7 +27,6 @@
 {% set _full_width = full_width|default(false) %}
 {% set _content_classes = content_classes|default('') %}
 
-
 {% set _content_class = 'bcl-banner__content' %}
 {% if _content_classes is not empty %}
   {% set _content_class = _content_class ~ " " ~ _content_classes %}

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

@@ -16,6 +16,7 @@
   - header
   - footer
   - content
+  - content_row
   - sidebar
   - banner
   - feedback
@@ -37,6 +38,7 @@
   {% set _col_classes = {
     left: [
       'col-12',
+      'bcl-sidebar',
     ],
     right: [
       'col-12',
@@ -92,6 +94,9 @@
 
   <div class="container mt-md-4-75 mt-4">
     <div class="row">
+      {% block content_row %}
+        {{ content_row }}
+      {% endblock %}
     {% if _with_sidebar %}
       <div class="{{ _col_classes.left|join(' ') }}">
         {% block sidebar %}{% endblock %}

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

@@ -23,7 +23,9 @@
 {% set _title_attributes = _title_attributes ?: create_attribute() %}
 
 {% block content_top %}
+{% if filter_button %}
   {% include '@oe-bcl/bcl-button/button.html.twig' with filter_button only %}
+{% endif %}
   <div class="row">
     <div class="col-md-6 col-lg-8 align-self-center">
       {% if _title is not empty %}

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

@@ -5,13 +5,15 @@
   - attribution (string) (default: '')
   - cite (string) (default: '')
   - alignment (string) (default: 'left')
-    - options ["left", "center", "end"]
+    - options ['left', 'center', 'end']
+  - attributes (drupal attrs)
 #}
 
 {% set _quote = quote|default('') %}
 {% set _attribution = attribution|default('') %}
 {% set _cite = cite|default('') %}
 {% set _alignment = alignment|default('left') %}
+
 {% set _classes = [
   'text-' ~ _alignment,
   "bg-lighter",

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

@@ -1,7 +1,9 @@
 {% spaceless %}
 
 {# Parameters:
-  - links (array of objects of type link)
+  - links (array of objects of type link) (default: [])
+  - icon_path (string) (default: '')
+  - attributes (drupal attrs)
 #}
 
 {% set _classes = 'breadcrumb' %}

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

@@ -5,7 +5,7 @@
   - label (string) (default: '')
   - variant (string) (default: 'primary')
   - size (string) (default: 'md')
-    - options ["sm", "md", "lg"]
+    - options ['sm', 'md', 'lg']
   - type (string) (default: 'button')
   - outline (boolean) (default: false)
   - disabled (boolean) (default: false)
@@ -14,12 +14,13 @@
   - id (string) (default: '')
   - icon (icon object) (default: {}): predefined structure for Icon component
   - icon_position (string) (default: after)
-    - options ["after", "before"]
+    - options ['after', 'before']
   - icon_spacing (string) (default: '')
-    - options ["sm", "md", "lg"]
-  - clean_class (boolean) (default: false)
+    - options ['sm', 'md', 'lg']
   - spinner (spinner object) (default: {})
   - show_spinner (boolean) (default: false)
+  - clean_class (boolean) (default: false)
+  - attributes (drupal attrs)
 #}
 
 {% set _label = label|default('') %}
@@ -37,6 +38,7 @@
 {% set _show_spinner = show_spinner|default(false) %}
 {% set _spinner = spinner|default({}) %}
 {% set _clean_class = clean_class|default(false) %}
+
 {% set _classes = [] %}
 {% if _clean_class == false %}
   {% set _classes = _classes|merge(['btn', 'btn-' ~ (_outline ? 'outline-' : '') ~ _variant|e('html_attr')]) %}

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

@@ -3,11 +3,12 @@
 {# Parameters:
   - vertical (boolean) (default: false)
   - size (string) (default: 'md')
-    - options ["sm", "md", "lg"]
-  - toolbar (boolean) (default: 'false')
+    - options ['sm', 'md', 'lg']
   - aria_label (string) (default: '')
+  - toolbar (boolean) (default: 'false')
   - toolbar_aria_label (string) (default: '')
-  - items (array of arrays with objects of type button or form-input (input key mandatory when the object is a form-input))
+  - items (array of arrays with objects of type button or form-input (input key mandatory when the object is a form-input)) (default: [])
+  - attributes (drupal attrs)
 #}
 
 {% set _vertical = vertical|default(false) %}

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

@@ -2,7 +2,7 @@
 
 {# Parameters:
   - title: (string) (default: '')
-  - title_tag: (string) (default: 'h5')
+  - title_tag: (string) (default: 'h1')
   - title_link: (link object) (default: {})
   - title_attributes (drupal attrs)
   - subtitle (object) (default: {})
@@ -42,6 +42,8 @@
   - extra_classes_header (string) (default: '')
   - extra_classes_footer (string) (default: '')
   - badges (array of badge object) (default: [])
+  - links (array of link object) (default: [])
+  - attributes (drupal attrs)
 
   Blocks
     - card_date
@@ -73,19 +75,13 @@
 {% set _extra_classes_footer = extra_classes_footer|default('') %}
 {% set _badges = badges|default([]) %}
 {% set _links = links|default([]) %}
+
 {% set _classes = ['card'] %}
 {% if _text_color is not empty %}
   {% set _classes = _classes|merge(['text-' ~ _text_color]) %}
 {% endif %}
 {% if _variant is not empty %}
   {% set _classes = _classes|merge(['bg-' ~ _variant]) %}
-  {% if _text_color is empty %}
-    {% if _variant == 'warning' or _variant == 'info' or _variant == 'light' %}
-      {% set _classes = _classes|merge(['text-dark']) %}
-    {% else %}
-      {% set _classes = _classes|merge(['text-white']) %}
-    {% endif %}
-  {% endif %}
 {% endif %}
 {% if _border_variant is not empty %}
   {% set _classes = _classes|merge(['border-' ~ _border_variant]) %}
@@ -232,7 +228,7 @@
     {%- if _links is not empty and _links is iterable -%}
       <div class="mt-2-5 mb-2">
       {% for _link in _links %}
-        <div class="mb-3 mb-md-0 d-block d-md-inline-block me-4-5">
+        <div class="mb-3 mb-md-0 d-block d-md-inline-block me-md-4-5">
           {% include '@oe-bcl/bcl-link/link.html.twig' with _link only %}
         </div>
       {% endfor %}

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

@@ -3,7 +3,7 @@
 {# Parameters:
   - type (string) (default: 'group')
     options: ['group', 'grid', 'masonry']
-  - items (array of Card) (default: [])
+  - items (array of object type card) (default: [])
   - grid_columns (int) (default: 1)
     options: ['1', '2', '3']
   - responsiveness (string) (default: '')
@@ -14,6 +14,7 @@
     options: ['0', '1', '2', '3', '4', '5']
   - equal_height (boolean) (default: false)
   - cols_extra_classes (string) (default: '')
+  - attributes (drupal attrs)
 
   Blocks
     - card_layout_card
@@ -27,6 +28,7 @@
 {% set _gutter = gutter|default('') %}
 {% set _equal_height = equal_height|default(false) %}
 {% set _cols_extra_classes = cols_extra_classes|default('') %}
+
 {% set _cols_classes = 'col' %}
 
 {% if _cols_extra_classes is not empty %}

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

@@ -14,30 +14,32 @@
       caption_title (string) 
       interval (integer) (default: 0)
      }
-     ...
    ],
   - fade (boolean) (default: false)
   - with_controls (boolean) (default: true)
-  - previous_label (string) (default: '')
+  - prev_label (string) (default: '')
   - next_label (string) (default: '')
   - with_indicators (boolean) (default: false)
   - rounded_indicators (boolean) (default: false)
+  - disable_touch (boolean) (default: false)
+  - attributes (drupal attrs)
 #}
 
 {% set _id = id|default('') %}
+{% set _autoinit = autoinit ?? true %}
+{% set _autoplay = autoplay ?? true %}
+{% set _dark = dark|default(false) %}
+{% set _active_item = active_item|default(1) %}
 {% set _items = items|default([]) %}
+{% set _fade = fade|default(false) %}
 {% set _with_controls = with_controls ?? true %}
-{% set _active_item = active_item|default(1) %}
 {% set _prev_label = prev_label|default('') %}
 {% set _next_label = next_label|default('') %}
 {% set _with_indicators = with_indicators|default(false) %}
 {% set _rounded_indicators = rounded_indicators|default(false) %}
-{% set _classes = ['carousel slide'] %}
-{% set _autoinit = autoinit ?? true %}
-{% set _autoplay = autoplay ?? true %}
 {% set _disable_touch = disable_touch|default(false) %}
-{% set _fade = fade|default(false) %}
-{% set _dark = dark|default(false) %}
+
+{% set _classes = ['carousel slide'] %}
 
 {% if _fade %}
   {% set _classes = _classes|merge(['carousel-fade']) %}

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

@@ -31,6 +31,10 @@
 {% set _date = date|default({}) %}
 {% set _image_size = image_size|default('md') %}
 
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
 {% set _css_classes = [
   'bcl-content-banner',
 ] %}
@@ -54,10 +58,6 @@
   'gray': 'bg-lighter',
 } %}
 
-{% if attributes is empty %}
-  {% set attributes = create_attribute() %}
-{% endif %}
-
 {% set _body_classes = 'pt-0 px-0 pb-0' %}
 {% set _left_col_classes = '' %}
 {% set _right_col_classes = 'col-md-8 col-lg-9 col-xxl-8' %}
@@ -88,27 +88,30 @@
   title: _title,
   title_tag: _title_tag,
   title_link: _title_link,
-  title_attributes: _title_attributes.addClass('mb-0'),
+  title_attributes: _title_attributes.addClass('fs-1'),
   horizontal: true,
   horizontal_grid: _horizontal_classes,
   extra_classes_header: 'bg-transparent pt-0 pb-0 border-0',
   extra_classes_body: _body_classes,
+  attributes: create_attribute().addClass(['bg-transparent', 'border-0']),
 } %}
 
 {% set _css_classes = _css_classes|merge([_modifiers[_background]]) %}
-{% set _attributes = attributes.addClass(['bg-transparent', 'border-0']) %}
+{% set attributes = attributes.addClass(_css_classes) %}
 
 {% if _button is not empty %}
-  {% set _attributes = attributes.addClass(['col-md-10']) %}
+  {% set _card =  _card|merge({
+    attributes: _card.attributes.addClass(['col-md-10']),
+  }) %}
 {% endif %}
 
-<div class="{{ _css_classes|join(' ') }}">
+<div {{ attributes }}>
   <div class="container">
   {% include '@oe-bcl/bcl-card/card.html.twig' with _card %}
 
-    {%- block action_bar -%}
-      {{ _action_bar }}
-    {%- endblock -%}
+  {%- block action_bar -%}
+    {{ _action_bar }}
+  {%- endblock -%}
   </div>
 </div>
 

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

@@ -1,7 +1,7 @@
 {% spaceless %}
 
 {# Parameters:
-  - id (string) (default: '')
+  - id (string) (default: 'dropdown-' random(1000))
   - trigger (object of Button or Link component)
   - link (boolean) (default: false)
   - direction (string) (default: '')
@@ -32,6 +32,7 @@
         - button (boolean) - set to button
       }
     ]
+  - attributes (drupal attrs)
 #}
 
 {% set _id = id|default('dropdown-' ~ random(1000)) %}
@@ -42,6 +43,7 @@
 {% set _dark = dark|default(false) %}
 {% set _remove_wrapper = remove_wrapper|default(false) %}
 {% set _items = items|default([]) %}
+
 {% set _class = 'dropdown' %}
 {% set _dropdown_classes = ['dropdown-menu'] %}
 

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

@@ -87,21 +87,23 @@
       {% for _item in _items %}
       <div class="{{ _cols_classes }}">
       {% if _item.icon is defined and _item.icon is not empty and _display_icons %}
+        {% set _icon_attributes = _item.icon.attributes ?: create_attribute() %}
         {% set _item = _item|merge({
           icon: _item.icon|merge({
             path: _icon_path,
             size: 'l',
+            attributes: _icon_attributes.addClass('mb-2'),
           })
         }) %}
         {% include '@oe-bcl/bcl-icon/icon.html.twig' with _item.icon only %}
       {% endif %}
       {% if _item.title is defined and _item.title is not empty %}
-        <div class="fs-3 mt-2">
+        <div class="fs-4 fw-medium">
           {{- _item.title -}}
         </div>
       {% endif %}
       {% if _item.subtitle is defined and _item.subtitle is not empty %}
-        <div class="fs-5">
+        <div class="fs-5 fw-medium">
           {{- _item.subtitle -}}
         </div>
       {% endif %}