@openeuropa/bcl-twig-templates 0.20.0 → 0.23.0

package/package.json

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

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

@@ -37,6 +37,14 @@
   {% set _classes = _classes|merge(['fade', 'show']) %}
 {% endif %}
 
+{% set _classes = _classes|merge(['text-dark']) %}
+
+{% set _icon_classes = ['flex-shrink-0 me-3 mt-1 align-self-start' ] %}
+
+{% if _variant != 'light' %}
+  {% set _icon_classes = _icon_classes|merge(['text-' ~ _variant]) %}
+{% endif %}
+
 {% if attributes is empty %}
   {% set attributes = create_attribute() %}
 {% endif %}
@@ -49,7 +57,7 @@
     name: _icon_name ?: _icon_names[_variant],
     size: 's',
     path: _icon_path,
-    attributes: create_attribute().addClass(['flex-shrink-0 me-3 mt-1 align-self-start']),
+    attributes: create_attribute().addClass(_icon_classes),
   } only %}
 {% endif %}
   <div class="alert-content flex-grow-1">

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,8 @@
 
 {% 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({}) %}
 {% set _image = image|default('') %}
@@ -28,11 +32,13 @@
   {% set _content_class = _content_class ~ " " ~ _content_classes %}
 {% endif %}
 
-{% set _title_classes = "display-6" %}
+{% set _title_classes = ['display-6'] %}
 {% if _description is not empty or _link is not empty %}
-  {% set _title_classes = _title_classes ~ " mb-3" %}
+  {% set _title_classes = _title_classes|merge(['mb-3']) %}
 {% endif %}
 
+{% set _title_attributes = _title_attributes.addClass(_title_classes) %}
+
 {% set _classes = [
   'bcl-banner',
   _shade ? 'shade',
@@ -53,14 +59,19 @@
   {% endif %}
   <div class="container">
     <div class="{{ _content_class }}">
-    {% if _title is not empty %}
-      <{{ _title_tag }} class="{{ _title_classes }}">{{ _title }}</{{ _title_tag }}>
-      {% if _description is not empty %}
-      <p class="mb-4">{{ _description }}</p>
-      {% endif %}
-      {% if _link.path %}
-        {% include '@oe-bcl/bcl-link/link.html.twig' with _link only %}
+      {% 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 _description is not empty %}
+      <p class="mb-4">{{ _description }}</p>
+    {% endif %}
+    {% if _link.path %}
+      {% include '@oe-bcl/bcl-link/link.html.twig' with _link only %}
     {% endif %}
     </div>
   </div>

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,53 +1,63 @@
 {#
   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">
-      <h4>
-        <span class="text-capitalize">
-          {{- _page_title -}}
-        </span>
-        ({{ listing.items.length }})
-      </h4>
-    </div>
-    <div class="col-md-12 order-md-2 mt-3 mt-md-1">
-      {% if badges is not empty and badges is iterable %}
-        {% for badge in badges %}
-          {% include '@oe-bcl/bcl-badge/badge.html.twig' with badge|merge({
-            attributes: create_attribute().addClass(["mb-2", "me-2"])
-          }) only %}
-        {% endfor %}
+    <div class="col-md-6 col-lg-8 align-self-center">
+      {% 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">
+      {% for badge in badges %}
+        {% include '@oe-bcl/bcl-badge/badge.html.twig' with badge|merge({
+          attributes: create_attribute().addClass(["mb-2", "me-2"])
+        }) only %}
+      {% endfor %}
+      </div>
+    {% endif %}
     <div class="col-md-6 col-lg-4 mt-3 mt-md-0">
       <div class="float-md-end d-md-flex align-items-center mb-4 mb-md-0">
         {% include '@oe-bcl/bcl-select/select.html.twig' with sort_select|merge({
-          attributes: create_attribute().addClass(['ms-md-2 mb-2']),
+          attributes: create_attribute().addClass(['ms-md-2']),
         }) only %}
       </div>
     </div>
   </div>
-  <hr class="d-none d-md-block mb-4"/>
+  <hr class="d-none d-md-block mb-4-75"/>
 {% endblock %}
 
 {% 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: '',
@@ -47,10 +45,14 @@
 
   Blocks
     - card_date
-    - card_badge
+    - card_badges
+    - 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('') %}
@@ -70,6 +72,7 @@
 {% set _extra_classes_header = extra_classes_header|default('') %}
 {% 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]) %}
@@ -114,7 +117,7 @@
 
 {% set attributes = attributes.addClass(_classes) %}
 
-<div
+<article
   {{ attributes }}
 >
 {% if _card_header is not empty %}
@@ -169,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 }}
@@ -198,31 +203,42 @@
   {%- if _content is not empty -%}
     {{- _content -}}
   {%- endif -%}
-  {%- if _badges is not empty and _badges is iterable -%}
-    <div class="mt-2-5">
-    {% for _badge in _badges %}
-      {% if _badge.attributes is empty %}
-        {% set _badge = _badge|merge({
-          attributes: create_attribute()
-        }) %}
-      {% endif %}
-      {% set _badge = _badge|merge({
-          attributes: _badge.attributes.addClass('mb-2')
-        })
-      %}
-      {% if not loop.last %}
+  {% block card_badges %}
+    {%- if _badges is not empty and _badges is iterable -%}
+      <div class="mt-2-5">
+      {% for _badge in _badges %}
+        {% if _badge.attributes is empty %}
+          {% set _badge = _badge|merge({
+            attributes: create_attribute()
+          }) %}
+        {% endif %}
         {% set _badge = _badge|merge({
-            attributes: _badge.attributes.addClass('me-2')
+            attributes: _badge.attributes.addClass('mb-2')
           })
         %}
-      {% endif %}
-      {% block card_badge %}
+        {% if not loop.last %}
+          {% set _badge = _badge|merge({
+              attributes: _badge.attributes.addClass('me-2')
+            })
+          %}
+        {% endif %}
         {% include '@oe-bcl/bcl-badge/badge.html.twig' with _badge only %}
-      {% endblock %}
-      
-    {% endfor %}
-    </div>
-  {%- endif -%}
+        
+      {% endfor %}
+      </div>
+    {%- endif -%}
+  {% endblock %}
+  {% block card_links %}
+    {%- 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">
+          {% include '@oe-bcl/bcl-link/link.html.twig' with _link only %}
+        </div>
+      {% endfor %}
+      </div>
+    {%- endif -%}
+  {% endblock %}
   </div>
 {% if _horizontal %}
 </div>
@@ -257,6 +273,6 @@
     {{- _card_footer -}}
   </div>
 {% endif %}
-</div>
+</article>
 
 {% endspaceless %}

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

@@ -11,6 +11,7 @@
       image: (string) <img> tag
       caption (string)
       caption_classes (string)
+      caption_title (string) 
       interval (integer) (default: 0)
      }
      ...
@@ -20,6 +21,7 @@
   - previous_label (string) (default: '')
   - next_label (string) (default: '')
   - with_indicators (boolean) (default: false)
+  - rounded_indicators (boolean) (default: false)
 #}
 
 {% set _id = id|default('') %}
@@ -29,6 +31,7 @@
 {% 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 %}
@@ -59,6 +62,10 @@
   {% set attributes = attributes.setAttribute('data-bs-touch', 'false') %}
 {% endif %}
 
+{% if _rounded_indicators %}
+  {% set attributes = attributes.addClass('rounded-indicators') %}
+{% endif %}
+
 {% if not _autoplay %}
   {% set attributes = attributes.setAttribute('data-bs-interval', 'false') %}
 {% endif %}
@@ -69,7 +76,7 @@
   {{ attributes }}
 >
 {% if _with_indicators %}
-  <div class="carousel-indicators">
+  <div class="carousel-indicators d-none d-md-flex">
   {% for _i in 0..(_items|length - 1) %}
     {% set button_attributes = create_attribute()
                               .setAttribute('aria-label', 'Slide ' ~ (_i + 1))
@@ -102,15 +109,29 @@
     {% if _item.image is defined and _item.image is not empty %}
       {{ _item.image }}
     {% endif %}
-    {% if _item.caption is defined and _item.caption is not empty %}
+    {% if (_item.caption is defined and _item.caption is not empty) or (_item.link is defined and _item.link is not empty) %}
       {% set _caption_classes = 'carousel-caption' %}
-      {% if _item.caption_classes is defined and _item.caption_classes is not empty %}
-        {% set _caption_classes = _caption_classes ~ ' ' ~ _item.caption_classes %}
+      {% if _item.caption is not empty and _item.link is empty %}
+        {% set _caption_classes = _caption_classes ~ ' d-none d-md-block' %}
       {% endif %}
       <div
         class="{{ _caption_classes }}"
       >
-        {{- _item.caption -}}
+        {% if _item.caption is not empty or _item.caption_title is not empty %}
+          {% if _item.caption_classes is defined and _item.caption_classes is not empty %}
+            <div class="{{ _item.caption_classes }}">
+          {% endif %}
+          {% if _item.caption_title is not empty %}
+            <h5>{{ _item.caption_title }}</h5>
+          {% endif %}
+            {{- _item.caption -}}
+          {% if _item.caption_classes is defined and _item.caption_classes is not empty %}
+            </div>
+          {% endif %}
+        {% endif %}
+        {% if _item.link is defined and _item.link is not empty %}
+          {% include '@oe-bcl/bcl-link/link.html.twig' with _item.link only %}
+        {% endif %}
       </div>
     {% endif %}
     </div>