@openeuropa/bcl-twig-templates 0.3727.202505141200 → 0.3732.202601071600

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

@@ -1,6 +1,6 @@
-{% extends "@oe-bcl/bcl-base-templates/content-type.html.twig" %}
+{% extends "@oe-bcl/bcl-base-templates/content-type.html.twig" -%}
 
-{% block banner %}
+{%- block banner %}
 <div class="container">
   {% if banner is not empty %}
   <div class="mt-4 mt-md-5">
@@ -70,9 +70,9 @@
   </div>
   {% endif %}
 </div>
-{% endblock %}
+{%- endblock -%}
 
-{% block content %}
+{%- block content %}
   {% if recent is not empty and members is not empty %}
   <div class="row mt-3">
     <div class="col-md-8">
@@ -80,7 +80,7 @@
       {% include '@oe-bcl/bcl-recent-activities/recent-activities.html.twig' with recent.block_data only %}
     </div>
     <div class="col-md-4">
-      <h2 class="mt-4 mt-md-0 mb-4 pb-2">{{ members.title}}</h2>
+      <h2 class="mt-4 mt-md-0 mb-4 pb-2">{{ members.title }}</h2>
       {% if members.profiles is not empty and members.profiles is iterable %}
         {% for _profile in members.profiles %}
           {% include '@oe-bcl/bcl-user/user-compact.html.twig' with _profile only %}
@@ -93,9 +93,9 @@
   </div>
   {% endif %}
   {% if contributions is not empty %}
-    <h2 class="my-4 pt-3 pb-2">{{ contributions.title}}</h2>
+    <h2 class="my-4 pt-3 pb-2">{{ contributions.title }}</h2>
     {% if contributions.listing is not empty %}
       {% include '@oe-bcl/bcl-listing/listing.html.twig' with contributions.listing only %}
     {% endif %}
   {% endif %}
-{% endblock %}
+{%- endblock -%}

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

@@ -1,6 +1,6 @@
-{% extends "@oe-bcl/bcl-base-templates/listing-page.html.twig" %}
+{% extends "@oe-bcl/bcl-base-templates/listing-page.html.twig" -%}
 
-{% block banner %}
+{%- block banner %}
 <div class="container mt-4 mt-md-5">
   <div class="col-xxl-11">
     <div class="p-md-3-5 pt-3 bg-lighter d-md-flex n-mx-container">
@@ -24,4 +24,4 @@
   {% endif %}
   </div>
 </div>
-{% endblock %}
+{%- endblock -%}

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

@@ -17,6 +17,8 @@
   - language_modal (object) (default: {})
   - light (boolean) (default: false)
   - modals (modal[]) (default: [])
+  - toggler_attributes (drupal attrs)
+  - icon_path (string) (default: '')
   - attributes (drupal attrs)
 #}
 
@@ -25,10 +27,13 @@
 {% set _project_logo = project_logo|default({}) %}
 {% set _site_name = site_name|default('') %}
 {% set _project_link = project_link|default('') %}
+{% set _navbar_id = navbar_id|default('header-navbar-' ~ random(100)) %}
 {% set _head = head|default({}) %}
 {% set _breadcrumbs = breadcrumbs|default({}) %}
 {% set _language_modal = language_modal|default({}) %}
 {% set _light = light ?? false %}
+{% set _toggler_attributes = toggler_attributes ?: create_attribute() %}
+{% set _icon_path = icon_path|default('') %}
 {% set _modals = modals|default([]) %}
 
 {% set _site_name_classes = 'bcl-header__site-name' %}
@@ -37,7 +42,7 @@
   {% set attributes = create_attribute() %}
 {% endif %}
 
-{% set attributes = attributes.addClass(['bcl-header', 'bcl-header--' ~ _variant]) %}
+{% set attributes = attributes.addClass(['bcl-header', 'bcl-header--' ~ _variant, 'shadow-sm']) %}
 
 {% if site_name_classes is not empty %}
   {% set _site_name_classes = _site_name_classes ~ ' ' ~ site_name_classes %}
@@ -48,62 +53,81 @@
   {% set _project_classes = _project_classes ~ ' light' %}
 {% endif %}
 
+{% set toggler_attributes = _toggler_attributes.addClass(['bcl-navbar-toggler', 'd-lg-none'])
+  .setAttribute('type', 'button')
+  .setAttribute('data-bs-toggle', 'collapse')
+  .setAttribute('data-bs-target', '#' ~ navbar_id)
+  .setAttribute('aria-controls', navbar_id)
+  .setAttribute('aria-expanded', 'false')
+%}
+
+{% set navbar_toggle_button %}
+  <button
+    {{ toggler_attributes }}
+  >
+    {% include '@oe-bcl/bcl-icon/icon.html.twig' with {
+      name: 'list',
+      size: 'fluid',
+      path: _icon_path,
+      attributes: create_attribute().addClass(['default-icon']),
+    } only %}
+    {% include '@oe-bcl/bcl-icon/icon.html.twig' with {
+      name: 'x',
+      size: 'fluid',
+      path: _icon_path,
+      attributes: create_attribute().addClass(['active-icon']),
+    } only %}
+  </button>
+{% endset %}
+
 <header
   {{ attributes }}
 >
-  <!-- navbar_settings -->
-  {% if _head is not empty %}
-    {% include '@oe-bcl/bcl-navbar/navbar.html.twig' with _head only %}
-  {% endif %}
-
-  <!-- project name -->
-  {% if _project_logo is not empty or _site_name is not empty %}
-  <div class="{{ _project_classes  }}">
-    <div class="container">
-    {% if _project_link is not empty %}
-      <a
-        class="d-inline-block"
-        href="{{ _project_link }}"
-      >
-    {% endif %}
-      {% if _project_logo is not empty %}
+  <nav
+    {{ _head.attributes.addClass(['navbar', 'navbar-expand-lg', 'navbar-light']) }}>
+    <div class='container'>
+    {% if _head.brand is not empty %}
+      <a class='navbar-brand' href='{{ _head.brand.link }}'>
+      {% for logo in _head.brand.logos %}
         <img
-        {% if _project_logo.path is not empty %}
-          src="{{ _project_logo.path }}"
-        {% endif %}
-        {% if _project_logo.alt is not empty %}
-          alt="{{ _project_logo.alt }}"
-        {% endif %}
-        {% if _project_logo.classes is not empty %}
-          class="{{ _project_logo.classes }}"
-        {% endif %}
+          src='{{ logo.src }}'
+          {% if logo.alt is not empty %}
+          alt='{{ logo.alt }}'
+          {% endif %}
+          {% if logo.class is not empty %}
+          class='{{ logo.class }}'
+          {% endif %}
         />
-      {% endif %}
-      {% if _site_name is not empty %}
-        <span class="{{ _site_name_classes }}">
-        {{- _site_name -}}
-        </span>
-      {% endif %}
-    {% if _project_link is not empty %}
+      {% endfor %}
       </a>
     {% endif %}
+      {{ navbar_toggle_button }}
+    </div>
+  </nav>
+
+  <!-- site name -->
+  <div class="bcl-header__site-name" id="site-name-heading">
+    <div class="container">
+      <span class="h5 py-3-5 border-top-subtle mb-0 d-block">{{ _site_name }}</span>
     </div>
   </div>
-  {% endif %}
 
   <!-- navbar -->
   {% if _navbar is not empty %}
-    {% include '@oe-bcl/bcl-navbar/navbar.html.twig' with _navbar only %}
-  {% endif %}
-
-  <!-- breadcrumbs -->
-  {% if _breadcrumbs is not empty %}
-    <div class="container">
-      {% include '@oe-bcl/bcl-breadcrumb/breadcrumb.html.twig' with _breadcrumbs only %}
-    </div>
+    {% include '@oe-bcl/bcl-navbar/navbar.html.twig' with _navbar|merge({
+      disable_collapse: true,
+      attributes: create_attribute().addClass('bcl-header__navbar collapse navbar-collapse').setAttribute('id', _navbar_id).setAttribute('aria-label', 'Main Navigation'),
+    }) only %}
   {% endif %}
 </header>
 
+<!-- breadcrumbs -->
+{% if _breadcrumbs is not empty %}
+  <div class="container">
+    {% include '@oe-bcl/bcl-breadcrumb/breadcrumb.html.twig' with _breadcrumbs only %}
+  </div>
+{% endif %}
+
 {% for modal in _modals %}
   {% include '@oe-bcl/bcl-modal/modal.html.twig' with modal only %}
 {% endfor %}

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

@@ -13,7 +13,7 @@
 
 {% if attributes is empty %}
   {% set attributes = create_attribute() %}
-{%  endif %}
+{% endif %}
 
 {% if attributes.class is empty %}
   {% set attributes = attributes.addClass(['mb-4']) %}
@@ -26,7 +26,7 @@
 {% endif %}
 
 {% if _title is not empty or _title_link is not empty %}
-<{{ _title_tag }} 
+<{{ _title_tag }}
   {{- attributes -}}
 >
 {%- if _title_link is not empty -%}

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

@@ -29,9 +29,14 @@ Parameters:
 {% endif %}
 
 {% set attributes = attributes.addClass(['bcl-inpage-navigation', 'position-sticky']).setAttribute('id', _id) %}
-{% set title_attributes = _title_attributes.addClass('mb-0') %}
-{% set _title_content %}
-  {{ _title }}
+
+{% if not attributes.hasAttribute('aria-label') and not attributes.hasAttribute('aria-labelledby') %}
+  {% set attributes = attributes.setAttribute('aria-labelledby', _dropdown_id) %}
+{% endif %}
+
+{% set title_attributes = _title_attributes.addClass(['mb-0', 'd-none', 'd-md-block']) %}
+{% set _button_content %}
+  {{- _title }}
   {%- include '@oe-bcl/bcl-icon/icon.html.twig' with {
     name: 'chevron-down',
     size: 's',
@@ -45,21 +50,25 @@ Parameters:
   {% set _classes = _classes|merge(['dynamic-active']) %}
 {% endif %}
 
-<nav {{ attributes.addClass(_classes) }}>
+<nav{{ attributes.addClass(_classes) }}>
   {% set trigger_attributes = create_attribute()
                               .setAttribute('aria-expanded', 'false')
                               .setAttribute('type', 'button')
                               .setAttribute('id', _dropdown_id)
                               .setAttribute('data-bs-toggle', 'dropdown')
-                              .addClass(['dropdown-toggle']) %}
+                              .addClass(['dropdown-toggle', 'h2', 'd-md-none']) %}
+  {% include '@oe-bcl/bcl-button/button.html.twig' with {
+    label: _button_content,
+    clean_class: true,
+    attributes: trigger_attributes,
+  } only %}
   {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
-    title: _title_content,
+    title: _title,
     title_tag: _title_tag,
     title_link: _title_link,
-    attributes: _title_attributes
-                .merge(trigger_attributes),
+    attributes: _title_attributes,
   } only %}
-  <div class="dropdown-menu" aria-labelledby="{{ _dropdown_id }}">
+  <div class="dropdown-menu">
     {% include '@oe-bcl/bcl-navigation/navigation.html.twig' with {
       'pills': true,
       'vertical': true,

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

@@ -1,20 +1,18 @@
-{% extends "@oe-bcl/bcl-base-templates/content-type.html.twig" %}
+{% extends "@oe-bcl/bcl-base-templates/content-type.html.twig" -%}
 
-{% block banner %}
+{%- block banner %}
   {% if banner is defined %}
     {% include '@oe-bcl/bcl-banner/banner.html.twig' with banner only %}
   {% endif %}
-{% endblock %}
-
-{% block content %}
-
+{%- endblock -%}
+{%- block content %}
 <div class="container">
   {% if featured_section is defined %}
     <div class="my-4">
       <h2 class="mb-4">{{ featured_section.title }}</h2>
       <div class="row">
         <div class="col-12 col-md-6">
-          {{ featured_section.content }}
+          {{- featured_section.content -}}
         </div>
         <div class="col-12 col-md-6">
           {% include '@oe-bcl/bcl-featured-media/featured-media.html.twig' with featured_section.featured_media only %}
@@ -40,7 +38,7 @@
       <h2 class="mb-4">{{ activity_featured.title }}</h2>
       <div class="row">
         <div class="col-12 col-md-6">
-          {{ activity_featured.content }}
+          {{- activity_featured.content -}}
         </div>
         <div class="col-12 col-md-6">
           {% include '@oe-bcl/bcl-featured-media/featured-media.html.twig' with activity_featured.featured_media only %}
@@ -55,5 +53,4 @@
     </div>
   {% endif %}
 </div>
-
-{% endblock %}
+{%- endblock -%}

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

@@ -19,7 +19,7 @@
 {% block header %}
   {% if size == 'fullscreen' %}
   <div class="container">
-    {% if variant == 'eu' or variant == 'ec' %}
+    {% if _variant == 'eu' or _variant == 'ec' %}
     <div class="border-bottom mx-n3 px-3 px-md-0 pt-md-4-5">
       <div class="py-3-5 px-3 px-sm-0 px-md-3">
     {% endif %}
@@ -43,7 +43,7 @@
   ></button>
   {% if size == 'fullscreen' %}
     </div>
-    {% if variant == 'eu' or variant == 'ec' %}
+    {% if _variant == 'eu' or _variant == 'ec' %}
       </div>
     </div>
     {% endif %}
@@ -52,7 +52,60 @@
 {% endblock %}
 
 {% block body %}
-  {% include '@oe-bcl/bcl-language-list/language-list.html.twig' with {
-    attributes: create_attribute()
-  } %}
+  {% set attributes = create_attribute().addClass(['bcl-language-list', 'bcl-language-list--' ~ _variant]) %}
+  <div
+    {{ attributes }}
+  >
+    {% if _logo is not empty %}
+    <div class="container">
+      {% if _title is empty %}
+      <div class="text-center">
+      {% endif %}
+      <div class="d-inline-flex align-items-center">
+        <img
+          {% if _logo.path is not empty %}
+          src="{{ _logo.path }}"
+          {% endif %}
+          {% if _logo.alt is not empty %}
+          alt="{{ _logo.alt }}"
+          {% endif %}
+          {% if _logo.class is not empty %}
+          class="{{ _logo.class }}"
+          {% endif %}
+        />
+        {% if _title is not empty %}
+        <h5 class="h5 ms-4">{{ _title }}</h5>
+        {% endif %}
+      </div>
+      {% if _title is empty %}
+      </div>
+      {% endif %}
+    </div>
+    {% endif %}
+
+    {% if _items is not empty or _non_eu_items is not empty %}
+    <div class="main pt-4">
+      {% if not (_variant == 'neutral' and _inside_container) %}
+      <div class="container">
+      {% endif %}
+      {% if _items is not empty and _items is iterable %}
+        {% include '@oe-bcl/bcl-language-list/language-list-grid.html.twig' with {
+            items: _items,
+            icon_path: _icon_path,
+            category: eu_category,
+        } only %}
+      {% endif %}
+      {% if _non_eu_items is not empty and _non_eu_items is iterable %}
+        {% include '@oe-bcl/bcl-language-list/language-list-grid.html.twig' with {
+            items: _non_eu_items,
+            icon_path: _icon_path,
+            category: non_eu_category,
+        } only %}
+      {% endif %}
+      {% if not (_variant == 'neutral' and _inside_container) %}
+      </div>
+      {% endif %}
+    </div>
+    {% endif %}
+  </div>
 {% endblock %}

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

@@ -19,7 +19,7 @@
 {% set _title_attributes = title_attributes ?: create_attribute() %}
 {% set _background = background|default('gray') %}
 {% set _variant = variant|default('vertical') %}
-{% set _links = links|default([])%}
+{% set _links = links|default([]) %}
 
 {% set _classes = ['bcl-links-block'] %}
 
@@ -56,7 +56,7 @@
         {% endif %}
         {% set _link = _link|merge({
           clean_class: true,
-          attributes: _link.attributes.addClass(['pb-3', 'd-inline-block', 'standalone'])
+          attributes: _link.attributes.addClass(['mb-3', 'd-inline-block', 'standalone'])
         }) %}
         {% set _list_item_classes = 'list-unstyled' %}
         {% if _variant == 'horizontal' %}

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

@@ -71,10 +71,10 @@
     {% set _card_attributes = card.attributes ? card.attributes : create_attribute() %}
     {% set _card_title_attributes = card.title_attributes ? card.title_attributes : create_attribute() %}
     {% set _card = _card|merge({
-      title_attributes: _card_title_attributes.addClass(['fs-5'])
+      title_attributes: _card_title_attributes.addClass(['h5'])
     }) %}
 
-    {% if _variant == 'default-1-col' or _variant == 'default-2-col' or _variant == 'default-3-col'  %}
+    {% if _variant == 'default-1-col' or _variant == 'default-2-col' or _variant == 'default-3-col' %}
       {% set _card_classes = [
         'listing-item',
         'border-bottom',
@@ -91,7 +91,7 @@
           right_col_classes: _end_col_classes ~ _alignment_class,
         }
       }) %}
-    
+
       {% if _variant == 'default-2-col' %}
         {% set _card_layout = _card_layout|merge({
           responsive_columns: 2,

package/templates/bcl-mega-menu/mega-menu-items.html.twig

@@ -0,0 +1,35 @@
+{% apply spaceless %}
+
+{% set _label = label ?? null %}
+{% set _items = items ?? [] %}
+{% set _icon_path = icon_path ?? '' %}
+{% set _level = level ?? 1 %}
+{% set _see_all = see_all ?? null %}
+
+<ul class="bcl-mega-menu__items __level-{{ _level }}">
+  {% for _item in _items %}
+    {% set _li_attributes = _item.li_attributes ?? create_attribute() %}
+    {% if _item.items is defined and _item.items is not empty %}
+      {# This is a parent item. #}
+      <li{{ _li_attributes.addClass('__parent') }}>
+        {% include '@oe-bcl/bcl-mega-menu/mega-menu-submenu.html.twig' with _item|merge({
+          icon_path: _icon_path,
+          level: _level + 1,
+        }) only %}
+      </li>
+    {% else %}
+      {# This is a leaf item. #}
+      <li{{ _li_attributes.addClass('__leaf') }}>
+        {% if _item.path is empty %}
+          {# This is a nolink item. #}
+          <span{{ _item.attributes ?? '' }}>{{ _item.label }}</span>
+        {% else %}
+          {# This is a link. #}
+          {% include '@oe-bcl/bcl-link/link.html.twig' with _item only %}
+        {% endif %}
+      </li>
+    {% endif %}
+  {% endfor %}
+</ul>
+
+{% endapply %}

package/templates/bcl-mega-menu/mega-menu-submenu.html.twig

@@ -0,0 +1,68 @@
+{% apply spaceless %}
+
+{% set _items = items ?? [] %}
+{% set _trigger = trigger ?? null %}
+{% set _icon_path = icon_path ?? '' %}
+{% set _level = level ?? 2 %}
+{% set _see_all = see_all ?? null %}
+
+{% set _trigger_id = _trigger.id|default('mm-trigger-' ~ random(10000)) %}
+{% set _panel_id = 'mm-panel-' ~ _trigger_id %}
+
+{% set _trigger_attributes = _trigger.attributes ?? create_attribute() %}
+{% set _trigger = _trigger|merge({
+  attributes: _trigger_attributes
+    .setAttribute('id', _trigger_id)
+    .setAttribute('aria-controls', _panel_id)
+    .setAttribute('aria-expanded', 'false')
+    .setAttribute('aria-haspopup', 'menu'),
+  remove_icon_spacers: true,
+  clean_class: true,
+}) %}
+{% include '@oe-bcl/bcl-button/button.html.twig' with _trigger only %}
+
+{% set _see_all_link = null %}
+{# Prepare an optional "See all" link rendered outside the list. #}
+{% if _see_all is not empty %}
+  {% set _see_all_label %}
+    <span>{{- _see_all.label -}}</span>
+  {% endset %}
+  {% set _see_all_attr = (_see_all.attributes is defined ? _see_all.attributes : create_attribute()) %}
+  {% set _see_all_link = _see_all|merge({
+    label: _see_all_label,
+    icon: {
+      size: 'xs',
+      name: 'arrow-right',
+      path: _icon_path,
+    },
+    attributes: _see_all_attr
+      .addClass(['see-all-button'])
+      .setAttribute('aria-label', 'See all items in ‘' ~ _trigger.label ~ '’')
+  }) %}
+{% endif %}
+{% set submenu_attributes = create_attribute()
+  .setAttribute('id', _panel_id)
+  .setAttribute('hidden', true)
+  .setAttribute('role', 'group')
+  .setAttribute('aria-labelledby', _trigger_id)
+  .addClass('bcl-mega-menu__submenu', '__level-' ~ _level)
+%}
+<div{{ submenu_attributes }}>
+  {% if _trigger %}
+  <div class="__header">
+      <p class="__label">{{ _trigger.label }}</p>
+  </div>
+  {% endif %}
+  {% include '@oe-bcl/bcl-mega-menu/mega-menu-items.html.twig' with {
+    items: _items,
+    icon_path: _icon_path,
+    level: _level,
+  } only %}
+  {% if _see_all_link %}
+    <div class="__see_all">
+      {% include '@oe-bcl/bcl-link/link.html.twig' with _see_all_link only %}
+    </div>
+  {% endif %}
+</div>
+
+{% endapply %}

package/templates/bcl-mega-menu/mega-menu.html.twig

@@ -0,0 +1,115 @@
+{% apply spaceless %}
+
+{# Parameters:
+  - id (string) (default: dropdown-random(1000))
+  - link (boolean) (default: false) - sets trigger to link, default is button
+  - trigger (link or button)
+  - content_block (block) (default: '')
+  - content_link (link)
+  - icon_path (string) (default: '')
+  - min_height (string) (default: '300px')
+    ! set min-height of mega-menu
+  - items (object[])
+    format: [
+      {
+        - link or dropdown
+      }
+    ]
+  - back_button_label (string) (default: 'Back')
+  - icon_path (string) (default: '')
+#}
+
+{% set _id = id|default('dropdown-' ~ random(1000)) %}
+{% set _link = link ?? false %}
+{% set _trigger = trigger|default({}) %}
+{% set _content_block = content_block|default('') %}
+{% set _content_link = content_link|default({}) %}
+{% set _icon_path = icon_path|default('') %}
+{% set _items = items|default([]) %}
+{% set _back_button_label = back_button_label|default('Back') %}
+{% set _icon_path = icon_path|default('') %}
+{% set _menu_id = 'mega-menu-' ~ _id %}
+
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
+{% set _classes = ['bcl-mega-menu'] %}
+
+{% set attributes = attributes.addClass(_classes) %}
+
+{% if _trigger.attributes is empty %}
+  {% set _trigger = _trigger|merge({
+    attributes: create_attribute()
+  }) %}
+{% endif %}
+{% set _trigger = _trigger|merge({
+  attributes: _trigger.attributes.addClass(['dropdown-toggle', 'nav-link'])
+                      .setAttribute('aria-expanded', 'false')
+                      .setAttribute('aria-haspopup', 'menu')
+                      .setAttribute('aria-controls', _menu_id)
+                      .setAttribute('data-bs-toggle', 'dropdown')
+                      .setAttribute('data-bs-auto-close', 'outside')
+                      .setAttribute('id', _id)
+}) %}
+
+<div {{ attributes }}>
+  {% include '@oe-bcl/bcl-button/button.html.twig' with _trigger|merge({
+    variant: 'link',
+    clean_class: true,
+  }) only %}
+  {# Mega menu panel. #}
+  <nav id="{{ _menu_id }}" class="bcl-mega-menu__container dropdown-menu" aria-labelledby="{{ _id }}" aria-label="Main mega menu">
+    <div class="container">
+      {# Mobile back button. #}
+      <div class="container d-lg-none bcl-mega-menu__back-button-block">
+        {% include '@oe-bcl/bcl-button/button.html.twig' with {
+          label: _back_button_label,
+          icon_position: "before",
+          variant: 'link',
+          icon: {
+            path: _icon_path,
+            name: "arrow-left",
+          },
+          attributes: create_attribute().addClass(['back-button']).setAttribute('aria-label', 'Back to main menu')
+        } only %}
+      </div>
+      {# Info/summary and submenu columns. #}
+      <div class="position-relative">
+        <div class="row">
+          {# Content / summary column. #}
+          {% if content_block is defined %}
+            <div class="col-md-12 col-xl-3 position-relative bcl-mega-menu__info">
+              <div class="content-block">
+                {%- block content_block -%}
+                  {{ _content_block }}
+                {%- endblock -%}
+                {% if _content_link.path is not empty %}
+                  {% set _content_link = _content_link|merge({
+                    icon: _content_link.icon|default({})|merge({
+                      path: _icon_path
+                    }),
+                    attributes: (_content_link.attributes is defined
+                      ? _content_link.attributes
+                      : create_attribute()
+                    ).addClass('content-link')
+                  }) %}
+                  <p class="m-0">{% include '@oe-bcl/bcl-link/link.html.twig' with _content_link only %}</p>
+                {% endif %}
+              </div>
+              <div class="shadow-container">
+                <span class="shadow-bg"></span>
+              </div>
+            </div>
+          {% endif %}
+          {# Submenu column. #}
+          <div class="col-md-12 col-lg-4 col-xl-3 bcl-mega-menu__menu">
+            {% include '@oe-bcl/bcl-mega-menu/mega-menu-items.html.twig' %}
+          </div>
+        </div>
+      </div>
+    </div>
+  </nav>
+</div>
+
+{% endapply %}