@openeuropa/bcl-theme-default 0.14.0 → 0.15.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@openeuropa/bcl-theme-default",
   "author": "European Commission",
   "license": "EUPL-1.2",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "description": "OE - BCL theme default",
   "scripts": {
     "build": "npm-run-all build:*",
@@ -13,9 +13,9 @@
     "prepublish": "npm run build"
   },
   "devDependencies": {
-    "@openeuropa/bcl-bootstrap": "^0.14.0",
-    "@openeuropa/bcl-builder": "^0.14.0",
-    "@openeuropa/bcl-twig-templates": "^0.14.0",
+    "@openeuropa/bcl-bootstrap": "^0.15.0",
+    "@openeuropa/bcl-builder": "^0.15.0",
+    "@openeuropa/bcl-twig-templates": "^0.15.0",
     "copyfiles": "2.4.1",
     "cross-env": "7.0.3",
     "glob": "7.2.0",
@@ -39,5 +39,5 @@
     "design-system",
     "twig"
   ],
-  "gitHead": "b91fc0b466f8a604eda1cfd519f3be4cbbc75324"
+  "gitHead": "97a9f0822ee0d4d800e40aa17bf87dc698c5906c"
 }

package/src/scss/_header.scss

@@ -23,6 +23,7 @@ $header-link-active-background: #003776 !default;
 
 .bcl-header__project {
   padding-top: map-get($spacers, 3);
+  min-height: map-get($spacers, 5);
 }
 
 .ec__header .bcl-header__project,

package/src/scss/_utilities.scss

@@ -73,6 +73,6 @@ $utilities: map-merge(
 }
 
 .grid-3-9 {
-  grid-template-columns: 25% max-content;
+  grid-template-columns: 25% 75%;
   grid-gap: map-get($gutters, "2-5");
 }

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

@@ -2,6 +2,7 @@
 
 {# Parameters:
   - title: (string) (default: "")
+  - title_tag: (string) (default: "div")
   - description: (string) (default: "")
   - link: (link object) (default: {}): predefined structure for Link component
   - image: (string) <img> tag
@@ -11,14 +12,15 @@
   - content_classes: (string) (default: "")
 #}
 
-{% set _title = title|default("") %}
-{% set _description = description|default("") %}
+{% set _title = title|default('') %}
+{% set _title_tag = title_tag|default('div') %}
+{% set _description = description|default('') %}
 {% set _link = link|default({}) %}
-{% set _image = image|default("") %}
+{% set _image = image|default('') %}
 {% set _shade = shade|default(false) %}
 {% set _hero = hero|default(false) %}
 {% set _full_width = full_width|default(false) %}
-{% set _content_classes = content_classes|default("") %}
+{% set _content_classes = content_classes|default('') %}
 
 
 {% set _content_class = 'bcl-banner__content' %}
@@ -47,7 +49,7 @@
   <div class="container">
     <div class="{{ _content_class }}">
     {% if _title is not empty %}
-      <div class="{{ _title_classes }}">{{ _title }}</div>
+      <{{ _title_tag }} class="{{ _title_classes }}">{{ _title }}</{{ _title_tag }}>
       {% if _description is not empty %}
       <p class="mb-4">{{ _description }}</p>
       {% endif %}

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

@@ -6,7 +6,6 @@
   - with_footer (boolean) (default: false)
   - with_banner (boolean) (default: false)
   - with_sidebar (boolean) (default: false)
-  - title (string) (default: '')
   - columns (string) (default: 3-9 )
   - content_type (string) (default: '')
   - attributes (drupal attrs)
@@ -27,15 +26,14 @@
 {% set _with_banner = banner|default(false) %}
 {% set _with_sidebar = sidebar|default(false) %}
 {% set _columns = columns|default('3-9') %}
-{% set _title = title|default('') %}
 {% set _content_type = content_type|default('') %}
 {% set _classes = ['bcl-node-type'] %}
-{% set _col_classes = { left: 'col-md-3', right: 'col-12 col-lg-9' } %}
+{% set _col_classes = { left: 'col-md-3', right: 'col-12 col-md-9' } %}
 
 {% if _columns == '4-8' %}
-  {% set _col_classes = { left: 'col-md-4', right: 'col-12 col-lg-8' } %}
+  {% set _col_classes = { left: 'col-md-4', right: 'col-12 col-md-8' } %}
 {% elseif _columns == '2-10' %}
-  {% set _col_classes = { left: 'col-md-2', right: 'col-12 col-lg-10' } %}
+  {% set _col_classes = { left: 'col-md-2', right: 'col-12 col-md-10' } %}
 {% endif %}
 
 {% if _content_type is not empty %}
@@ -47,11 +45,12 @@
 {% endif %}
 
 <main {{ attributes }}>
-  {% if _with_banner %}
-    {% block banner %}
-      {% include '@oe-bcl/bcl-content-banner/content-banner.html.twig' with banner only %}
-    {% endblock %}
-  {% endif %}
+{% if _with_banner %}
+  {% block banner %}
+    {% include '@oe-bcl/bcl-content-banner/content-banner.html.twig' with banner only %}
+  {% endblock %}
+{% endif %}
+
   <div class="container mt-md-4-75 mt-4">
     <div class="row">
     {% if _with_sidebar %}
@@ -71,13 +70,13 @@
       {% block content_bottom %}
         {{ content_bottom }}
       {% endblock %}
+      {% block related %}
+        {{ related }}
+      {% endblock %}
     </div>
   </div>
 </main>
 
-{% block related %}
-  {{ related }}
-{% endblock %}
 {% block feedback %}
   {{ feedback }}
 {% endblock %}

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

@@ -3,6 +3,7 @@
   - listing (object) (default: {})
   - pagination (object) (default: {})
   - sidebar (object) (default: '')
+  - page_title (string) (default: '')
 #}
 
 {% extends "@oe-bcl/bcl-base-templates/content-type.html.twig" %}
@@ -11,6 +12,7 @@
 {% set _pagination = pagination|default({}) %}
 {% set _search = search|default({}) %}
 {% set _sidebar = sidebar|default({}) %}
+{% set _page_title = page_title|default({}) %}
 
 {% block content_top %}
   {% include '@oe-bcl/bcl-button/button.html.twig' with filter_button only %}
@@ -22,7 +24,7 @@
     </div>
     <h4 class="mb-4">
       <span class="text-capitalize">
-        {{ content_type }}
+        {{- _page_title -}}
       </span>
       ({{ listing.items.length }})
     </h4>

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

@@ -133,7 +133,7 @@
     {% set _img_class = _img_class ~ " " ~ _image.classes %}
   {% endif %}
 {% endif %}
-{% if _horizontal %}
+{% if _horizontal and (_image is not empty or _date is not empty)  %}
   <div class='{{ _horizontal_grid.left_col_classes  }}'>
 {% endif %}
   {% if _date is not empty %}
@@ -145,7 +145,7 @@
       class="{{ _img_class }}"
     >
   {% endif %}
-{% if _horizontal %}
+{% if _horizontal and (_image is not empty or _date is not empty) %}
   </div>
 {% endif %}
 {% if _image.position == 'background' %}

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

@@ -17,34 +17,55 @@
 {% set _background = background|default('white') %}
 {% set _action_button = action_button|default({}) %}
 {% set _service_buttons = service_buttons|default([]) %}
+{% set _image = image|default({}) %}
 
 {% set _css_classes = [
   'bcl-content-banner',
   'vw-100',
-  'py-md-4-75',
-  'py-4',
+  'pt-lg-4-75',
 ] %}
 
+{% if _background != 'white' %}
+  {% set _css_classes = _css_classes|merge([
+    'pb-md-4-75',
+    'pb-4',
+    'pt-4',
+  ]) %}
+{% else %}
+  {% set _css_classes = _css_classes|merge([
+    'pt-3'
+  ]) %}
+{% endif %}
+
 {% set _modifiers = {
   'white': 'bg-white',
   'gray': 'bg-lighter',
 } %}
 
 {% set _card = {
-  horizontal: true,
   title: title|default({})|merge({
     tag: 'h2',
-    classes: 'fw-bold',
+    attributes: create_attribute().addClass(['fw-bold']),
   }),
+  horizontal: true,
+  horizontal_grid: {
+    right_col_classes: 'col-md-8 col-lg-9 col-xxl-8',
+  },
   extra_classes_header: 'bg-transparent pt-0 pb-0 border-0',
-  extra_classes_body: 'pt-md-0 px-0 px-md-3 pb-0',
+  extra_classes_body: 'pt-0 px-0 pb-0',
 } %}
 
-{% if image is not empty %}
+{% 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: {
-      left_col_classes: 'col-md-3',
-      right_col_classes: 'col-md-9',
+      right_col_classes: 'col-md-8 col-lg-9 col-xxl-8 px-sm-0 px-md-2-5',
     },
   }) %}
 {% endif %}

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

@@ -2,6 +2,8 @@
 
 {#
   Parameters:
+  - title: (string) (default: "")
+  - title_tag: (string) (default: "h4")
   - "items" (array) (default: []): format: [
       {
         "term" (object or array of object) -format: {
@@ -14,12 +16,12 @@
     ]
   - "variant" (string) (default: '') 
     - option: ["horizontal"]
-
 #}
 
 {# Parameters #}
 
-
+{% set _title = title|default('') %}
+{% set _title_tag = title_tag|default('h4') %}
 {% set _items = items|default([]) %}
 {% set _variant = variant|default('') %}
 
@@ -27,6 +29,13 @@
   {% set attributes = attributes.addClass(["d-md-grid", "grid-3-9"]) %}
 {% endif %}
 
+{% if _title is not empty %}
+  {% set _title_classes = 'fw-bold mb-4' %}
+  <{{ _title_tag }} class="{{ _title_classes }}">
+    {{- _title -}}
+  </{{ _title_tag }}>
+{% endif %}
+
 <dl
   {{ attributes }}
 >
@@ -37,26 +46,42 @@
           <div>
         {% endif %}
         {% for _term in _item.term %}
-          <dt>
+          <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('me-2')
+                attributes: create_attribute().addClass(_icon_classes)
               }) only %}
             {%- endif -%}
-            <div class="align-middle d-inline-block">{{- _term.label -}}</div>
+            {{- _term.label -}}
           </dt>
         {% endfor %}
         {% if _variant == 'horizontal' %}
           </div>
         {% endif %}
       {% else %}
-        <dt>
+        <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('me-2')
+              attributes: create_attribute().addClass(_icon_classes)
             }) only -%}
           {% endif %}
-          <div class="align-middle d-inline-block">{{- _item.term.label -}}</div>
+          {{- _item.term.label -}}
         </dt>
       {% endif %}
     {% endif %}

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

@@ -0,0 +1,41 @@
+{% extends '@oe-bcl/bcl-base-templates/content-type.html.twig' %}
+
+{% block sidebar %}
+  {% if sidebar.image is not empty %}
+    <img class="mb-4" src="https://picsum.photos/275?random=1" alt="image" />
+  {% endif %}
+  <div class="bcl-event-details mb-4">
+    <h3 class="fw-bold mb-4">Event Details</h3>
+    {% include '@oe-bcl/bcl-description-list/description-list.html.twig' with sidebar only %}
+    <div class="mt-3-5">
+    {% for badge in sidebar.badges %}
+      {% include '@oe-bcl/bcl-badge/badge.html.twig' with badge only %}
+    {% endfor %}
+    </div>
+  </div>
+{% endblock %}
+
+{% block content %}
+  <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>
+  <h3 class="fw-bold my-4">Description</h3>
+  <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>
+  <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.
+  </p>
+{% endblock %}
+
+{% block related %}
+  <h3 class="fw-bold my-4">Related documents</h3>
+  {% include '@oe-bcl/bcl-file/file.html.twig' with files[0] only %}
+  {% include '@oe-bcl/bcl-file/file.html.twig' with files[1] only %}
+{% endblock %}

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

@@ -2,27 +2,30 @@
 
 {#
   Parameters:
+  - "title" (string) (default: '')
+  - "title_tag" (string) (default: 'h4')
   - "variant" (string) (default: '') options:
     [ default, block ]
+  - "display_icons" (boolean) (default: true)
   - "items" (array) (default: []):
     - "icon" (associate array) (default: { size: 'm' })
     - "subtitle" (string) (default: '')
     - "title" (string) (default: '')
     - "description" (string) (default:'')
-  - "display_icons" (boolean) (default: true)
   - "grid_columns" (int) (default: 1)
+  - "responsiveness" (string) (default: 'md')
+  - "responsive_columns" (integer) (default: 3)
   - "gutter" (int) (default: 4)
-  - "equal_height" (boolean) (default: true)
+  - "equal_height" (boolean) (default: false)
   - "cols_extra_classes" (string) (default: '')
-  - "responsiveness" (string) (default: 'md')
   - "icons_path" (string) (default: '')
   - "link_more" (object of type link) (default {})
-
 #}
 
 {# Parameters #}
 
 {% set _title = title|default('') %}
+{% set _title_tag = title_tag|default('h4') %}
 {% set _variant = variant|default('default') %}
 {% set _css_classes = ['bcl-fact-figures', 'bcl-fact-figures--' ~ _variant] %}
 {% set _display_icons = display_icons ?? true %}
@@ -61,7 +64,8 @@
 
 <div {{ attributes }}>
 {% if _title is not empty %}
-  <h4 class="fw-bold">{{ _title }}</h4>
+  {% set _title_classes = 'fw-bold' %}
+  <{{ _title_tag }} class="{{ _title_classes }}">{{ _title }}</{{ _title_tag }}>
 {% endif %}
   <div
   {% if _wrapper_classes is not empty %}

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

@@ -1,10 +1,16 @@
 {% spaceless %}
 
 {# Parameters:
+  - with_text (boolean) (default: false)
+  - title: (string) (default: '')
+  - title_tag: (string) (default: 'h3')
   - image: (string) (default: "")
   - poster_image: (string) (default: "")
   - content: (string) (default: "")
+  - wrapper_classes: (default: '')
   - content_classes: (string) (default: "")
+  - read_more (object) (default: {})
+  - description (string) (default: '')
   - ratio: (string) (default: "16x9")
     - options ["1x1", "4x3", "16x9", "21x9"]
   - sources: (array of sources) (default: []) format: [
@@ -26,15 +32,47 @@
     - "embedded_media"
 #}
 
+{% set _title = title|default('') %}
+{% set _title_tag = title_tag|default('h4') %}
+{% set _with_text = with_text|default(false) %}
+{% set _wrapper_classes = 'bcl-featured-item' %}
+{% set _description = description|default('') %}
 {% set _embedded_media = embedded_media|default('') %}
-{% set _image = image|default("") %}
-{% set _poster_image = poster_image|default("") %}
-{% set _content = content|default("") %}
-{% set _content_classes = content_classes|default("") %}
-{% set _ratio = ratio|default("16x9") %}
+{% set _image = image|default('') %}
+{% set _poster_image = poster_image|default('') %}
+{% set _content = content|default('') %}
+{% set _alignment = alignment|default('right') %}
+{% set _content_classes = content_classes|default('') %}
+{% set _ratio = ratio|default('16x9') %}
 {% set _sources = sources|default([]) %}
 {% set _tracks = tracks|default([]) %}
+{% set _col_classes = 'col-12 col-md-6' %}
+{% set _read_more = read_more|default({}) %}
 
+{% if wrapper_classes is defined and wrapper_classes is not empty %}
+  {% set _wrapper_classes = _wrapper_classes ~ ' ' ~ wrapper_classes %}
+{% endif %}
+
+{% 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 }}>
+{% endif %}
+
+  <div class="row">
+    <div class="{{ _col_classes }} order-{{ _alignment == "right" ? '1' : '2' }}">
+      {{- _description|default('') -}}
+
+      {% if _read_more is not empty %}
+        {% include '@oe-bcl/bcl-link/link.html.twig' with _read_more only %}
+      {% endif %}
+    </div>
+    <div class="{{ _col_classes }} order-{{ _alignment == "right" ? '2' : '1' }}">
+{% endif %}
 
 <figure
   {{ attributes }}
@@ -79,4 +117,10 @@
 {% endif %}
 </figure>
 
+{% if _with_text %}
+    </div>
+  </div>
+</div>
+{% endif %}
+
 {% endspaceless %}

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

@@ -2,8 +2,10 @@
 
 {#
   Parameters:
-  - icon (icon Object) (default: {})
   - title (string) (default: '')
+  - title_tag (string) (default: 'h4')
+  - item_title (string) (default: '')
+  - icon (icon Object) (default: {})
   - text (string) (default: '')
   - content (string) (default: '')
   - image (object) (default: {}) - format: {
@@ -34,6 +36,8 @@
 
 {% set _icon = icon|default({}) %}
 {% set _title = title|default('') %}
+{% set _title_tag = title_tag|default('h4') %}
+{% set _item_title = item_title|default('') %}
 {% set _text = text|default('') %}
 {% set _content = content|default('') %}
 {% set _image = image|default({}) %}
@@ -53,6 +57,13 @@
   }) %}
 {% endif %}
 
+{% if _title is not empty %}
+  {% set _title_classes = 'fw-bold mb-4' %}
+  <{{ _title_tag }} class="{{ _title_classes }}">
+    {{- _title -}}
+  </{{ _title_tag }}>
+{% endif %}
+
 {% if _variant == 'card' %}
   {% set attributes = attributes.addClass(['border', 'rounded-bottom']) %}
   {% set _image = _image|merge({
@@ -67,7 +78,7 @@
     },
     badges: _badges,
     title: {
-      content: _title,
+      content: _item_title,
     },
     text: {
       content: _text,
@@ -94,8 +105,8 @@
       {% endif %}
       <div class="{{ _container_classes }}">
         <div class="flex-grow-1">
-          {% if _title is not empty and _variant == 'default' %}
-            <p class="fw-bold m-0">{{ _title }}</p>
+          {% if _item_title is not empty and _variant == 'default' %}
+            <p class="fw-bold m-0">{{ _item_title }}</p>
           {% endif %}
           {% if _language is not empty or _meta is not empty %}
           <small class="fw-bold m-0">

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

@@ -0,0 +1,101 @@
+{% extends "@oe-bcl/bcl-base-templates/content-type.html.twig" %}
+
+{% block banner %}
+<div class="container">
+  {% if banner is not empty %}
+  <div class="mt-4 mt-md-5">
+    {% if banner.image is not empty %}
+      <img
+        src="{{ banner.image.path }}"
+        {% if banner.image.alt is not empty %}
+        alt="{{ banner.image.alt }}"
+        {% endif %}
+        {% if banner.image.class is not empty %}
+        class="{{ banner.image.class }}"
+        {% endif %}
+      />
+    {% endif %}
+    {% if banner.title is not empty %}
+      <div class="p-md-3-5 pt-3 bg-lighter d-md-flex n-mx-container">
+        <h2 class="mb-0 d-inline-block fw-bold">{{ banner.title }}</h2>
+        {% if banner.actions is not empty and banner.actions is iterable %}
+        <div class="d-grid d-md-block ms-auto">
+          {% for _action in banner.actions %}
+            {% if _action.type == "link" %}
+              {% include '@oe-bcl/bcl-link/link.html.twig' with _action only %}
+            {% elseif _action.type == "button" %}
+              {% include '@oe-bcl/bcl-button/button.html.twig' with _action only %}
+            {% elseif _action.type == "dropdown" %}
+              {% include '@oe-bcl/bcl-dropdown/dropdown.html.twig' with _action only %}
+            {% endif %}
+          {% endfor %}
+        </div>
+        {% endif %}
+      </div>
+    {% endif %}
+  </div>
+  {% endif %}
+  {% include '@oe-bcl/bcl-navigation/navigation.html.twig' with navigation only %}
+  {% if banner_description is not empty and contact is not empty %}
+  {% include '@oe-bcl/bcl-link/link.html.twig' with banner_description.collapse_trigger only %}
+  <div class="collapse d-md-block" id="banner-description">
+    <div class="row mt-md-4 mb-md-5 pb-md-5">
+      <div class="col-md-8">
+        <div class="ps-md-3">
+          {% if banner_description.metas is not empty and banner_description.metas is iterable %}
+          <div class="d-block">
+            {% for _meta in banner_description.metas %}
+            <p class="mb-0 me-4 d-inline-block text-muted">
+              {% include '@oe-bcl/bcl-icon/icon.html.twig' with _meta.icon only %}
+              {{- _meta.label -}}
+            </p>
+            {% endfor %}
+          </div>
+          {% endif %}
+          {{ banner_description.content }}
+        </div>
+      </div>
+      <div class="col-md-4">
+        <h4 class="mb-3 pb-2">{{ contact.title }}</h4>
+        {% if contact.profiles is not empty and contact.profiles is iterable %}
+          {% for _profile in contact.profiles %}
+            {% include '@oe-bcl/bcl-user/user-view-compact.html.twig' with _profile only %}
+          {% endfor %}
+        {% endif %}
+        {% if contact.more_link is not empty %}
+          {% include '@oe-bcl/bcl-link/link.html.twig' with contact.more_link only %}
+        {% endif %}
+      </div>
+    </div>
+  </div>
+  {% endif %}
+</div>
+{% endblock %}
+
+{% block content %}
+  {% if recent is not empty and members is not empty %}
+  <div class="row mt-3">
+    <div class="col-md-8">
+      <h4 class="mb-4 pb-2">{{ recent.title }}</h4>
+      {% include '@oe-bcl/bcl-recent-activities/recent-activities.html.twig' with recent.block_data only %}
+    </div>
+    <div class="col-md-4">
+      <h4 class="mt-4 mt-md-0 mb-4 pb-2">{{ members.title}}</h4>
+      {% if members.profiles is not empty and members.profiles is iterable %}
+        {% for _profile in members.profiles %}
+          {% include '@oe-bcl/bcl-user/user-view-compact.html.twig' with _profile only %}
+        {% endfor %}
+      {% endif %}
+      {% if members.more_link is not empty %}
+        {% include '@oe-bcl/bcl-link/link.html.twig' with members.more_link only %}
+      {% endif %}
+    </div>
+  </div>
+  {% endif %}
+  {% if contributions is not empty %}
+    <h4 class="my-4 pt-3 pb-2">{{ contributions.title}}</h4>
+    {% if contributions.listing is not empty %}
+      {% include '@oe-bcl/bcl-listing/listing.html.twig' with contributions.listing only %}
+    {% endif %}
+  {% endif %}
+{% endblock %}