@openeuropa/bcl-theme-joinup 0.18.0 → 0.19.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@openeuropa/bcl-theme-joinup",
   "author": "European Commission",
   "license": "EUPL-1.2",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "description": "OE - BCL theme joinup",
   "scripts": {
     "build": "npm-run-all build:*",
@@ -11,20 +11,22 @@
     "build:styles": "cross-env bcl-builder styles",
     "build:scripts": "cross-env bcl-builder scripts",
     "build:copy": "cross-env bcl-builder copy",
-    "clean": "rimraf css js templates",
+    "clean": "rimraf css js templates logos icons",
     "prepublish": "npm run build"
   },
   "devDependencies": {
-    "@babel/core": "7.16.7",
-    "@babel/plugin-transform-runtime": "7.16.7",
-    "@babel/preset-env": "7.16.7",
+    "@babel/core": "7.16.12",
+    "@babel/plugin-transform-runtime": "7.16.10",
+    "@babel/preset-env": "7.16.11",
     "@babel/preset-react": "7.16.7",
-    "@ecl/resources-flag-icons": "3.1.3",
-    "@fontsource/roboto": "4.5.1",
-    "@openeuropa/bcl-bootstrap": "^0.18.0",
-    "@openeuropa/bcl-builder": "^0.18.0",
-    "@openeuropa/bcl-theme-default": "^0.18.0",
-    "@openeuropa/bcl-twig-templates": "^0.18.0",
+    "@ecl/resources-ec-logo": "3.2.2",
+    "@ecl/resources-eu-logo": "3.2.2",
+    "@ecl/resources-flag-icons": "3.2.2",
+    "@fontsource/roboto": "4.5.2",
+    "@openeuropa/bcl-bootstrap": "^0.19.0",
+    "@openeuropa/bcl-builder": "^0.19.0",
+    "@openeuropa/bcl-theme-default": "^0.19.0",
+    "@openeuropa/bcl-twig-templates": "^0.19.0",
     "babel-jest": "27.4.6",
     "copyfiles": "2.4.1",
     "cross-env": "7.0.3",
@@ -50,5 +52,5 @@
     "design-system",
     "twig"
   ],
-  "gitHead": "a82834df6dff563a956a79bf2899c92742dd5820"
+  "gitHead": "8bfce06400c8829a46578797f0126b4e9c02e725"
 }

package/src/scss/base/_colors.scss

@@ -0,0 +1,22 @@
+// Custom theme colors
+
+$brand: #1073de;
+
+$primary: #143b76;
+$secondary: lighten(
+  desaturate(adjust-hue($brand, -1), 15.13),
+  47.84
+); // #e7f1fb
+$success: #18bf80;
+$warning: #eba843;
+$danger: #eb3434;
+
+$gray-100: #fafbfc;
+$gray-200: #f5f6f7;
+$gray-300: #dadee0;
+$gray-400: #a2a8ab;
+$gray-500: #858a8c;
+$gray-600: #6d7173;
+$gray-700: #555859;
+$gray-800: #3d3f40;
+$gray-900: #242626;

package/src/scss/base/_variables.scss

@@ -7,41 +7,17 @@ $enable-shadows: true;
 $box-shadow: 0 0.1rem 0.4rem 0.1rem rgba($black, 0.1);
 
 // Color system
-$brand: #1073de;
 $brand-darker: darken($brand, 15); // #0b4e97
-$primary: #143b76;
 $primary-darker: darken(desaturate($primary, 0.07), 4.12); // #113264
-$secondary: lighten(
-  desaturate(adjust-hue($brand, -1), 15.13),
-  47.84
-); // #e7f1fb
-$success: #18bf80;
-$warning: #eba843;
-$danger: #eb3434;
 
 $theme-colors: map-merge(
   $theme-colors,
   (
     "brand": $brand,
-    "primary": $primary,
-    "secondary": $secondary,
-    "success": $success,
-    "warning": $warning,
-    "danger": $danger,
   )
 );
 $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
 
-$gray-100: #fafbfc;
-$gray-200: #f5f6f7;
-$gray-300: #dadee0;
-$gray-400: #a2a8ab;
-$gray-500: #858a8c;
-$gray-600: #6d7173;
-$gray-700: #555859;
-$gray-800: #3d3f40;
-$gray-900: #242626;
-
 // EU/EC color variables
 $ec-blue: #17458f;
 $eu-blue: #1b4ac3;

package/src/scss/oe-bcl-joinup.scss

@@ -1,9 +1,15 @@
+// Base theme colors
+@import "@openeuropa/bcl-theme-default/src/scss/base/colors";
+
+// Custom theme colors
+@import "@openeuropa/bcl-theme-joinup/src/scss/base/colors";
+
 // Configuration
 @import "@openeuropa/bcl-bootstrap/scss/functions";
 @import "@openeuropa/bcl-bootstrap/scss/variables";
 
 // Override Bootstrap variables
-@import "@openeuropa/bcl-theme-default/src/scss/variables";
+@import "@openeuropa/bcl-theme-default/src/scss/base/variables";
 @import "@openeuropa/bcl-theme-joinup/src/scss/base/variables";
 
 @import "@openeuropa/bcl-bootstrap/scss/mixins";
@@ -51,7 +57,7 @@
 
 // Helpers
 @import "@openeuropa/bcl-bootstrap/scss/helpers";
-@import "@openeuropa/bcl-theme-default/src/scss/utilities";
+@import "@openeuropa/bcl-theme-default/src/scss/base/utilities";
 
 // Utilities
 @import "@openeuropa/bcl-bootstrap/scss/utilities/api";
@@ -59,7 +65,9 @@
 // Custom styles
 @import "@openeuropa/bcl-theme-default/src/scss/reset";
 @import "@openeuropa/bcl-theme-default/src/scss/header";
+@import "@openeuropa/bcl-theme-default/src/scss/footer";
 @import "@openeuropa/bcl-theme-default/src/scss/icon";
+@import "@openeuropa/bcl-theme-default/src/scss/button";
 @import "@openeuropa/bcl-theme-default/src/scss/search-form";
 @import "@openeuropa/bcl-theme-default/src/scss/tabs";
 @import "@openeuropa/bcl-theme-default/src/scss/input";

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

@@ -7,6 +7,7 @@
   - items (array) (default: []): format: [
       {
         title: (string),
+        title_tag: (string),
         content: (block),
         stay_open (boolean) (default: false) stay open after another selected
       },
@@ -42,7 +43,11 @@
     {% set _button_classes = _button_classes|merge(['collapsed']) %}
   {% endif %}
   <div class="accordion-item">
-    <h2 class="accordion-header" id="heading-{{ _id }}-{{ loop.index }}">
+    {%- set _item_title_tag = _item.title_tag|default('h2') %}
+    <{{ _item_title_tag }} 
+      class="accordion-header" 
+      id="heading-{{ _id }}-{{ loop.index }}"
+    >
       {% set button_attributes = create_attribute()
                                 .addClass(_button_classes)
                                 .setAttribute('data-bs-toggle', 'collapse')
@@ -56,7 +61,7 @@
         clean_class: true,
         attributes: button_attributes
       } only %}
-    </h2>
+    </{{ _item_title_tag }}>
     <div
       id="collapse-{{ _id }}-{{ loop.index }}"
       class="accordion-collapse collapse{{ _open_item ? ' show' }}"

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

@@ -52,7 +52,7 @@
     attributes: create_attribute().addClass(['flex-shrink-0 me-3 mt-1 align-self-start']),
   } only %}
 {% endif %}
-  <div class="alert-content">
+  <div class="alert-content flex-grow-1">
   {%- if _heading is not empty -%}
     <h4 class="alert-heading">{{ _heading }}</h4>
   {%- endif -%}

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

@@ -33,7 +33,7 @@
   {% set _classes = _classes|merge([ 'bg-' ~ _background]) %}
 {% endif %}
 
-{% if _background in ['light', 'warning', 'info'] %}
+{% if _background in ['light', 'warning'] %}
   {% set _classes = _classes|merge(['text-dark']) %}
 {% endif %}
 

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

@@ -21,6 +21,7 @@
   - feedback
   - share
   - related
+  - messages_area
 #}
 
 {% set _with_header = header|default(false) %}
@@ -70,6 +71,19 @@
 {% endif %}
 
 <main {{ attributes }}>
+{% if messages is defined and messages is not empty %}
+  {% block messages_area %}
+  <div class="container">
+    {% for message in messages %}
+    {% set message_attributes = create_attribute().addClass(['mt-lg-5', 'mt-2']) %}
+      {% include '@oe-bcl/bcl-alert/alert.html.twig' with message|merge({
+        attributes: message_attributes,
+      }) only %}
+    {% endfor %}
+  </div>
+  {% endblock %}
+{% endif %}
+
 {% if _with_banner %}
   {% block banner %}
     {% include '@oe-bcl/bcl-content-banner/content-banner.html.twig' with banner only %}

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

@@ -12,7 +12,22 @@
 {% set _attribution = attribution|default('') %}
 {% set _cite = cite|default('') %}
 {% set _alignment = alignment|default('left') %}
-{% set _classes = ['text-' ~ _alignment] %}
+{% set _classes = [
+  'text-' ~ _alignment,
+  "bg-lighter",
+  "p-2",
+  "px-2-5",
+  "border-4",
+  "border-secondary"
+] %}
+
+{% if _alignment == "center" %}
+  {% set _classes = _classes|merge(["border-top"]) %}
+{% elseif _alignment == "end" %}
+  {% set _classes = _classes|merge(["border-end"]) %}
+{% else %}
+  {% set _classes = _classes|merge(["border-start"]) %}
+{% endif %}
 
 {% if attributes is empty %}
   {% set attributes = create_attribute() %}
@@ -23,11 +38,11 @@
 <figure
   {{ attributes }}
 >
-  <blockquote class="blockquote">
+  <blockquote class="blockquote mb-2">
     <p>{{- _quote -}}</p>
   </blockquote>
 {% if _attribution is not empty %}
-  <figcaption class="blockquote-footer">
+  <figcaption class="blockquote-footer m-0">
     {{- _attribution -}}
   {% if _cite is not empty %}
     <cite title="{{ _cite }}">{{- _cite -}}</cite>

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

@@ -128,6 +128,14 @@
   {% endif %}
   {% if _image.rounded is not empty %}
     {% set _img_class = _img_class ~ ' rounded-' ~ _image.rounded %}
+  {% elseif _horizontal %}
+    {% if attributes.hasClass('border-0') %}
+      {% set _img_class = _img_class ~ ' rounded-1' %}
+    {% else %}
+      {% set _img_class = _img_class ~ ' rounded-0 rounded-start' %}
+    {% endif %}
+  {% elseif _card_header is not empty %}
+    {% set _img_class = _img_class ~ ' rounded-0' %}
   {% endif %}
   {% if _image.classes is not empty %}
     {% set _img_class = _img_class ~ " " ~ _image.classes %}

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

@@ -0,0 +1,5 @@
+{% extends '@oe-bcl/bcl-base-templates/content-type.html.twig' %}
+
+{% block content %}
+  {% include '@oe-bcl/bcl-form/form.html.twig' with form only %}
+{% endblock %}

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

@@ -21,7 +21,6 @@
 
 {% set _css_classes = [
   'bcl-content-banner',
-  'vw-100',
   'pt-lg-4-75',
 ] %}
 
@@ -69,7 +68,7 @@
 {% else %}
   {% set _card = _card|merge({
     horizontal_grid: {
-      right_col_classes: 'col-md-8 col-lg-9 col-xxl-8 px-sm-0 px-md-2-5',
+      right_col_classes: 'col-md-8 col-lg-9 col-xxl-8',
     },
   }) %}
 {% endif %}

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

@@ -22,7 +22,7 @@
   'justify-content-center',
   'bg-date',
   'text-light',
-  'pt-3',
+  'pt-2',
   'rounded-top',
   'mw-date',
 ] %}
@@ -38,9 +38,8 @@
 {% endif %}
 
 <time {{ attributes }}>
-  <span>{{ _day }}</span>
-  <span class="pb-3 text-uppercase">{{ _month }}</span>
-  <span class="bg-light w-100 text-center py-2 text-dark rounded-bottom mb-n1">{{ _year }}</span>
+  <span class="py-4 bg-white border border-bottom-0 w-100 fs-5 fw-medium text-dark text-center text-uppercase">{{ _day }} {{ _month }}</span>
+  <span class="bg-lighter border w-100 text-center fs-5 text-dark rounded-bottom mb-n1">{{ _year }}</span>
 </time>
 
 {% endspaceless %}

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

@@ -63,8 +63,10 @@
               {% include '@oe-bcl/bcl-icon/icon.html.twig' with _term.icon|merge({
                 attributes: create_attribute().addClass(_icon_classes)
               }) only %}
-            {%- endif -%}
+            <p class="mb-0 d-inline-block">{{ _term.label }}</p>
+          {%- else -%}
             {{- _term.label -}}
+          {%- endif -%}
           </dt>
         {% endfor %}
         {% if _variant == 'horizontal' %}
@@ -76,16 +78,18 @@
             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 %}
+          {%- 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 -%}
-          {% endif %}
-          {{- _item.term.label -}}
+            <p class="mb-0 d-inline-block">{{ _item.term.label }}</p>
+          {%- else -%}
+            {{- _item.term.label -}}
+          {%- endif -%}
         </dt>
       {% endif %}
     {% endif %}
@@ -95,9 +99,23 @@
           <div>
         {% endif %}
         {% for _definition in _item.definition %}
-          {% if _definition.label is not defined %}
-            <dd>{{- _definition -}}</dd>
-          {% endif %}
+          <dd>
+            {%- 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 -%}
+                {{- _definition.label -}}
+              {%- endif -%}
+            {%- endif -%}
+          </dd>
         {% endfor %}
         {% if _variant == 'horizontal' %}
           </div>

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

@@ -1,28 +1,13 @@
 {% 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>
+  {% include '@oe-bcl/bcl-inpage-navigation/inpage-navigation.html.twig' with sidebar only %}
 {% 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>
+  {% include '@oe-bcl/bcl-description-list/description-list.html.twig' with details_list only %}
+
+  <h3 id="item-1" 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.
@@ -32,10 +17,8 @@
   <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>
+  <h3 id="item-2" 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-featured-media/featured-media.html.twig

@@ -57,6 +57,8 @@
   {% set attributes = create_attribute() %}
 {% endif %}
 
+{% set attributes = attributes.addClass(["rounded", "overflow-hidden"]) %}
+
 {% if _with_text %}
 <div class="{{ _wrapper_classes }}">
 
@@ -75,7 +77,7 @@
         {% include '@oe-bcl/bcl-link/link.html.twig' with _read_more only %}
       {% endif %}
     </div>
-    <div class="{{ _col_classes }} order-{{ _alignment == "right" ? '2' : '1' }}">
+    <div class="{{ _col_classes }} order-{{ _alignment == "right" ? '2 mt-4 mt-md-0' : '1' }}">
 {% endif %}
 
 <figure

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

@@ -53,7 +53,7 @@
 {% if _icon is not empty %}
   {% set _container_classes = _container_classes ~ ' ms-2-5' %}
   {% set _icon = _icon|merge({
-    attributes: create_attribute().addClass(['mt-1', 'text-secondary'])
+    attributes: create_attribute().addClass(['mt-1', 'icon--file'])
   }) %}
 {% endif %}
 
@@ -72,7 +72,8 @@
   {% set attributes = attributes.addClass(['border', 'rounded-bottom']) %}
   {% set _image = _image|merge({
     position: "top",
-    classes: "mb-3"
+    classes: "mb-3",
+    rounded: 0,
   }) %}
   {% include '@oe-bcl/bcl-card/card.html.twig' with {
     horizontal: true,

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

@@ -1,6 +1,10 @@
 {% spaceless %}
 
 {# Parameters:
+  - title: (string) (default: '')
+  - title_tag: (string) (default: 'h2')
+  - helper_text (string) (default: '')
+  - antispam (string) (default: '')
   - items (array of array of objects) (default: []) format: [
    [
     {
@@ -20,13 +24,28 @@
   - submit (object) (default: {}) Array of objects or object of type button
 #}
 
+{% set _title = title|default('') %}
+{% set _title_tag = title_tag|default('h2') %}
+{% set _helper_text = helper_text|default('') %}
 {% set _items = items|default([]) %}
+{% set _antispam = antispam|default('') %}
 {% set _submit = submit|default({}) %}
 
 {% if attributes is empty %}
   {% set attributes = create_attribute() %}
 {% endif %}
 
+{% if _title is not empty %}
+  {% set _title_classes = 'fw-bold mb-4' %}
+  <{{ _title_tag }} class="{{ _title_classes }}">
+    {{- _title -}}
+  </{{ _title_tag }}>
+{% endif %}
+
+{% if _helper_text is not empty %}
+  <p>{{ _helper_text }}</p>
+{% endif %}
+
 <form
   {{ attributes }}
 >
@@ -98,6 +117,13 @@
   {% endif %}
 {% endfor %}
 {% endif %}
+{% if _antispam is not empty %}
+  <div class="mt-4 mb-2">
+    <div class="bg-light">
+      {{ _antispam }}
+    </div>
+  </div>
+{% endif %}
 {# submit #}
 {% if _submit is not empty %}
   {% if _submit.items is empty %}

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

@@ -21,7 +21,7 @@
 {% endif %}
 
 {% if _background == "gray" %}
-  {% set attributes = attributes.addClass(["bg-light", "px-4", "py-3"]) %}
+  {% set attributes = attributes.addClass(["bg-light", "px-4", "py-3", "rounded-2"]) %}
 {% endif %}
 
 <div

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

@@ -168,6 +168,12 @@
       {% endif %}
     {% endif %}
 
+    {% if _card.image is empty and _card.date is empty %}
+      {% set _card = _card|merge({
+        horizontal: false,
+      }) %}
+    {% endif %}
+
     {% set _cards = _cards|merge([_card]) %}
   {% endfor %}
 {% endif %}

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

@@ -6,6 +6,7 @@
   - max (int) (default: 100)
   - striped (boolean) (default: false)
   - animated (boolean) (default: false)
+  - hidden_label (boolean) (default: false)
   - label (string) (default: '')
   - bar_label (string) (default: '')
   - variant (string) (default: '')
@@ -17,6 +18,7 @@
 {% set _max = max|default(100) %}
 {% set _striped = striped|default(false) %}
 {% set _animated = animated|default(false) %}
+{% set _hidden_label = hidden_label|default(false) %}
 {% set _label = label|default('') %}
 {% set _bar_label = bar_label|default('') %}
 {% set _variant = variant|default('') %}
@@ -57,7 +59,9 @@
     aria-valuemin="{{ _min }}"
     aria-valuemax="{{ _max }}"
   >
-  {{- _bar_label -}}
+  {%- if not _hidden_label -%}
+    {{- _bar_label -}}
+  {%- endif -%}
   </div>
 </div>
 {% if _message is not empty %}

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

@@ -0,0 +1,60 @@
+{% extends '@oe-bcl/bcl-base-templates/content-type.html.twig' %}
+
+{% block sidebar %}
+  {% include '@oe-bcl/bcl-inpage-navigation/inpage-navigation.html.twig' with sidebar only %}
+{% endblock %}
+
+{% block content %}
+  {% include '@oe-bcl/bcl-project-status/project-status.html.twig' with project_details|merge({ charts: charts }) %}
+
+  <div class="border-bottom mb-4">
+    {% include '@oe-bcl/bcl-description-list/description-list.html.twig' with details_list only %}
+  </div>
+
+  {% include '@oe-bcl/bcl-description-list/description-list.html.twig' with coordinator_list only %}
+
+  {% for paragraph in paragraphs %}
+      <h3
+        class="fw-bold mb-4 pt-3"
+        id="{{ paragraph.title_id }}"
+      >
+        {{ paragraph.title }}
+      </h3>
+
+    {{ paragraph.content }}
+  {% endfor %}
+
+  <h3
+    class="fw-bold mb-4 pt-2"
+    id="{{ contributors.main_title_id }}"
+  >
+    {{ contributors.main_title }}
+  </h3>
+
+{% for contributor in contributors.listing %}
+  <h4 class="fw-bold mb-3">{{ contributor.title }}</h4>
+
+  {% include '@oe-bcl/bcl-description-list/description-list.html.twig' with contributor.list only %}
+
+{% endfor %}
+
+{% for achievement in achievements %}
+  <h3
+    class="fw-bold mb-4 pt-2"
+    id="{{ achievement.title_id }}"
+  >
+    {{ achievement.title }}
+  </h3>
+  {{ achievement.content }}
+{% endfor %}
+
+  <h3
+    class="fw-bold mb-4 pt-2"
+    id="{{ gallery.title_id }}"
+  >
+    {{ gallery.title }}
+  </h3>
+
+  {% include '@oe-bcl/bcl-featured-media/featured-media.html.twig' with gallery.featured only %}
+  {% include '@oe-bcl/bcl-carousel/carousel.html.twig' with gallery.carousel only %}
+{% endblock %}