@openeuropa/bcl-twig-templates 0.19.0 → 0.20.0

package/package.json

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

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

@@ -6,14 +6,14 @@
   - variant (string) (default: 'primary')
   - dismissible (boolean) (default: true)
   - animated_dismiss (boolean) (default: true)
-  - icons_path (string) (default: '')
+  - icon_path (string) (default: '')
   - icon_name (string) (default: '')
 #}
 
 {% set _message = message|default('') %}
 {% set _variant = variant|default('primary') %}
 {% set _heading = heading|default('') %}
-{% set _icons_path = icons_path|default('') %}
+{% set _icon_path = icon_path|default('') %}
 {% set _dismissible = dismissible ?? true %}
 {% set _animated_dismiss = animated_dismiss ?? true %}
 {% set _icon_name = icon_name|default('') %}
@@ -44,11 +44,11 @@
 {% set attributes = attributes.addClass(_classes).setAttribute('role', 'alert') %}
 
 <div {{ attributes }}>
-{% if _icons_path is not empty %}
+{% if _icon_path is not empty %}
   {% include '@oe-bcl/bcl-icon/icon.html.twig' with {
     name: _icon_name ?: _icon_names[_variant],
     size: 's',
-    path: _icons_path,
+    path: _icon_path,
     attributes: create_attribute().addClass(['flex-shrink-0 me-3 mt-1 align-self-start']),
   } only %}
 {% endif %}

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

@@ -9,7 +9,7 @@
   - assistive_text (string) (default: '')
   - rounded_pill (boolean) (default: false)
   - outline (boolean) (default: false)
-  - icons_path (string) (default: '')
+  - icon_path (string) (default: '')
 #}
 
 {% set _rounded_pill = rounded_pill|default(false) %}
@@ -18,7 +18,7 @@
 {% set _label = label|default('') %}
 {% set _classes = ['badge'] %}
 {% set _url = url|default('') %}
-{% set _icons_path = icons_path|default('') %}
+{% set _icon_path = icon_path|default('') %}
 {% set _title = title|default(_label) %}
 {% set _dismissible = dismissible|default(false) %}
 {% set _assistive_text = assistive_text|default('') %}
@@ -58,8 +58,8 @@
   {%- if _dismissible -%}
     <span class="icon--close" aria-hidden="true">
       {% include '@oe-bcl/bcl-icon/icon.html.twig' with {
-        name: "x",
-        path: _icons_path,
+        name: "x-lg",
+        path: _icon_path,
       } only %}
     </span>
   {%- endif -%}

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

@@ -6,7 +6,7 @@
 
 {% set _classes = 'breadcrumb' %}
 {% set _links = links|default([]) %}
-{% set _icons_path = icons_path|default('') %}
+{% set _icon_path = icon_path|default('') %}
 
 {% if attributes is empty %}
   {% set attributes = create_attribute() %}
@@ -41,7 +41,7 @@
               icon_position: 'before',
                 icon: {
                   name: "arrow-left",
-                  path: _icons_path,
+                  path: _icon_path,
                   attributes: create_attribute().addClass(['d-md-none ms-0 me-2']),
                 },
              }) %}

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

@@ -44,6 +44,10 @@
   - extra_classes_header (string) (default: '')
   - extra_classes_footer (string) (default: '')
   - badges (array of badge object) (default: [])
+
+  Blocks
+    - card_date
+    - card_badge
 #}
 
 {% set _title = title|default({}) %}
@@ -145,7 +149,9 @@
   <div class='{{ _horizontal_grid.left_col_classes  }}'>
 {% endif %}
   {% if _date is not empty %}
-    {% include '@oe-bcl/bcl-date-block/date-block.html.twig' with _date only %}
+    {% block card_date %}
+      {% include '@oe-bcl/bcl-date-block/date-block.html.twig' with _date only %}
+    {% endblock %}
   {% elseif _image is not empty and _image.position != "bottom" %}
     <img
       src="{{ _image.path }}"
@@ -210,7 +216,10 @@
           })
         %}
       {% endif %}
-      {% include '@oe-bcl/bcl-badge/badge.html.twig' with _badge only %}
+      {% block card_badge %}
+        {% include '@oe-bcl/bcl-badge/badge.html.twig' with _badge only %}
+      {% endblock %}
+      
     {% endfor %}
     </div>
   {%- endif -%}

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

@@ -14,6 +14,9 @@
     options: ['0', '1', '2', '3', '4', '5']
   - equal_height (boolean) (default: false)
   - cols_extra_classes (string) (default: '')
+
+  Blocks
+    - card_layout_card
 #}
 
 {% set _type = type|default('group') %}
@@ -69,7 +72,9 @@
     {% if _type == 'grid' or _type == 'masonry' %}
       <div class="{{ _cols_classes }}">
     {% endif %}
-      {% include '@oe-bcl/bcl-card/card.html.twig' with _item only %}
+      {% block card_layout_card %}
+        {% include '@oe-bcl/bcl-card/card.html.twig' with _item only %}
+      {% endblock %}
     {% if _type == 'grid' or _type == 'masonry' %}
       </div>
     {% endif %}

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

@@ -45,34 +45,46 @@
   {% set attributes = create_attribute() %}
 {% endif %}
 
+{% set _body_classes = 'pt-0 px-0 pb-0' %}
+{% set _card_grid = 'col-12 col-md-10' %}
+
+{% if _image is not empty %}
+  {% set _horizontal_classes = {
+    left_col_classes: 'col-md-4 col-lg-3',
+    right_col_classes: 'col-md-8 col-lg-9 col-xxl-8'
+  } %}
+  {% set _body_classes = 'pt-md-0 px-0 px-md-3 pb-0' %}
+
+  {% if _action_button is not empty %}
+    {% set _horizontal_classes = {
+      left_col_classes: 'col-md-4 col-lg-3',
+      right_col_classes: 'col-md-8 col-lg-9 col-xxl-9'
+    } %}
+  {% endif %}
+{% else %}
+  {% set _horizontal_classes = {
+    right_col_classes: 'col-md-8 col-lg-9 col-xxl-8',
+  } %}
+  
+  {% if _action_button is not empty %}
+    {% set _horizontal_classes = {
+      right_col_classes: 'col-12'
+    } %}
+    {% set _card_grid = 'col-12 col-md-8' %}
+  {% endif %}
+{% endif %}
+
 {% set _card = {
   title: title|default({})|merge({
     tag: 'h2',
     attributes: create_attribute().addClass(['fw-bold']),
   }),
   horizontal: true,
-  horizontal_grid: {
-    right_col_classes: 'col-md-8 col-lg-9 col-xxl-8',
-  },
+  horizontal_grid: _horizontal_classes,
   extra_classes_header: 'bg-transparent pt-0 pb-0 border-0',
-  extra_classes_body: 'pt-0 px-0 pb-0',
+  extra_classes_body: _body_classes,
 } %}
 
-{% if _image is not empty %}
-  {% set _card = _card|merge({
-    horizontal_grid: _card.horizontal_grid|merge({
-      left_col_classes: 'col-md-4 col-lg-3',
-    }),
-    extra_classes_body: 'pt-md-0 px-0 px-md-3 pb-0',
-  }) %}
-{% else %}
-  {% set _card = _card|merge({
-    horizontal_grid: {
-      right_col_classes: 'col-md-8 col-lg-9 col-xxl-8',
-    },
-  }) %}
-{% endif %}
-
 {% set _css_classes = _css_classes|merge([_modifiers[_background]]) %}
 {% set _attributes = attributes.addClass(['bg-transparent', 'border-0']) %}
 
@@ -83,10 +95,16 @@
 <div class="{{ _css_classes|join(' ') }}">
   <div class="container">
     <div class="row">
+  {% if _action_button is not empty %}
+    <div class="{{ _card_grid }}">
+  {% endif %}
     {% include '@oe-bcl/bcl-card/card.html.twig' with _card %}
+  {% if _action_button is not empty %}
+  </div>
+  {% endif %}
 
   {% if _action_button is not empty %}
-    <div class="col-12 col-md-2 text-end">
+    <div class="col-12 col-md-2 text-end mt-3 mt-md-0">
       <div class="d-grid d-md-block">
         {% include '@oe-bcl/bcl-button/button.html.twig' with _action_button only %}
       </div>

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

@@ -63,10 +63,14 @@
               {% 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>
-          {%- else -%}
-            {{- _term.label -}}
-          {%- endif -%}
+              <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 _variant == 'horizontal' %}
@@ -87,6 +91,10 @@
               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 -%}
@@ -96,10 +104,10 @@
     {% if _item.definition is not empty %}
       {% if _item.definition is iterable %}
         {% if _variant == 'horizontal' %}
-          <div>
+          <dd>
         {% endif %}
         {% for _definition in _item.definition %}
-          <dd>
+          {% 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 %}
@@ -115,10 +123,10 @@
                 {{- _definition.label -}}
               {%- endif -%}
             {%- endif -%}
-          </dd>
+          {% if _variant == 'horizontal' %}</div>{% else %}</dd>{% endif %}
         {% endfor %}
         {% if _variant == 'horizontal' %}
-          </div>
+          </dd>
         {% endif %}
       {% else %}
         <dd>

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

@@ -18,7 +18,7 @@
   - "gutter" (int) (default: 4)
   - "equal_height" (boolean) (default: false)
   - "cols_extra_classes" (string) (default: '')
-  - "icons_path" (string) (default: '')
+  - "icon_path" (string) (default: '')
   - "link_more" (object of type link) (default {})
 #}
 
@@ -37,7 +37,7 @@
 {% set _equal_height = equal_height|default(false) %}
 {% set _cols_extra_classes = cols_extra_classes|default('') %}
 {% set _cols_classes = 'col' %}
-{% set _icons_path = icons_path|default('') %}
+{% set _icon_path = icon_path|default('') %}
 {% set _link_more = link_more|default({}) %}
 {% set _wrapper_classes = [] %}
 
@@ -83,7 +83,7 @@
       {% if _item.icon is defined and _item.icon is not empty and _display_icons %}
         {% set _item = _item|merge({
           icon: _item.icon|merge({
-            path: _icons_path,
+            path: _icon_path,
             size: 'l',
           })
         }) %}

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

@@ -135,7 +135,7 @@
           },
           attributes: create_attribute()
                       .setAttribute('download', _download.url)
-                      .addClass(['text-underline-hover', 'align-self-center', 'd-inline-block', 'mt-1', 'mt-md-0'])
+                      .addClass(['standalone', 'align-self-center', 'd-inline-block', 'mt-1', 'mt-md-0'])
         }) %}
         {% include '@oe-bcl/bcl-link/link.html.twig' with _download only %}
       </div>
@@ -148,7 +148,7 @@
       {% include '@oe-bcl/bcl-link/link.html.twig' with _translation.label|merge({
         path: '#' ~ _id,
         attributes: create_attribute()
-                    .addClass(['text-underline-hover'])
+                    .addClass(['standalone'])
                     .setAttribute('aria-controls', _id)
                     .setAttribute('data-bs-toggle', 'collapse')
                     .setAttribute('aria-expanded', 'false')
@@ -194,7 +194,7 @@
               },
               attributes: create_attribute()
                           .setAttribute("download", _item.download.url)
-                          .addClass(['d-block', 'text-underline-hover', 'mt-1'])
+                          .addClass(['d-block', 'standalone', 'mt-1'])
             }) only %}
             </div>
           </div>

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

@@ -70,7 +70,7 @@
                   {% if item.type == 'links' %}
                     {% for link in item.links %}
                       {% include '@oe-bcl/bcl-link/link.html.twig' with link|merge({
-                        attributes: create_attribute().addClass(['d-block', 'text-underline-hover', 'mb-1'])
+                        attributes: create_attribute().addClass(['d-block', 'standalone', 'mb-1'])
                       }) only %}
                     {% endfor %}
                   {% endif %}

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

@@ -10,19 +10,23 @@
         classes: ""
       }
   - site_name (string) (default: "")
+  - project_link (string) (default: "")
   - head (Navbar object) (default: {})
   - breadcrumbs (Breadcrumbs object) (default: {})
   - light (boolean) (default: false)
   - modals (Array of modal objects) (default: [])
+  - language_modal (object) (default: {})
 #}
 
 {% set _variant = variant|default('neutral') %}
 {% set _navbar = navbar|default({}) %}
 {% set _project_logo = project_logo|default({}) %}
+{% set _project_link = project_link|default('') %}
 {% set _site_name = site_name|default('') %}
 {% set _site_name_classes = 'bcl-header__site-name' %}
 {% set _head = head|default({}) %}
 {% set _breadcrumbs = breadcrumbs|default({}) %}
+{% set _language_modal = language_modal|default({}) %}
 {% set _modals = modals|default([]) %}
 {% set _light = light|default(false) %}
 
@@ -53,23 +57,31 @@
   {% if _project_logo is not empty or _site_name is not empty %}
   <div class="{{ _project_classes  }}">
     <div class="container">
-    {% if _project_logo is not empty %}
-      <img
-      {% if _project_logo.path is not empty %}
-        src="{{ _project_logo.path }}"
-      {% endif %}
-      {% if _project_logo.alt is not empty %}
-        alt="{{ _project_logo.alt }}"
+    {% if _project_link is not empty %}
+      <a
+        href="{{ _project_link }}"
+      >
+    {% endif %}
+      {% if _project_logo is not empty %}
+        <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 %}
+        />
       {% endif %}
-      {% if _project_logo.classes is not empty %}
-        class="{{ _project_logo.classes }}"
+      {% if _site_name is not empty %}
+        <span class="{{ _site_name_classes }}">
+        {{- _site_name -}}
+        </span>
       {% endif %}
-      />
-    {% endif %}
-    {% if _site_name is not empty %}
-      <div class="{{ _site_name_classes }}">
-       {{- _site_name -}}
-       </div>
+    {% if _project_link is not empty %}
+      </a>
     {% endif %}
     </div>
   </div>
@@ -92,4 +104,8 @@
   {% include '@oe-bcl/bcl-modal/modal.html.twig' with modal only %}
 {% endfor %}
 
+{% if _language_modal is not empty %}
+  {% include '@oe-bcl/bcl-language-list/language-list.html.twig' with _language_modal only %}
+{% endif %}
+
 {% endspaceless %}

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

@@ -0,0 +1,68 @@
+{% spaceless %}
+
+{#
+  Parameters:
+  - items (array) (default: []) format: [
+    {
+      lang (string)
+      label (string)
+      path (string)
+      active (boolean)
+    }
+  ]
+  - category (string) (default: '')
+  - icon_path (string) (default: '')
+#}
+
+{% set _items = items|default([]) %}
+{% set _icon_path = icon_path|default('') %}
+{% set _category = category|default('') %}
+
+{% set _columns = [] %}
+{% set _columns = _columns|merge([_items|slice(0, (items|length / 2)|round(0, 'ceil'))]) %}
+{% set _columns = _columns|merge([_items|slice((items|length / 2)|round(0, 'ceil'), items|length)]) %}
+
+<div class="pb-2">
+  {% if _category is not empty %}
+  <h5 class="mb-4">{{ _category }}</h5>
+  {% endif %}
+  {% if _columns is not empty and _columns is iterable %}
+  <div class="row">
+    {% for _column in _columns %}
+      <div class="col-12 col-md">
+      {% for _item in _column %}
+        {% if _item.attributes is empty %}
+          {% set _item = _item|merge({
+            attributes: create_attribute()
+          }) %}
+        {% endif %}
+        {% set _item = _item|merge({
+          attributes: _item.attributes.addClass(['w-100', 'mb-2-5', 'btn', 'w-100'])
+        }) %}
+        {% if _item.active %}
+          {% set _item = _item|merge({
+            icon: {
+              name: "check2",
+              path: _icon_path,
+            },
+            attributes: _item.attributes.addClass(['selected', 'justify-content-between'])
+          }) %}
+        {% else %}
+          {% set _item = _item|merge({
+            attributes: _item.attributes.addClass('justify-content-start')
+          }) %}
+        {% endif %}
+        {% if _item.lang is not empty %}
+          {% set _item = _item|merge({
+            attributes: _item.attributes.setAttribute('lang', _item.lang).setAttribute('hreflang', _item.lang)
+          }) %}
+        {% endif %}
+        {% include '@oe-bcl/bcl-link/link.html.twig' with _item only %}
+      {% endfor %}
+      </div>
+    {% endfor %}
+  </div>
+  {% endif %}
+</div>
+
+{% endspaceless %}