@openeuropa/bcl-theme-joinup 0.1.202408021145

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

@@ -0,0 +1,195 @@
+{% apply spaceless %}
+
+{#
+Parameters:
+  - id (string) (default: gallery-random(1000))
+  - title (string) (default: '')
+  - title_tag (string) (default: 'h2')
+  - title_link: (link object) (default: {})
+  - title_attributes (drupal attrs)
+  - counter (string) (default: '')
+  - toggle_collapsed (string) (default: '')
+  - toggle_expanded (string) (default: '')
+  - next_label (string) (default: 'Next')
+  - prev_label (string) (default: 'Previous')
+  - max_visible_thumbnails (int) (default: 5)
+  - items (object[]) format: [
+      {
+        thumbnail (string) img path
+        media: (string) <img> tag
+        caption (string)
+        caption_title (string)
+      }
+    ]
+  - icon_path (string) (default: '')
+  - attributes (drupal attrs)
+
+  Blocks:
+    carousel
+#}
+
+{% set _id = id|default('gallery-' ~ random(1000)) %}
+{% 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 _counter = counter|default('') %}
+{% set _toggle_collapsed = toggle_collapsed|default('') %}
+{% set _toggle_expanded = toggle_expanded|default('') %}
+{% set _next_label = next_label|default('Next') %}
+{% set _prev_label = prev_label|default('Previous') %}
+{% set _max_visible_thumbnails = max_visible_thumbnails|default(5) %}
+{% set _items = items|default([]) %}
+{% set _icon_path = icon_path|default('') %}
+{% set _carousel_id = "carousel" ~ _id|capitalize %}
+{% set _modal_id = "modal" ~ _id|capitalize %}
+{% set _collapse_id = "collapse" ~ _id|capitalize %}
+{% set _carousel_items = [] %}
+
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
+{% set attributes = attributes.addClass('bcl-gallery') %}
+
+{% if _items is not empty and _items is iterable %}
+<div
+  {{ attributes }}
+>
+  {% if _title is not empty or _counter is not empty %}
+  <div class="d-sm-flex flex-sm-row align-items-sm-center">
+  {% if _title is not empty %}
+    <div class="flex-sm-grow-1">
+      {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+        title: _title,
+        title_tag: _title_tag,
+        title_link: _title_link,
+        attributes: _title_attributes,
+      } only %}
+    </div>
+  {% endif %}
+  {%- if _counter is not empty -%}
+    <div class="mb-3 mb-sm-0 fw-bold">
+      {{- _counter|replace({'%d': _items|length}) -}}
+    </div>
+  {%- endif -%}
+  </div>
+  {% endif %}
+  <div class="bcl-gallery__thumbnails">
+  {% for _batch in _items|batch(_max_visible_thumbnails) %}
+    {% if loop.index0 == 1 %}
+      <div class="bcl-gallery__thumbnails-collaspe collapse" id="{{ _collapse_id }}">
+    {% endif %}
+      <ul class="bcl-gallery__grid">
+        {% for _item in _batch %}
+          <li>
+          {% include '@oe-bcl/bcl-gallery/gallery-item.html.twig' with {
+            item: _item,
+            carousel_id: _carousel_id,
+            modal_id: _modal_id,
+            icon_path: _icon_path,
+            carousel_anchor: loop.index0 + (_max_visible_thumbnails * loop.parent.loop.index0),
+          } only %}
+          </li>
+        {% endfor %}
+      </ul>
+    {% if loop.last and loop.index0 >= 1 %}
+      </div>
+    {% endif %}
+  {% endfor %}
+    {% if _items|length > _max_visible_thumbnails %}
+      <div class="bg-lighter py-3 px-4 mt-2 rounded text-center">
+        <a
+          class="bcl-gallery__collapse standalone d-none d-sm-inline-block"
+          aria-controls="{{ _collapse_id }}"
+          data-bs-toggle="collapse"
+          aria-expanded="false"
+          role="button"
+          href="#{{ _collapse_id }}"
+        >
+          <span class="label-collapsed">{{ _toggle_collapsed|replace({'%d': _items|length}) }}</span>
+          <span class="label-expanded">{{ _toggle_expanded }}</span>
+          {% include '@oe-bcl/bcl-icon/icon.html.twig' with {
+            name: 'caret-down-fill',
+            size: '2xs',
+            path: _icon_path,
+            attributes: create_attribute().addClass('ms-2-5'),
+          } only %}
+        </a>
+        <a
+          class="bcl-gallery__mobile-view-more standalone d-inline-block d-sm-none"
+          data-bs-target="#{{ _carousel_id }}"
+          data-bs-slide-to="{{ _max_visible_thumbnails - 1 }}"
+          role="button"
+          href="#"
+        >
+          <span data-bs-target="#{{ _modal_id }}" data-bs-toggle="modal">
+            <span class="label-collapsed">{{ _toggle_collapsed|replace({'%d': _items|length}) }}</span>
+            {% include '@oe-bcl/bcl-icon/icon.html.twig' with {
+              name: 'caret-down-fill',
+              size: '2xs',
+              path: _icon_path,
+              attributes: create_attribute().addClass('ms-2-5'),
+            } only %}
+          <span>
+        </a>
+      </div>
+    {% endif %}
+  </div>
+  <div class="modal" id="{{ _modal_id }}" tabindex="-1" aria-labelledby="{{ _modal_id }}" aria-hidden="true" data-bs-backdrop="false">
+    <div class="modal-dialog modal-dialog-centered modal-fullscreen">
+      <div class="modal-content">
+        <div class="modal-header border-0 justify-content-between">
+        {% if _title is not empty %}
+          <div class="modal-title">
+            {% if _title is not empty %}
+              {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+                title: _title,
+                title_tag: 'h3',
+                attributes: create_attribute().addClass(['d-sm-block', 'd-none']),
+              } only %}
+            {% endif %}
+          </div>
+        {% endif %}
+          <div class="carousel-pager">
+            <span>1</span> / {{ _items|length -}}
+          </div>
+          <div class="modal-close">
+            {% set button_attributes = create_attribute()
+                                      .addClass('btn-close')
+                                      .setAttribute('aria-label', 'Close')
+                                      .setAttribute('data-bs-dismiss', 'modal')
+            %}
+            {% include '@oe-bcl/bcl-button/button.html.twig' with {
+              clean_class: true,
+              attributes: button_attributes
+            } only %}
+          </div>
+        </div>
+        <div class="modal-body d-flex align-items-center justify-content-center">
+        {% block carousel %}
+          {% for _item in _items %}
+            {% set _carousel_items = _carousel_items|merge([_item|merge({
+              caption_title: ('<iframe' in _item.media or '<video' in _item.media) ? '' : _item.caption_title,
+              caption: ('<iframe' in _item.media or '<video' in _item.media) ? '' : _item.caption,
+              image: ('<iframe' in _item.media or '<img' in _item.media) ? _item.media|replace({'src=': 'data-src='}) : _item.media,
+            })]) %}
+          {% endfor %}
+          {% include '@oe-bcl/bcl-carousel/carousel.html.twig' with {
+            id: _carousel_id,
+            with_controls: true,
+            with_indicators: false,
+            prev_label: _prev_label,
+            next_label: _next_label,
+            autoplay: false,
+            items: _carousel_items,
+          } only %}
+        {% endblock %}
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+{% endif %}
+
+{% endapply %}

package/templates/bcl-glossary/glossary-detail.html.twig

@@ -0,0 +1,43 @@
+{% extends '@oe-bcl/bcl-base-templates/content-type.html.twig' %}
+
+{% block  content %}
+	{% include  '@oe-bcl/bcl-heading/heading.html.twig' with {
+		title: 'Description',
+		title_tag: 'h2',
+	} only %}
+
+	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
+	volutpat ultricies massa, a dapibus libero porta nec. Sed facilisis dictum vestibulum. 
+	Fusce commodo hendrerit diam, pretium tempus leo varius sit amet. 
+	Etiam interdum, orci at sagittis luctus, lorem libero tempus mauris, a fermentum libero 
+	orci semper lacus. Duis tristique fringilla magna, eu egestas dolor molestie non. 
+	Fusce commodo hendrerit diam, pretium tempus leo varius sit amet. 
+	Etiam interdum, orci at sagittis luctus, lorem libero tempus mauris, a fermentum libero orci semper lacus. 
+	Duis tristique fringilla magna, eu egestas dolor molestie non.</p>
+	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse volutpat ultricies massa, 
+	a dapibus libero porta nec. Sed facilisis dictum vestibulum. Fusce commodo hendrerit diam, pretium tempus
+	leo varius sit amet. Etiam interdum, orci at sagittis luctus, lorem libero tempus mauris, a fermentum libero
+	orci semper lacus. Duis tristique fringilla magna, eu egestas dolor molestie non. </p>
+	<p>Lorem ipsum dolor
+	sit amet, consectetur adipiscing elit. Suspendisse volutpat ultricies massa, a dapibus libero porta nec.
+	Sed facilisis dictum vestibulum.
+	Fusce commodo hendrerit diam, pretium tempus leo varius sit amet. Etiam interdum, orci at sagittis luctus, 
+	lorem libero tempus mauris, a fermentum libero orci semper lacus. Duis tristique fringilla magna,
+	eu egestas dolor molestie non. </p>
+
+	{% include  '@oe-bcl/bcl-heading/heading.html.twig' with {
+		title: 'File Downloads',
+		title_tag: 'h2',
+		attributes: create_attribute().addClass('mt-5', 'mb-4'),
+	} only %}
+
+	{% for file in files %}
+		{% if loop.last %}
+			{% set file_classes = 'mt-4' %}
+		{% endif %}
+    <div {{ file_classes ? 'class="' ~ file_classes ~ '"' }}>
+      {% include '@oe-bcl/bcl-file/file.html.twig' with file only %}
+    </div>
+  {% endfor %}
+
+{% endblock %}

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

@@ -0,0 +1,19 @@
+{% extends '@oe-bcl/bcl-base-templates/listing-page.html.twig' %}
+
+{% block content_row %}
+		{% include '@oe-bcl/bcl-pagination/pagination.html.twig' with glossary only %}
+	<div class="col-12">
+	  <div class="d-md-flex justify-content-end mb-md-4-75 align-items-center border-bottom-md border-top-md border-gray-300 py-3">
+	    {% include '@oe-bcl/bcl-select/select.html.twig' with sortBy only %}
+	    {% include '@oe-bcl/bcl-select/select.html.twig' with itemsPerPage only %}
+	  </div>
+  </div>
+{% endblock %}
+
+{% block content_top %}
+	{% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+	  title: 'Starting with "A" (48)',
+	  title_tag: 'h2',
+	} only %}
+
+{% endblock %}

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">
+        <h1 class="mb-0 d-inline-block">{{ banner.title }}</h1>
+        {% 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">
+        <h2 class="mb-3 pb-2">{{ contact.title }}</h2>
+        {% if contact.profiles is not empty and contact.profiles is iterable %}
+          {% for _profile in contact.profiles %}
+            {% include '@oe-bcl/bcl-user/user-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">
+      <h2 class="mb-4 pb-2">{{ recent.title }}</h2>
+      {% 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>
+      {% 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 %}
+        {% 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 %}
+    <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 %}

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

@@ -0,0 +1,27 @@
+{% extends "@oe-bcl/bcl-base-templates/listing-page.html.twig" %}
+
+{% 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">
+      <h1 class="mb-0 d-inline-block">{{ banner.main_title }}</h1>
+      {% 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>
+  {% if navigation is not empty %}
+    {% include '@oe-bcl/bcl-navigation/navigation.html.twig' with navigation only %}
+  {% endif %}
+  </div>
+</div>
+{% endblock %}

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

@@ -0,0 +1,114 @@
+{% apply spaceless %}
+
+{# Parameters:
+  - variant (string) (default: 'neutral')
+    - options: ['ec', 'eu', 'neutral']
+  - navbar (Navbar object) (default: {})
+  - project_logo (object) (default: {})
+    format: {
+        path: '',
+        alt: '',
+        classes: ''
+      }
+  - site_name (string) (default: '')
+  - project_link (string) (default: '')
+  - head (Navbar object) (default: {})
+  - breadcrumbs (Breadcrumbs object) (default: {})
+  - language_modal (object) (default: {})
+  - light (boolean) (default: false)
+  - modals (modal[]) (default: [])
+  - attributes (drupal attrs)
+#}
+
+{% set _variant = variant|default('neutral') %}
+{% set _navbar = navbar|default({}) %}
+{% set _project_logo = project_logo|default({}) %}
+{% set _site_name = site_name|default('') %}
+{% set _project_link = project_link|default('') %}
+{% set _head = head|default({}) %}
+{% set _breadcrumbs = breadcrumbs|default({}) %}
+{% set _language_modal = language_modal|default({}) %}
+{% set _light = light ?? false %}
+{% set _modals = modals|default([]) %}
+
+{% set _site_name_classes = 'bcl-header__site-name' %}
+
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
+{% set attributes = attributes.addClass(['bcl-header', 'bcl-header--' ~ _variant]) %}
+
+{% if site_name_classes is not empty %}
+  {% set _site_name_classes = _site_name_classes ~ ' ' ~ site_name_classes %}
+{% endif %}
+
+{% set _project_classes = 'bcl-header__project' %}
+{% if _light is not empty %}
+  {% set _project_classes = _project_classes ~ ' light' %}
+{% endif %}
+
+<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
+        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 _site_name is not empty %}
+        <span class="{{ _site_name_classes }}">
+        {{- _site_name -}}
+        </span>
+      {% endif %}
+    {% if _project_link is not empty %}
+      </a>
+    {% endif %}
+    </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>
+  {% endif %}
+</header>
+
+{% for modal in _modals %}
+  {% 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 %}
+
+{% endapply %}

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

@@ -0,0 +1,40 @@
+{% apply spaceless %}
+
+{# Parameters:
+  - title (string) (default: '')
+  - title_tag (string) (default: 'h2')
+  - title_link: (link object) (default: {})
+  - attributes (drupal attrs)
+#}
+
+{% set _title = title|default('') %}
+{% set _title_tag = title_tag|default('h2') %}
+{% set _title_link = title_link|default({}) %}
+
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{%  endif %}
+
+{% if attributes.class is empty %}
+  {% set attributes = attributes.addClass(['mb-4']) %}
+{% endif %}
+
+{% set attributes = attributes.addClass(['bcl-heading']) %}
+
+{% if _title_link is not empty and _title is not empty and _title_link.label is empty %}
+  {% set _title_link = _title_link|merge({ label: _title }) %}
+{% endif %}
+
+{% if _title is not empty or _title_link is not empty %}
+<{{ _title_tag }} 
+  {{- attributes -}}
+>
+{%- if _title_link is not empty -%}
+  {% include '@oe-bcl/bcl-link/link.html.twig' with _title_link|merge({ standalone: true }) only %}
+{%- else -%}
+  {{- _title -}}
+{%- endif %}
+</{{ _title_tag }}>
+{% endif -%}
+
+{% endapply %}

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

@@ -0,0 +1,36 @@
+{% apply spaceless %}
+
+{# Parameters:
+  - name (string) (default: '')
+  - path (string) (default: '')
+  - size (string) (default: 's')
+    - options ['2xs', 'xs', 's', 'm', 'l', 'xl', '2xl', 'fluid']
+  - transformation (string) (default: '')
+    - options ['rotate-90', 'rotate-180', 'rotate-270', 'flip-horizontal', 'flip-vertical']
+  - attributes (drupal attrs)
+#}
+
+{% set _name = name|default('') %}
+{% set _path = path|default('') %}
+{% set _size = size|default('s') %}
+{% set _transformation = transformation|default('') %}
+
+{% set _classes = ['bi', 'icon--' ~ _size] %}
+
+{% if _transformation is not empty %}
+  {% set _classes = _classes|merge(['icon--' ~ _transformation]) %}
+{% endif %}
+
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
+{% set attributes = attributes.addClass(_classes) %}
+
+<svg
+  {{ attributes }}
+>
+  <use xlink:href="{{ _path ~ "#" ~ _name }}"/>
+</svg>
+
+{% endapply %}

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

@@ -0,0 +1,42 @@
+{% apply spaceless %}
+
+{#
+Parameters:
+  - title: (string) (default: '')
+  - title_tag: (string) (default: 'h2')
+  - title_link: (link object) (default: {})
+  - title_attributes (drupal attrs)
+  - links: (link[]) (default: [])
+  - id (string) (default: bcl-inpage-navigation-random(10))
+  - attributes (drupal attrs)
+#}
+
+{% 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 _links = links|default([]) %}
+{% set _id = id|default('bcl-inpage-navigation-' ~ random(10)) %}
+
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
+{% set attributes = attributes.addClass(['bcl-inpage-navigation', 'position-sticky']).setAttribute('id', _id) %}
+{% set title_attributes = _title_attributes.addClass('mb-0') %}
+
+<nav {{ attributes }}>
+  {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+    title: _title,
+    title_tag: _title_tag,
+    title_link: _title_link,
+    attributes: _title_attributes.addClass('mb-0'),
+  } only %}
+  {% include '@oe-bcl/bcl-navigation/navigation.html.twig' with {
+    'pills': true,
+    'vertical': true,
+    'items': _links,
+  } only %}
+</nav>
+
+{% endapply %}

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

@@ -0,0 +1,59 @@
+{% extends "@oe-bcl/bcl-base-templates/content-type.html.twig" %}
+
+{% block banner %}
+  {% if banner is defined %}
+    {% include '@oe-bcl/bcl-banner/banner.html.twig' with banner only %}
+  {% endif %}
+{% 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 }}
+        </div>
+        <div class="col-12 col-md-6">
+          {% include '@oe-bcl/bcl-featured-media/featured-media.html.twig' with featured_section.featured_media only %}
+        </div>
+      </div>
+    </div>
+  {% endif %}
+
+  {% if listing_section is defined %}
+    <div class="my-4">
+      {% include '@oe-bcl/bcl-listing/listing.html.twig' with listing_section only %}
+    </div>
+  {% endif %}
+
+  {% if inpage_banner is defined %}
+    <div class="my-4">
+      {% include '@oe-bcl/bcl-banner/banner.html.twig' with inpage_banner only %}
+    </div>
+  {% endif %}
+
+  {% if activity_featured is defined %}
+    <div class="my-4">
+      <h2 class="mb-4">{{ activity_featured.title }}</h2>
+      <div class="row">
+        <div class="col-12 col-md-6">
+          {{ 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 %}
+        </div>
+      </div>
+    </div>
+  {% endif %}
+
+  {% if activity_listing is defined %}
+    <div class="my-4">
+      {% include '@oe-bcl/bcl-listing/listing.html.twig' with activity_listing only %}
+    </div>
+  {% endif %}
+</div>
+
+{% endblock %}