@openeuropa/bcl-twig-templates 0.24.0 → 0.25.0

package/package.json

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

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

@@ -2,6 +2,10 @@
 
 {#
   Parameters:
+  - title (string) (default: '')
+  - title_tag (string) (default: 'h2')
+  - title_link: (link object) (default: {})
+  - title_attributes: (drupal attrs)
   - id (int) (default: random(1000))
   - flush (boolean) (default: false)
   - items (array) (default: []): format: [
@@ -16,6 +20,10 @@
   - attributes (drupal attrs)
 #}
 
+{% 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 _id = id|default(random(1000)) %}
 {% set _flush = flush|default(false) %}
 {% set _items = items|default([]) %}
@@ -35,6 +43,15 @@
 <div
   {{ attributes }}
 >
+{%- 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 -%}
+
 {% for _item in _items %}
   {% set _open_item = _open_item_id == loop.index %}
   {% set _button_classes = ['accordion-button'] %}

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

@@ -1,6 +1,10 @@
 {% spaceless %}
 
 {# Parameters:
+  - title (string) (default: '')
+  - title_tag (string) (default: 'h2')
+  - title_link: (link object) (default: {})
+  - title_attributes: (drupal attrs)
   - quote (string) (default: '')
   - attribution (string) (default: '')
   - cite (string) (default: '')
@@ -9,6 +13,10 @@
   - attributes (drupal attrs)
 #}
 
+{% 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 _quote = quote|default('') %}
 {% set _attribution = attribution|default('') %}
 {% set _cite = cite|default('') %}
@@ -37,6 +45,15 @@
 
 {% set attributes = attributes.addClass(_classes) %}
 
+{%- 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 -%}
+
 <figure
   {{ attributes }}
 >

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

@@ -28,9 +28,10 @@
   - horizontal (boolean) (default: false)
   - horizontal_grid (object) (default: {})
     format: {
-      left_col_classes (default: 'col-4')
-      right_col_classes (default: 'col-8')
+      left_col_classes (default: 'bcl-card-start-col')
+      right_col_classes (default: 'col')
       gutter (default: '')
+      gutter (default: '') - options: ['small', 'large']
     }
   - variant (string) (default: '')
   - border_variant (string) (default: '')
@@ -63,8 +64,9 @@
 {% set _variant = variant|default('') %}
 {% set _horizontal = horizontal|default(false) %}
 {% set _horizontal_grid = horizontal_grid|default({
-  left_col_classes: 'col-4',
-  right_col_classes: 'col-8'
+  left_col_classes: 'bcl-card-start-col',
+  right_col_classes: 'col',
+  left_col_size: '',
 }) %}
 {% set _border_variant = border_variant|default('') %}
 {% set _text_color = text_color|default('') %}
@@ -170,7 +172,7 @@
   <div class='{{ _body_classes }}'>
   {% if _title is not empty %}
     {% if _title_attributes.class is empty %}
-      {% set _title_attributes = _title_attributes.addClass('fs-5') %}
+      {% set _title_attributes = _title_attributes.addClass('fs-4') %}
     {% endif %}
     {% set _title_attributes = _title_attributes.addClass('card-title') %}
     {% include '@oe-bcl/bcl-heading/heading.html.twig' with {

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

@@ -1,7 +1,10 @@
 {% spaceless %}
 
 {# Parameters:
-  - id (string) (default: '')
+  - title (string) (default: '')
+  - title_tag (string) (default: 'h2')
+  - title_link: (link object) (default: {})
+  - title_attributes: (drupal attrs)
   - autoplay (boolean) (default: true)
   - autoinit (boolean) (default: true)
   - dark (boolean) (default: false)
@@ -25,6 +28,10 @@
   - attributes (drupal attrs)
 #}
 
+{% 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 _id = id|default('') %}
 {% set _autoinit = autoinit ?? true %}
 {% set _autoplay = autoplay ?? true %}
@@ -39,7 +46,7 @@
 {% set _rounded_indicators = rounded_indicators|default(false) %}
 {% set _disable_touch = disable_touch|default(false) %}
 
-{% set _classes = ['carousel slide'] %}
+{% set _classes = ['carousel', 'slide'] %}
 
 {% if _fade %}
   {% set _classes = _classes|merge(['carousel-fade']) %}
@@ -74,6 +81,15 @@
 
 {% set attributes = attributes.addClass(_classes) %}
 
+{%- 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
   {{ attributes }}
 >

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

@@ -11,7 +11,7 @@
     - image (object)
     - image_size: (string)
     - date: (object)
-      options: ['sm', 'md', 'lg']
+      options: ['sm', 'md', 'lg', 'xl']
     - content: (string)
     - badges: (array of objects of type badge)
     - links: (array of objects of type link)
@@ -63,20 +63,23 @@
 {% set _right_col_classes = 'col-md-8 col-lg-9 col-xxl-8' %}
 
 {% if _image is not empty %}
-  {% set _left_col_classes = 'col-8 col-md-4 col-lg-3 offset-2 offset-md-0' %}
-  {% set _right_col_classes = 'col-md-8 col-lg-9 col-xxl-8' %}
+  {% set _left_col_classes = 'bcl-card-start-col' %}
   {% set _body_classes = 'pt-4 pt-md-0 px-0 px-md-3 pb-0' %}
   {% if _image_size == 'lg' %}
-    {% set _left_col_classes = 'col-md-4' %}
-    {% set _right_col_classes = 'col-md-8' %}
+    {% set _left_col_classes = _left_col_classes ~ ' bcl-size-large' %}
+    {% set _right_col_classes = 'col-12 col-md-7 col-lg-8 col-xl-9 col-xxl-8' %}
   {% endif %}
   {% if _image_size == 'sm' %}
-    {% set _left_col_classes = 'col-6 col-md-4 col-lg-2 offset-3 offset-md-0' %}
+    {% set _left_col_classes = _left_col_classes ~ ' bcl-size-small' %}
+  {% endif %}
+  {% if _image_size == 'xl' %}
+    {% set _left_col_classes = _left_col_classes ~ ' bcl-size-extra-large' %}
+    {% set _right_col_classes = 'col-12 col-lg-7 col-xl-8' %}
   {% 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' %}
+  {% set _left_col_classes = 'bcl-card-start-col' %}
+  {% set _right_col_classes = 'col-12 col-md col-xxl-9' %}
 {% endif %}
 
 {% set _horizontal_classes = {

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

@@ -2,37 +2,59 @@
 
 {#
   Parameters:
-  - title: (string) (default: "")
-  - title_tag: (string) (default: "h2")
+  - title: (string) (default: '')
+  - title_tag: (string) (default: 'h2')
   - title_link: (link object) (default: {})
   - title_attributes (drupal attrs)
+  - bordered (boolean) (default: '')
   - items (array) (default: []): format: [
       {
         term (object or array of object) -format: {
           icon: {} - icon object,
-          label: ""
+          label: ''
         }
         definition (block or array of string)
       },
       ...
     ]
   - variant (string) (default: '') 
-    - option: ["horizontal"]
+    - option: ['horizontal']
 #}
 
 {% set _title = title|default('') %}
 {% set _title_tag = title_tag|default('h2') %}
 {% set _title_link = title_link|default({}) %}
+{% set _bordered = bordered|default(false) %}
+{% set _title_link = title_link|default({}) %}
 {% set _title_attributes = title_attributes ?: create_attribute() %}
 {% set _items = items|default([]) %}
 {% set _variant = variant|default('') %}
 
+{% set _classes = ['bcl-description-list'] %}
+
 {% if attributes is empty %}
   {% set attributes = create_attribute() %}
 {% endif %}
 
+{% set _item_classes = '' %}
+
 {% if _variant == 'horizontal' %}
-  {% set attributes = attributes.addClass(["d-md-grid", "grid-3-9"]) %}
+  {% set _item_classes = 'd-md-grid grid-3-9' %}
+  {% if _bordered %}
+    {% set _item_classes = _item_classes ~ ' mb-2-5 pb-2-5' %}
+  {% else %}
+    {% set _item_classes = _item_classes ~ ' mb-3' %}
+  {% endif %}
+{% else %}
+  {% set _item_classes = 'mb-3' %}
+  {% if _bordered %}
+    {% set _item_classes = 'mb-2-5' %}
+    {% set _item_classes = _item_classes ~ ' pb-2-5' %}
+  {% endif %}
+{% endif %}
+
+{% if _bordered %}
+  {% set _item_classes = _item_classes ~ ' border-bottom' %}
 {% endif %}
 
 {% if _title is not empty %}
@@ -44,101 +66,120 @@
   } only %}
 {% endif %}
 
-<dl
+{% set attributes = attributes.addClass(_classes) %}
+
+<div
   {{ attributes }}
 >
   {% for _item in _items %}
-    {% if _item.term is not empty %}
-      {% if _item.term is iterable %}
-        {% if _variant == 'horizontal' %}
-          <div>
-        {% endif %}
-        {% for _term in _item.term %}
-          <dt
-          {% if _variant == 'horizontal' and _term.icon is not empty %}
-            class="d-flex"
-          {% endif %}
-          >
-            {%- if _term.icon is not empty -%}
-              {% set _icon_classes = ["me-2"] %}
-              {% if _variant == 'horizontal' %}
-                {% set _icon_classes = _icon_classes|merge(["mt-1"]) %}
-              {% endif %}
-              {% include '@oe-bcl/bcl-icon/icon.html.twig' with _term.icon|merge({
-                attributes: create_attribute().addClass(_icon_classes)
-              }) only %}
-              <p class="mb-0 d-inline-block">{{ _term.label }}</p>
-            {%- elseif _term.color is not empty -%}
-              <div class="d-flex align-items-center">
-                <span class="p-2 me-2 d-inline-block rounded-1 {{ _term.color }}"></span>{{- _term.label -}}
-              </div>
-            {%- else -%}
-              {{- _term.label -}}
-            {%- endif -%}
-          </dt>
-        {% endfor %}
+  {% if loop.last and _variant != 'horizontal' %}
+    {% set _item_classes = '' %}
+  {% endif %}
+  {% if _item.term is not empty %}
+  <dl
+  {% if _item_classes is not empty %}
+    class="{{ _item_classes }}"
+  {% endif %}
+  >
+    {% if _item.term is iterable %}
+    <dt>
+    {% for _term in _item.term %}
+      {%- if _item.term|length > 1 -%}
+      <div
+      {% if _variant == 'horizontal' and _term.icon is not empty %}
+        class="d-flex"
+      {% endif %}
+      >
+      {%- endif -%}
+      {%- if _term.icon is not empty -%}
+        {% set _icon_classes = ["me-2"] %}
         {% if _variant == 'horizontal' %}
-          </div>
+          {% set _icon_classes = _icon_classes|merge(["mt-1"]) %}
         {% endif %}
-      {% else %}
-        <dt
-          {% if _variant == 'horizontal' and _item.term.icon is not empty %}
-            class="d-flex"
-          {% endif %}
-        >
-          {%- if _item.term.icon is not empty -%}
-            {% set _icon_classes = ["me-2"] %}
-            {% if _variant == 'horizontal' %}
-              {% set _icon_classes = _icon_classes|merge(["mt-1"]) %}
-            {% endif %}
-            {%- include '@oe-bcl/bcl-icon/icon.html.twig' with _item.term.icon|merge({
-              attributes: create_attribute().addClass(_icon_classes)
-            }) only -%}
-            <p class="mb-0 d-inline-block">{{ _item.term.label }}</p>
-          {%- elseif _item.term.color is not empty -%}
-            <div class="d-flex align-items-center">
-              <span class="p-2 me-2 d-inline-block rounded-1 {{ _item.term.color }}"></span>{{- _item.term.label -}}
-            </div>
-          {%- else -%}
-            {{- _item.term.label -}}
-          {%- endif -%}
-        </dt>
+        {% include '@oe-bcl/bcl-icon/icon.html.twig' with _term.icon|merge({
+          attributes: create_attribute().addClass(_icon_classes)
+        }) only %}
+        <p class="mb-0 d-inline-block">{{ _term.label }}</p>
+      {%- elseif _term.color is not empty -%}
+        <div class="d-flex align-items-center">
+          <span class="p-2 me-2 d-inline-block rounded-1 {{ _term.color }}"></span>{{- _term.label -}}
+        </div>
+      {%- else -%}
+        {{- _term.label -}}
+      {%- endif -%}
+      {% if _item.term|length > 1 %}
+      </div>
+      {% endif %}
+    {% endfor %}
+    </dt>
+    {% else %}
+    <dt
+      {% if _variant == 'horizontal' and _item.term.icon is not empty %}
+        class="d-flex"
       {% endif %}
+    >
+    {%- if _item.term.icon is not empty -%}
+      {% set _icon_classes = ["me-2"] %}
+      {% if _variant == 'horizontal' %}
+        {% set _icon_classes = _icon_classes|merge(["mt-1"]) %}
+      {% endif %}
+      {%- include '@oe-bcl/bcl-icon/icon.html.twig' with _item.term.icon|merge({
+        attributes: create_attribute().addClass(_icon_classes)
+      }) only -%}
+      <p class="mb-0 d-inline-block">{{ _item.term.label }}</p>
+    {%- elseif _item.term.color is not empty -%}
+      <div class="d-flex align-items-center">
+        <span class="p-2 me-2 d-inline-block rounded-1 {{ _item.term.color }}"></span>{{- _item.term.label -}}
+      </div>
+    {%- else -%}
+      {{- _item.term.label -}}
+    {%- endif -%}
+    </dt>
     {% endif %}
-    {% if _item.definition is not empty %}
-      {% if _item.definition is iterable %}
-        {% if _variant == 'horizontal' %}
-          <dd>
+  {% endif %}
+  {% if _item.definition is not empty %}
+    {% if _item.definition is iterable %}
+      {% if _variant == 'horizontal' %}
+      <dd
+        {% if _bordered %}
+          class="mb-0"
         {% endif %}
-        {% for _definition in _item.definition %}
-          {% if _variant == 'horizontal' %}<div>{% else %}<dd>{% endif %}
-            {%- if _definition.button is defined -%}
-              {% include '@oe-bcl/bcl-button/button.html.twig' with _definition.button only %}
-            {%- elseif _definition.link is defined %}
-              {% include '@oe-bcl/bcl-link/link.html.twig' with _definition.link only -%}
+      >
+      {% endif %}
+      {% for _definition in _item.definition %}
+        {% if _variant == 'horizontal' %}<div>{% else %}<dd>{% endif %}
+          {%- if _definition.button is defined -%}
+            {% include '@oe-bcl/bcl-button/button.html.twig' with _definition.button only %}
+          {%- elseif _definition.link is defined %}
+            {% include '@oe-bcl/bcl-link/link.html.twig' with _definition.link only -%}
+          {%- else -%}
+            {%- if _definition.icon is defined -%}
+              {%- set _icon_classes = ["me-2"] -%}
+              {%- include '@oe-bcl/bcl-icon/icon.html.twig' with _definition.icon|merge({
+                attributes: create_attribute().addClass(_icon_classes)
+              }) only -%}
+              <p class="mb-0 d-inline-block">{{ _definition.label }}</p>
             {%- else -%}
-              {%- if _definition.icon is defined -%}
-                {%- set _icon_classes = ["me-2"] -%}
-                {%- include '@oe-bcl/bcl-icon/icon.html.twig' with _definition.icon|merge({
-                  attributes: create_attribute().addClass(_icon_classes)
-                }) only -%}
-               <p class="mb-0 d-inline-block">{{ _definition.label }}</p>
-              {%- else -%}
-                {{- _definition.label -}}
-              {%- endif -%}
+              {{- _definition.label -}}
             {%- endif -%}
-          {% if _variant == 'horizontal' %}</div>{% else %}</dd>{% endif %}
-        {% endfor %}
-        {% if _variant == 'horizontal' %}
-          </dd>
-        {% endif %}
-      {% else %}
-        <dd>
-          {%- block definition _item.definition -%}
-        </dd>
+          {%- endif -%}
+        {% if _variant == 'horizontal' %}</div>{% else %}</dd>{% endif %}
+      {% endfor %}
+      {% if _variant == 'horizontal' %}
+      </dd>
+      {% endif %}
+    {% else %}
+    <dd
+      {% if _bordered %}
+        class="mb-0"
       {% endif %}
+    >
+      {%- block definition _item.definition -%}
+    </dd>
     {% endif %}
+  </dl>
+  {% endif %}
   {% endfor %}
-</dl>
+</div>
 
 {% endspaceless %}

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

@@ -29,7 +29,7 @@
 {% 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 _classes = ['bcl-fact-figures', 'bcl-fact-figures--' ~ _variant] %}
 {% set _display_icons = display_icons ?? true %}
 {% set _items = items|default([]) %}
 {% set _grid_columns = grid_columns|default(1) %}
@@ -66,7 +66,7 @@
   {% set attributes = create_attribute() %}
 {% endif %}
 
-{% set attributes = attributes.addClass(_css_classes) %}
+{% set attributes = attributes.addClass(_classes) %}
 
 <div {{ attributes }}>
 {% if _title is not empty %}

package/templates/bcl-featured-media/featured-media.html.twig

@@ -2,8 +2,10 @@
 
 {# Parameters:
   - with_text (boolean) (default: false)
-  - title: (string) (default: '')
-  - title_tag: (string) (default: 'h2')
+  - title (string) (default: '')
+  - title_tag (string) (default: 'h2')
+  - title_link: (link object) (default: {})
+  - title_attributes: (drupal attrs)
   - image: (string) (default: "")
   - poster_image: (string) (default: "")
   - content: (string) (default: "")
@@ -34,6 +36,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 _with_text = with_text|default(false) %}
 {% set _wrapper_classes = 'bcl-featured-item' %}
 {% set _description = description|default('') %}
@@ -57,19 +61,27 @@
   {% set attributes = create_attribute() %}
 {% endif %}
 
+{% if _with_text %}
+  {% set _title_attributes = _title_attributes.addClass(['fw-bold', 'mb-4']) %}
+{% endif %}
+
 {% set attributes = attributes.addClass(["rounded", "overflow-hidden"]) %}
 
 {% if _with_text %}
 <div class="{{ _wrapper_classes }}">
-
-{% if _title is not empty %}
-  {% set _title_classes = 'fw-bold mb-4' %}
-  <{{ _title_tag }} class="{{ _title_classes }}">
-    {{- _title -}}
-  </{{ _title_tag }}>
+  <div class="row">
 {% endif %}
 
-  <div class="row">
+{%- 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 -%}
+
+{% if _with_text %}
     <div class="{{ _col_classes }} order-{{ _alignment == "right" ? '1' : '2' }}">
       {{- _description|default('') -}}
 

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

@@ -56,11 +56,13 @@
 {% set _translation = translation|default({}) %}
 {% set _icon_path = icon_path|default({}) %}
 
+{% set _classes = ['bcl-file'] %}
+
 {% if attributes is empty %}
   {% set attributes = create_attribute() %}
 {% endif %}
 
-{% set attributes = attributes.addClass(['bcl-file']) %}
+{% set attributes = attributes.addClass(_classes) %}
 
 {% if _icon is not empty %}
   {% set _container_classes = _container_classes ~ ' ms-2-5' %}

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

@@ -21,6 +21,8 @@
 {% set _variant = variant|default('vertical') %}
 {% set _links = links|default([])%}
 
+{% set _classes = ['bcl-links-block'] %}
+
 {% set _title_classes = ['pb-3', 'mb-3', 'border-bottom'] %}
 
 {% if attributes is empty %}
@@ -31,6 +33,8 @@
   {% set attributes = attributes.addClass(['bg-light', 'px-4', 'py-3', 'rounded-2']) %}
 {% endif %}
 
+{% set attributes = attributes.addClass(_classes) %}
+
 <div
   {{ attributes }}
 >

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

@@ -11,6 +11,8 @@
   - link: (object of type link)
   - alignment: (string) (default: '')
     options ['start', 'end', 'center', 'baseline', 'stretch']
+  - image_size: (string) (default: '')
+    options ['small', 'large', 'extra-large']
   - attributes (drupal attrs)
 #}
 
@@ -21,6 +23,7 @@
 {% set _items = items|default([]) %}
 {% set _variant = variant|default('default-1-col') %}
 {% set _alignment = alignment|default('') %}
+{% set _image_size = image_size|default('') %}
 {% set _link = link|default({}) %}
 
 {% set _classes = ['bcl-listing', 'bcl-listing--' ~ _variant] %}
@@ -52,19 +55,14 @@
 {% if _items is not empty %}
   {% for _card in _items %}
     {% set  _alignment_class = '' %}
-    {% set _max_width = '' %}
-    {% set _image = {} %}
-    {% if _card.image is not empty %}
-      {% set _image_classes = _card.image.classes ?: '' %}
-      {% if not _alignment == 'center' %}
-        {% set _image_classes = _image_classes ? _image_classes ~ ' mb-3' : 'mb-3' %}
-      {% endif %}
-      {% set _max_width = 'mw-listing-img' %}
-      {% set _card = _card|merge({image: _card.image|merge({
-        classes: _image_classes,
-      })}) %}
-    {% elseif _card.date is not empty %}
-      {% set _max_width = 'mw-col-date mb-3' %}
+    {% set _image_classes = _card.image.classes ?: '' %}
+    {% set _start_col_classes = 'bcl-card-start-col mb-3 mb-lg-0' %}
+    {% set _end_col_classes = 'col-12 col-md' %}
+    {% if _image_size is not empty %}
+      {% set _start_col_classes = _start_col_classes ~ ' bcl-size-' ~ _image_size %}
+    {% endif %}
+    {% if 'd-none' in _image_classes %}
+      {% set _start_col_classes = _start_col_classes ~ ' d-none d-md-block' %}
     {% endif %}
     {% if _alignment is not empty %}
       {% set _alignment_class = ' align-self-' ~ _alignment %}
@@ -76,7 +74,7 @@
       title_attributes: _card_title_attributes.addClass(['fs-5'])
     }) %}
 
-    {% if _variant == 'default-1-col' %}
+    {% if _variant == 'default-1-col' or _variant == 'default-2-col' or _variant == 'default-3-col'  %}
       {% set _card_classes = [
         'listing-item',
         'border-bottom',
@@ -87,45 +85,18 @@
       {% set _card = _card|merge({
         horizontal: true,
         extra_classes_body: 'p-0 pb-md-0 pb-3',
-        horizontal_grid: {
-          left_col_classes: 'col-md-3 col-lg-2 rounded ' ~ _max_width ~ _alignment_class,
-          right_col_classes: 'col-md-9 col-lg-10' ~ _alignment_class,
-        },
-        attributes: _card_attributes,
-      }) %}
-    {% endif %}
-
-    {% if _variant == 'default-2-col' or _variant == 'default-3-col' %}
-      {% set _card_classes = [
-        'listing-item',
-        'border-bottom',
-        'border-md-0',
-        'border-0',
-      ] %}
-      {% set _card_attributes = _card_attributes.addClass(_card_classes) %}
-      {% set _card = _card|merge({
-        extra_classes_body: 'p-0 pb-md-0 pb-3',
-        horizontal: true,
         attributes: _card_attributes,
+        horizontal_grid: {
+          left_col_classes: _start_col_classes ~ _alignment_class,
+          right_col_classes: _end_col_classes ~ _alignment_class,
+        }
       }) %}
-
+    
       {% if _variant == 'default-2-col' %}
-        {% set _card = _card|merge({
-          horizontal_grid: {
-            left_col_classes: 'col-xl-3 col-md-5 ' ~ _max_width ~ _alignment_class,
-            right_col_classes: 'col-xl-9 col-md-7' ~ _alignment_class,
-          },
-        }) %}
         {% set _card_layout = _card_layout|merge({
           responsive_columns: 2,
         }) %}
-      {% else %}
-        {% set _card = _card|merge({
-          horizontal_grid: {
-            left_col_classes: 'col-lg-4 col-md-6 ' ~ _max_width ~ _alignment_class,
-            right_col_classes: 'col-lg-8 col-md-6' ~ _alignment_class,
-          },
-        }) %}
+      {% elseif _variant == 'default-3-col' %}
         {% set _card_layout = _card_layout|merge({
           attributes: _card_layout.attributes.addClass(['row-cols-md-2']),
           responsive_columns: 3,
@@ -150,9 +121,19 @@
           extra_classes_body: "pt-0",
         }) %}
       {% endif %}
-     {% set _card_layout = _card_layout|merge({
-       cols_extra_classes: 'mt-4-5',
-     }) %}
+      {% set _card_layout = _card_layout|merge({
+        cols_extra_classes: 'mt-4-5',
+      }) %}
+      {% if _card.image is not empty %}
+        {% set _image_classes = _card.image.classes ?: '' %}
+        {% if not _alignment == 'center' %}
+          {% set _image_classes = _image_classes ? _image_classes ~ ' mb-3' : 'mb-3' %}
+        {% endif %}
+        {% set _card = _card|merge({image: _card.image|merge({
+          classes: _image_classes,
+        })}) %}
+      {% endif %}
+
     {% endif %}
 
     {% if _variant == 'highlight-2-col' or variant == 'highlight-3-col' %}
@@ -173,6 +154,15 @@
           extra_classes_body: 'pt-0',
         }) %}
       {% endif %}
+      {% if _card.image is not empty %}
+        {% set _image_classes = _card.image.classes ?: '' %}
+        {% if not _alignment == 'center' %}
+          {% set _image_classes = _image_classes ? _image_classes ~ ' mb-3' : 'mb-3' %}
+        {% endif %}
+        {% set _card = _card|merge({image: _card.image|merge({
+          classes: _image_classes,
+        })}) %}
+      {% endif %}
       {% set _card_layout = _card_layout|merge({ gutter: '4' }) %}
       {% if variant == 'highlight-2-col' %}
         {% set _card_layout = _card_layout|merge({ responsive_columns: 2 }) %}

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

@@ -32,7 +32,7 @@
 {% set _body = body|default('') %}
 {% set _footer = footer|default('') %}
 
-{% set _classes = ['modal fade'] %}
+{% set _classes = ['modal', 'fade'] %}
 
 {% if attributes is empty %}
   {% set attributes = create_attribute() %}

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

@@ -5,11 +5,7 @@
 {% endblock %}
 
 {% block content %}
-  <p id="content">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.
-  Sed posuere at leo sit amet placerat. Sed dapibus viverra urna ac pretium. Praesent et laoreet erat, eget volutpat metus. Duis ac augue
-  sed tortor elementum dignissim in sit amet velit. Nullam nec viverra mi.
+  <p id="content">{{ get_dummy_text(6) }}
   </p>
   <h2 id="item-1" class="my-4">Section 1</h2>
   {% if featured_item %}
@@ -26,12 +22,7 @@
 
   <h2 id="item-2" class="my-4">Section 2</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.
-  Sed posuere at leo sit amet placerat. Sed dapibus viverra urna ac pretium. Praesent et laoreet erat, eget volutpat metus. Duis ac augue
-  sed tortor elementum dignissim in sit amet velit. Nullam nec viverra mi.
-  </p>
+  {{ get_dummy_text(6, true) }}
 
   {% if blockquote %}
     {% include '@oe-bcl/bcl-blockquote/blockquote.html.twig' with blockquote only %}
@@ -43,21 +34,11 @@
     {% include '@oe-bcl/bcl-timeline/timeline.html.twig' with timeline only %}
   {% endif %}
 
-  <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.
-  Sed posuere at leo sit amet placerat. Sed dapibus viverra urna ac pretium. Praesent et laoreet erat, eget volutpat metus. Duis ac augue
-  sed tortor elementum dignissim in sit amet velit. Nullam nec viverra mi.
-  </p>
+  {{ get_dummy_text(8, true) }}
 
   <h2 id="item-3" class="my-4">Section 3</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.
-  Sed posuere at leo sit amet placerat. Sed dapibus viverra urna ac pretium. Praesent et laoreet erat, eget volutpat metus. Duis ac augue
-  sed tortor elementum dignissim in sit amet velit. Nullam nec viverra mi.
-  </p>
+  {{ get_dummy_text(4, true) }}
 
   {% include '@oe-bcl/bcl-file/file.html.twig' with files[0] only %}
   {% include '@oe-bcl/bcl-file/file.html.twig' with files[1] only %}

package/templates/bcl-project/project-lists.html.twig

@@ -57,7 +57,7 @@
       {% endif %}
       {% if not loop.last %}
         {% set _list = _list|merge({
-            attributes: _list.attributes.addClass(['border-bottom', 'pb-3'])
+            attributes: _list.attributes.addClass(['border-bottom', 'mb-3'])
           })
         %}
       {% endif %}

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

@@ -14,7 +14,7 @@
 {% set _submit = submit|default({}) %}
 {% set _input = input|default({}) %}
 
-{% set _classes = ["bcl-search-form"] %}
+{% set _classes = ['bcl-search-form'] %}
 
 {% if _pill %}
   {% set _classes = _classes|merge(['rounded']) %}

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

@@ -11,11 +11,13 @@
 {% set _content = content|default('') %}
 {% set _button = button|default({}) %}
 
+{% set _classes = ['bcl-subscription-block', 'bg-light', 'px-4-5', 'pt-4', 'pb-4-5'] %}
+
 {% if attributes is empty %}
   {% set attributes = create_attribute() %}
 {% endif %}
 
-{% set attributes = attributes.addClass(['bg-light', 'px-4-5', 'pt-4', 'pb-4-5']) %}
+{% set attributes = attributes.addClass(_classes) %}
 
 <div
   {{ attributes }}

package/templates/bcl-user/user-compact.html.twig

@@ -13,13 +13,14 @@
   - infos (array of strings) (default: [])
 #}
 
-{% set _picture_classes = "rounded-pill" %}
+{% set _picture_classes = 'rounded-pill' %}
+{% set _classes = ['bcl-user-compact', 'd-flex', 'mb-3'] %}
 
 {% if attributes is empty %}
   {% set attributes = create_attribute() %}
 {% endif %}
 
-{% set attributes = attributes.addClass(["d-flex", "mb-3"]) %}
+{% set attributes = attributes.addClass(_classes) %}
 
 {% if picture is not empty and picture.classes is not empty %}
   {% set _picture_classes = _picture_classes ~ ' ' ~ picture.classes %}

package/templates/bcl-user/user-terms.html.twig

@@ -1,11 +1,11 @@
 {% extends "@oe-bcl/bcl-base-templates/content-type.html.twig" %}
 
 {% block content %}
-  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse volutpat ultricies massa, a dapibus libero porta nec. Sed facilisis dictum vestibulum. Fusce commodo hendrerit diam, pretium tempus leo varius sit amet. Etiam interdum, orci at sagittis luctus, lorem libero tempus mauris, a fermentum libero orci semper lacus. Duis tristique fringilla magna, eu egestas dolor molestie non. </p>
+  {{ get_dummy_text(4, true) }}
   <ul class="mb-4-5">
-    <li>Fusce commodo hendrerit diam, pretium tempus leo varius sit amet. </li>
-    <li>Etiam interdum, orci at sagittis luctus, lorem libero tempus mauris, </li>
-    <li>A fermentum libero orci semper lacus. Duis tristique fringilla magna, eu egestas dolor molestie non. </li>
+    <li>{{ get_dummy_text() }}</li>
+    <li>{{ get_dummy_text() }}</li>
+    <li>{{ get_dummy_text() }}</li>
   </ul>
   {% include '@oe-bcl/bcl-form/form.html.twig' with terms_form only %}
 {% endblock %}

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

@@ -100,10 +100,10 @@
       <h1 class="my-4-5">Edit my profile</h1>
       <h2 class="mb-4-5">Profile image</h2>
       <div class="row">
-        <div class="offset-3 col-6 offset-lg-0 col-lg-3">
+        <div class="bcl-card-start-col bcl-size-large mx-auto ms-md-2-5">
           <img src="https://picsum.photos/seed/1002/400/400" class="img-fluid" alt="profile-image">
         </div>
-        <div class="col align-self-center">
+        <div class="col-12 col-md align-self-center">
           <div class="mt-3 text-center text-md-start">
             {% include '@oe-bcl/bcl-form-input/form-input.html.twig' with edit.image_upload_input only %}
             <div class="d-md-inline-block">