@openeuropa/bcl-theme-joinup 0.1.202408021145

package/src/scss/base/_variables.scss

@@ -0,0 +1,100 @@
+// Override Bootstrap's Sass default variables for Joinup
+
+// General
+$border-radius: 0.5rem;
+$enable-negative-margins: true;
+$enable-shadows: true;
+$box-shadow: 0 0.1rem 0.4rem 0.1rem rgba($black, 0.1);
+
+// Color system
+$brand-darker: darken($brand, 15); // #0b4e97
+$primary-darker: darken(desaturate($primary, 0.07), 4.12); // #113264
+
+$theme-colors: map-merge(
+  $theme-colors,
+  (
+    "brand": $brand,
+  )
+);
+$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
+
+// EU/EC color variables
+$ec-blue: #17458f;
+$eu-blue: #1b4ac3;
+$eu-light-blue: #f4f6fb;
+
+// Links
+$link-color: $brand;
+$link-decoration: none;
+$link-hover-decoration: underline;
+
+// Headings
+$headings-color: $primary;
+
+// Buttons
+$btn-link-color: $link-color;
+
+$btn-hover-bg-shade-amount: 0;
+$btn-hover-bg-tint-amount: 0;
+$btn-disabled-opacity: 0.5;
+$btn-hover-border-shade-amount: 20%;
+$btn-border-radius: 0.4rem;
+$btn-padding-y: 0.4rem;
+$btn-padding-x: 1.6rem;
+
+$btn-hover-bg-shade-amount: 10%;
+$btn-hover-bg-tint-amount: 10%;
+$btn-active-bg-shade-amount: 20%;
+$btn-active-bg-tint-amount: 20%;
+
+// Typography
+
+$font-family-sans-serif: "Roboto", sans-serif;
+$font-family-base: "Roboto", sans-serif;
+$headings-font-weight: 700;
+
+// Adding a new font weight medium
+$font-weight-medium: 500;
+
+$display-font-weight: normal;
+
+// Font size xs (not existent on BS)
+// Available as a utilities, ex: fs-xs
+$font-size-sm: $font-size-base * 0.875; // 14px.
+$font-size-xs: $font-size-base * 0.75; // 12px.
+
+$h1-font-size: $font-size-base * 2.5; // 40px
+$h2-font-size: $font-size-base * 2; // 32px
+$h3-font-size: $font-size-base * 1.5; // 24px
+$h4-font-size: $font-size-base * 1.25; // 20px
+$h5-font-size: $font-size-base; // 16px
+$h6-font-size: $font-size-base; // 16px
+
+// Form elements
+$input-focus-border-color: tint-color($component-active-bg, 50%);
+$input-focus-width: 0;
+$input-btn-focus-box-shadow: none;
+
+$form-check-input-size-lg: $form-check-input-width + 0.3em !default;
+$form-font-size: $font-size-base !default;
+$form-font-size-lg: $font-size-base + 0.25rem !default;
+$form-select-height: 3rem !default;
+$form-select-height-md: 2.375rem !default;
+
+// pagination-variables
+$pagination-color: $gray-400;
+$pagination-bg: transparent;
+$pagination-border-width: 0;
+
+$pagination-focus-color: $gray-900;
+$pagination-focus-bg: transparent;
+$pagination-focus-box-shadow: none;
+
+$pagination-hover-color: $gray-900;
+$pagination-hover-bg: transparent;
+
+$pagination-active-color: $gray-900;
+$pagination-active-bg: transparent;
+
+$pagination-disabled-color: $gray-300;
+$pagination-disabled-bg: transparent;

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

@@ -0,0 +1,98 @@
+// 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";
+@import "@openeuropa/bcl-bootstrap/scss/maps";
+
+// Override Bootstrap 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";
+@import "@openeuropa/bcl-bootstrap/scss/utilities";
+
+// Import base elements
+@import "@openeuropa/bcl-theme-joinup/src/scss/base/fonts";
+@import "@openeuropa/bcl-theme-joinup/src/scss/base/typography";
+
+// Modify utilities
+@import "@openeuropa/bcl-theme-joinup/src/scss/base/utilities";
+
+// Layout & components
+@import "@openeuropa/bcl-bootstrap/scss/root";
+@import "@openeuropa/bcl-bootstrap/scss/reboot";
+@import "@openeuropa/bcl-bootstrap/scss/type";
+@import "@openeuropa/bcl-bootstrap/scss/images";
+@import "@openeuropa/bcl-bootstrap/scss/containers";
+@import "@openeuropa/bcl-bootstrap/scss/grid";
+@import "@openeuropa/bcl-bootstrap/scss/tables";
+@import "@openeuropa/bcl-bootstrap/scss/forms";
+@import "@openeuropa/bcl-bootstrap/scss/buttons";
+@import "@openeuropa/bcl-bootstrap/scss/transitions";
+@import "@openeuropa/bcl-bootstrap/scss/dropdown";
+@import "@openeuropa/bcl-bootstrap/scss/button-group";
+@import "@openeuropa/bcl-bootstrap/scss/nav";
+@import "@openeuropa/bcl-bootstrap/scss/navbar";
+@import "@openeuropa/bcl-bootstrap/scss/card";
+@import "@openeuropa/bcl-bootstrap/scss/accordion";
+@import "@openeuropa/bcl-bootstrap/scss/breadcrumb";
+@import "@openeuropa/bcl-bootstrap/scss/placeholders";
+@import "@openeuropa/bcl-bootstrap/scss/pagination";
+@import "@openeuropa/bcl-bootstrap/scss/badge";
+@import "@openeuropa/bcl-bootstrap/scss/alert";
+@import "@openeuropa/bcl-bootstrap/scss/progress";
+@import "@openeuropa/bcl-bootstrap/scss/list-group";
+@import "@openeuropa/bcl-bootstrap/scss/close";
+@import "@openeuropa/bcl-bootstrap/scss/toasts";
+@import "@openeuropa/bcl-bootstrap/scss/modal";
+@import "@openeuropa/bcl-bootstrap/scss/tooltip";
+@import "@openeuropa/bcl-bootstrap/scss/popover";
+@import "@openeuropa/bcl-bootstrap/scss/carousel";
+@import "@openeuropa/bcl-bootstrap/scss/spinners";
+@import "@openeuropa/bcl-bootstrap/scss/offcanvas";
+
+// Helpers
+@import "@openeuropa/bcl-bootstrap/scss/helpers";
+@import "@openeuropa/bcl-theme-default/src/scss/base/layout";
+@import "@openeuropa/bcl-theme-default/src/scss/base/utilities";
+
+// Utilities
+@import "@openeuropa/bcl-bootstrap/scss/utilities/api";
+
+// BCL mixins
+@import "@openeuropa/bcl-theme-default/src/scss/base/mixins";
+
+// Custom styles
+@import "@openeuropa/bcl-theme-default/src/scss/card";
+@import "@openeuropa/bcl-theme-default/src/scss/reset";
+@import "@openeuropa/bcl-theme-default/src/scss/header";
+@import "@openeuropa/bcl-theme-default/src/scss/description_list";
+@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";
+@import "@openeuropa/bcl-theme-default/src/scss/spinners";
+@import "@openeuropa/bcl-theme-default/src/scss/badge";
+@import "@openeuropa/bcl-theme-default/src/scss/multiselect";
+@import "@openeuropa/bcl-theme-default/src/scss/breadcrumb";
+@import "@openeuropa/bcl-theme-default/src/scss/banners";
+@import "@openeuropa/bcl-theme-default/src/scss/timeline";
+@import "@openeuropa/bcl-theme-default/src/scss/circular-progress-bar";
+@import "@openeuropa/bcl-theme-default/src/scss/carousel";
+@import "@openeuropa/bcl-theme-default/src/scss/gallery";
+@import "@openeuropa/bcl-theme-default/src/scss/pagination";
+
+// JoinUp Custom styles
+@import "@openeuropa/bcl-theme-joinup/src/scss/badges";
+@import "@openeuropa/bcl-theme-joinup/src/scss/buttons";
+@import "@openeuropa/bcl-theme-joinup/src/scss/form";
+@import "@openeuropa/bcl-theme-joinup/src/scss/pagination";
+@import "@openeuropa/bcl-theme-default/src/scss/inpage-navigation";
+@import "@openeuropa/bcl-theme-default/src/scss/language-list";

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

@@ -0,0 +1,100 @@
+{% apply spaceless %}
+
+{#
+  Parameters:
+  - title (string) (default: '')
+  - title_tag (string) (default: 'h2')
+  - title_link: (link object) (default: {})
+  - title_attributes: (drupal attrs)
+  - id (int) (default: random(1000))
+  - flush (boolean) (default: false)
+  - items (array) (default: []): format: [
+      {
+        title: (string),
+        title_tag: (string),
+        content: (block),
+        stay_open (boolean) (default: false)
+      },
+    ]
+  - open_item_id (int) (default: 0)
+  - 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 _id = id|default(random(1000)) %}
+{% set _flush = flush ?? false %}
+{% set _items = items|default([]) %}
+{% set _open_item_id = open_item_id|default(0) %}
+{% set _classes = ['accordion'] %}
+{% if _flush %}
+  {% set _classes = _classes|merge(['accordion-flush']) %}
+{% endif %}
+
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
+{% set attributes = attributes.addClass(_classes).setAttribute('id', 'accordion-' ~ _id) %}
+
+{% if _items is not empty %}
+<div
+  {{ attributes }}
+>
+{%- if _title is not empty -%}
+  {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+    title: _title,
+    title_tag: _title_tag,
+    title_link: _title_link,
+    attributes: _title_attributes,
+  } only %}
+{%- endif -%}
+
+{% for _item in _items %}
+  {% set _open_item = _open_item_id == loop.index %}
+  {% set _button_classes = ['accordion-button'] %}
+  {% if not _open_item %}
+    {% set _button_classes = _button_classes|merge(['collapsed']) %}
+  {% endif %}
+  <div class="accordion-item">
+    {%- 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')
+                                .setAttribute('autocomplete', 'off')
+                                .setAttribute('data-bs-target', '#collapse-' ~ _id ~ '-' ~ loop.index)
+                                .setAttribute('aria-controls', 'collapse-' ~ _id ~ '-' ~ loop.index)
+                                .setAttribute('aria-expanded', open_item ? 'true' : 'false')
+      %}
+      {% include '@oe-bcl/bcl-button/button.html.twig' with {
+        label: _item.title,
+        clean_class: true,
+        attributes: button_attributes
+      } only %}
+    </{{ _item_title_tag }}>
+    <div
+      id="collapse-{{ _id }}-{{ loop.index }}"
+      class="accordion-collapse collapse{{ _open_item ? ' show' }}"
+      aria-labelledby="heading-{{ _id }}-{{ loop.index }}"
+      role="region"
+    {% if not _item.stay_open %}
+      data-bs-parent="#accordion-{{ _id }}"
+    {% endif %}
+    >
+      <div class="accordion-body">
+        {%- set _content = _item.content|default('') %}
+        {%- block content _content -%}
+      </div>
+    </div>
+  </div>
+{% endfor %}
+</div>
+{% endif %}
+
+{% endapply %}

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

@@ -0,0 +1,83 @@
+{% apply spaceless %}
+
+{# Parameters:
+  - message (string) (default: '')
+  - heading (string) (default: '')
+  - variant (string) (default: 'primary')
+  - dismissible (boolean) (default: true)
+  - animated_dismiss (boolean) (default: true)
+  - icon_path (string) (default: '')
+  - icon_name (string) (default: '')
+  - attributes (drupal attrs)
+#}
+
+{% set _message = message|default('') %}
+{% set _heading = heading|default('') %}
+{% set _variant = variant|default('primary') %}
+{% set _dismissible = dismissible ?? true %}
+{% set _animated_dismiss = animated_dismiss ?? true %}
+{% set _icon_path = icon_path|default('') %}
+{% set _icon_name = icon_name|default('') %}
+
+{% set _classes = ['alert', 'alert-' ~ _variant|e('html_attr'), 'd-flex', 'align-items-center'] %}
+{% set _icon_names = {
+    primary: "info-circle-fill",
+    secondary: "info-circle-fill",
+    success: "check-circle-fill",
+    danger: "dash-circle-fill",
+    warning: "exclamation-triangle-fill",
+    light: "info-circle-fill",
+    info: "info-circle-fill",
+    dark: "info-circle-fill",
+  }
+%}
+
+{% if _dismissible %}
+  {% set _classes = _classes|merge(['alert-dismissible']) %}
+{% endif %}
+{% if _animated_dismiss %}
+  {% set _classes = _classes|merge(['fade', 'show']) %}
+{% endif %}
+
+{% set _classes = _classes|merge(['text-dark']) %}
+
+{% set _icon_classes = ['flex-shrink-0 me-3 mt-1 align-self-start' ] %}
+
+{% if _variant != 'light' %}
+  {% set _icon_classes = _icon_classes|merge(['text-' ~ _variant]) %}
+{% endif %}
+
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
+{% set attributes = attributes.addClass(_classes).setAttribute('role', 'alert') %}
+
+<div {{ attributes }}>
+{% if _icon_path is not empty %}
+  {% include '@oe-bcl/bcl-icon/icon.html.twig' with {
+    name: _icon_name ?: _icon_names[_variant],
+    size: 's',
+    path: _icon_path,
+    attributes: create_attribute().addClass(_icon_classes),
+  } only %}
+{% endif %}
+  <div class="alert-content flex-grow-1">
+  {%- if _heading is not empty -%}
+    <div class="alert-heading h4">{{ _heading }}</div>
+  {%- endif -%}
+  {%- if _message is not empty -%}
+    {{- _message -}}
+  {%- endif -%}
+  </div>
+{%- if _dismissible -%}
+  <button
+    type="button"
+    class="btn-close"
+    data-bs-dismiss="alert"
+    aria-label="Close">
+  </button>
+{%- endif -%}
+</div>
+
+{% endapply %}

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

@@ -0,0 +1,79 @@
+{% apply spaceless %}
+
+{# Parameters:
+  - label (string) (default: '')
+  - background: (string) (default: 'primary')
+  - url (string) (default: '')
+  - title (string) (default: '')
+  - dismissible (boolean) (default: false)
+  - assistive_text (string) (default: '')
+  - rounded_pill (boolean) (default: false)
+  - outline (boolean) (default: false)
+  - icon_path (string) (default: '')
+  - attributes (drupal attrs)
+#}
+
+{% set _label = label|default('') %}
+{% set _background = background|default('primary') %}
+{% set _url = url|default('') %}
+{% set _title = title|default('') %}
+{% set _dismissible = dismissible ?? false %}
+{% set _assistive_text = assistive_text|default('') %}
+{% set _rounded_pill = rounded_pill|default(false) %}
+{% set _outline = outline|default(false) %}
+{% set _icon_path = icon_path|default('') %}
+{% set _classes = ['badge'] %}
+
+{% if _rounded_pill %}
+  {% set _classes = _classes|merge(['rounded-pill']) %}
+{% endif %}
+
+{% if _outline %}
+  {% set _classes = _classes|merge(['badge-outline-' ~ _background]) %}
+{% else %}
+  {% set _classes = _classes|merge(['text-bg-' ~ _background]) %}
+{% endif %}
+
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
+{%- if _title is not empty -%}
+  {% set attributes = attributes.setAttribute('title', _title) %}
+{%- endif -%}
+
+{% set attributes = attributes.addClass(_classes) %}
+
+{% set _label %}
+  {%- if _assistive_text is not empty -%}
+  <span class="visually-hidden">
+    {{- _assistive_text -}}
+  </span>
+  {%- endif -%}
+  {{- _label -}}
+  {%- if _dismissible -%}
+  <span class="icon--close" aria-hidden="true">
+    {% include '@oe-bcl/bcl-icon/icon.html.twig' with {
+      name: "x-circle-fill",
+      size: "xs",
+      path: _icon_path,
+    } only %}
+  </span>
+  {%- endif -%}
+{% endset %}
+
+{%- if _url is not empty -%}
+  {% include '@oe-bcl/bcl-link/link.html.twig' with {
+    label: _label,
+    path: _url,
+    attributes: attributes,
+  } only %}
+{%- else -%}
+<span
+  {{ attributes }}
+>
+  {{- _label -}}
+</span>
+{%- endif -%}
+
+{% endapply %}

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

@@ -0,0 +1,96 @@
+{% apply spaceless %}
+
+{# Parameters:
+  - title: (string) (default: '')
+  - title_tag: (string) (default: 'div')
+  - title_link: (link object) (default: {})
+  - title_attributes (drupal attrs)
+  - description: (string) (default: '')
+  - link: (link object) (default: {})
+  - image: (string) <img> tag
+  - shade: (boolean) (default: false)
+  - hero: (boolean) (default: false)
+  - full_width: (boolean) (default: false)
+  - fixed_height: (boolean) (default: false)
+  - content_classes: (string) (default: '')
+  - attributes (drupal attrs)
+#}
+
+{% set _title = title|default('') %}
+{% set _title_tag = title_tag|default('div') %}
+{% set _title_link = title_link|default({}) %}
+{% set _title_attributes = title_attributes ?: create_attribute() %}
+{% set _description = description|default('') %}
+{% set _link = link|default({}) %}
+{% set _image = image|default('') %}
+{% set _shade = shade ?? false %}
+{% set _hero = hero ?? false %}
+{% set _full_width = full_width ?? false %}
+{% set _fixed_height = fixed_height ?? false %}
+{% set _content_classes = content_classes|default('') %}
+
+{% set _content_class = 'bcl-banner__content' %}
+{% if _content_classes is not empty %}
+  {% set _content_class = _content_class ~ " " ~ _content_classes %}
+{% endif %}
+
+{% set _title_classes = ['display-6'] %}
+{% if _description is not empty or _link is not empty %}
+  {% set _title_classes = _title_classes|merge(['mb-3']) %}
+{% endif %}
+
+{% set _title_attributes = _title_attributes.addClass(_title_classes) %}
+
+{% set _classes = ['bcl-banner'] %}
+
+{% if _shade %}
+  {% set _classes = _classes|merge(['shade']) %}
+{% endif %}
+
+{% if _image and not _shade %}
+  {% set _classes = _classes|merge(['overlay']) %}
+{% endif %}
+
+{% if _hero %}
+  {% set _classes = _classes|merge(['hero']) %}
+{% endif %}
+
+{% if _full_width %}
+  {% set _classes = _classes|merge(['full-width']) %}
+{% endif %}
+
+{% if _fixed_height %}
+  {% set _classes = _classes|merge(['fixed-height']) %}
+{% endif %}
+
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
+{% set attributes = attributes.addClass(_classes) %}
+
+<div {{ attributes }}>
+  {% if _image is not empty %}
+    <div class="bcl-banner__image" style="background-image:url({{ _image }})"></div>
+  {% endif %}
+  <div class="container">
+    <div class="{{ _content_class }}">
+      {% if _title is not empty %}
+        {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+          title: _title,
+          title_tag: _title_tag,
+          title_link: _title_link,
+          attributes: _title_attributes,
+        } only %}
+      {% endif %}
+    {% if _description is not empty %}
+      <p class="mb-4">{{ _description }}</p>
+    {% endif %}
+    {% if _link.path %}
+      {% include '@oe-bcl/bcl-link/link.html.twig' with _link only %}
+    {% endif %}
+    </div>
+  </div>
+</div>
+
+{% endapply %}

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

@@ -0,0 +1,139 @@
+{% apply spaceless %}
+
+{#
+  Parameters:
+  - with_header (boolean) (default: false)
+  - with_footer (boolean) (default: false)
+  - with_banner (boolean) (default: false)
+  - with_sidebar (boolean) (default: false)
+  - sidebar_size (string) (default: 'normal')
+    options: ['normal', 'large']
+  - landing (boolean) (default: false)
+  - content_type (string) (default: '')
+  - attributes (drupal attrs)
+
+  BLOCKS:
+  - header
+  - footer
+  - content
+  - content_row
+  - sidebar
+  - banner
+  - feedback
+  - share
+  - related
+  - messages_area
+#}
+
+{% set _with_header = header ?? false %}
+{% set _with_footer = footer ?? false %}
+{% set _with_banner = banner ?? false %}
+{% set _with_sidebar = sidebar ?? false %}
+{% set _sidebar_size = sidebar_size|default('normal') %}
+{% set _landing = landing ?? false %}
+{% set _content_type = content_type|default('') %}
+{% set _classes = ['bcl-node-type'] %}
+
+{% if _with_sidebar %}
+  {% set _col_classes = {
+    left: [
+      'col-12',
+      'bcl-sidebar',
+    ],
+    right: [
+      'col-12',
+    ],
+  } %}
+
+  {% if _sidebar_size == 'normal' %}
+    {% set _col_classes = _col_classes|merge({
+      left: _col_classes.left|merge(['col-lg-3']),
+      right: _col_classes.right|merge(['col-lg-9', 'col-xxl-8']),
+    }) %}
+  {% endif %}
+
+  {% if _sidebar_size == 'large' %}
+    {% set _col_classes = _col_classes|merge({
+      left: _col_classes.left|merge(['col-lg-4']),
+      right: _col_classes.right|merge(['col-lg-8']),
+    }) %}
+  {% endif %}
+{% endif %}
+
+{% if _content_type is not empty %}
+  {% set _classes = _classes|merge(['bcl-' ~ _content_type]) %}
+{% endif %}
+
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
+{% if _with_header %}
+  {% include '@oe-bcl/bcl-header/header.html.twig' with header only %}
+{% 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 %}
+  {% endblock %}
+{% endif %}
+
+  <div class="container mt-md-4-75 mt-4">
+    <div class="row">
+      {% block content_row %}
+        {{ content_row }}
+      {% endblock %}
+    {% if _with_sidebar %}
+      <div class="{{ _col_classes.left|join(' ') }}">
+        {% block sidebar %}{% endblock %}
+      </div>
+      <div class="{{ _col_classes.right|join(' ') }}">
+    {% else %}
+      {% if _landing %}
+      <div class="col-12">
+      {% else %}
+      <div class="col-lg-10 col-xl-9 col-xxl-8">
+      {% endif %}
+    {% endif %}
+      {% block content_top %}
+        {{ content_top }}
+      {% endblock %}
+      {% block content %}
+        {{ content }}
+      {% endblock %}
+      {% block content_bottom %}
+        {{ content_bottom }}
+      {% endblock %}
+      {% block related %}
+        {{ related }}
+      {% endblock %}
+      {% block share %}
+        {{ share }}
+      {% endblock %}
+    </div>
+  </div>
+</main>
+
+{% block feedback %}
+  {{ feedback }}
+{% endblock %}
+
+{% if _with_footer %}
+  {% include '@oe-bcl/bcl-footer/footer.html.twig' with footer only %}
+{% endif %}
+
+{% endapply %}