vliz-be-theme 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: c00df4c793fb190c9d1bb371d0375582bbf796ced23317cb03b6dfc238ae26fd
+  data.tar.gz: 8e681a37335d55558271be338bab9e6170f8418bafea46753320f3a0c56c170d
+SHA512:
+  metadata.gz: e874d6e66c53eacdc140ae190b60fad5714dea0717e56c3b1190101b9ff837184cfe432bd1776927403b8631a1bf03089d15c06c2bcd215990f31c853ffae6e4
+  data.tar.gz: 39781c460347a433127e52cce2c926bfdf5b611550a7cc6329ba124202d0ad951170f4ccf5a0586d2f4342c7eb9e773fbd0f64dd4b64d304787c6cf1fa5aed5e

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2023 cedricdcc
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,50 @@
+# vliz-be-theme
+
+Welcome to your new Jekyll theme! In this directory, you'll find the files you need to be able to package up your theme into a gem. Put your layouts in `_layouts`, your includes in `_includes`, your sass files in `_sass` and any other assets in `assets`.
+
+To experiment with this code, add some sample content and run `bundle exec jekyll serve` – this directory is setup just like a Jekyll site!
+
+TODO: Delete this and the text above, and describe your gem
+
+## Installation
+
+Add this line to your Jekyll site's `Gemfile`:
+
+```ruby
+gem "vliz-be-theme"
+```
+
+And add this line to your Jekyll site's `_config.yml`:
+
+```yaml
+theme: vliz-be-theme
+```
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install vliz-be-theme
+
+## Usage
+
+TODO: Write usage instructions here. Describe your available layouts, includes, sass and/or assets.
+
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub at https://github.com/[USERNAME]/vliz-be-theme. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](https://www.contributor-covenant.org/) code of conduct.
+
+## Development
+
+To set up your environment to develop this theme, run `bundle install`.
+
+Your theme is setup just like a normal Jekyll site! To test your theme, run `bundle exec jekyll serve` and open your browser at `http://localhost:4000`. This starts a Jekyll server using your theme. Add pages, documents, data, etc. like normal to test your theme's contents. As you make modifications to your theme and to your content, your site will regenerate and you should see the changes in the browser after a refresh, just like normal.
+
+When your theme is released, only the files in `_layouts`, `_includes`, `_sass` and `assets` tracked with Git will be bundled.
+To add a custom directory to your theme-gem, please edit the regexp in `vliz-be-theme.gemspec` accordingly.
+
+## License
+
+The theme is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/_config.yml

@@ -0,0 +1,4 @@
+base_uri: "" # Base URI for your site, e.g. http://example.com/test-repo/ => for development leave empty for gh-pages fill in the name of the repo of not the main gh-pages repo
+title: "Open Science @ VLIZ"
+gems:
+  - jekyll-mermaid

data/_data/articles.yml

@@ -0,0 +1,43 @@
+
+title: "example block gallery"
+clickthrough_url: "https://example.org/RickAstley"
+clickthrough_text: "example clickthrough text"
+items:
+  - title: "Placeholder title 1"
+    link: "https://www.vliz.be/testerep/nl/2023-06-zeekrant"
+    image: "https://www.ecomare.nl/wp-content/uploads/2017/04/5049-strand-duin-ogb-1.jpg"
+    description: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae nisi eget nunc ultricies ali quam. Si non lectus quisque non tellus orci ac auctor augue mauris augue neque. Nunc sed veli
+    date: 23/06/2023
+    tags:
+      - example tag 1
+      - example tag 2
+      - example tag 3
+  - title: "Placeholder title 2"
+    link: https://www.vliz.be/testerep/nl/2023-05-mee-op-missie-een-gezonde-toekomst-voor-de-europese-wateren
+    image: https://img.freepik.com/vrije-vector/kalme-zee-of-oceaanoppervlak-met-kleine-golven-en-blauwe-lucht-vlakke-afbeelding_1284-62000.jpg?w=2000
+    description: een gezonde toekomst voor de Europese wateren. Dat blijkt uit een nieuwe studie van de Universiteit van Californië. De onderzoekers ontdekten dat de oceanen verantwoordelijk zijn voor 50 tot 80 procent van de zuurstof in de atmosfeer. De rest komt van planten op het land.
+    date: 13/05/2023
+    tags:
+      - example tag 1
+      - example tag 2
+      - example tag 3
+      - example tag 4
+      - Blauwe economie
+  - title: "Placeholder title 3"
+    link: https://www.vliz.be/testerep/nl/2023-06-meeste-zuurstof-die-we-inademen-komt-uit-zee
+    image: /assets/media/img/placeholder.png
+    description: De meeste zuurstof die we inademen komt uit zee. Dat blijkt uit een nieuwe studie van de Universiteit van Californië. De onderzoekers ontdekten dat de oceanen verantwoordelijk zijn voor 50 tot 80 procent van de zuurstof in de atmosfeer. De rest komt van planten op het land.
+    date: 13/06/2023
+    tags:
+      - Zee & gezondheid
+      - Testerep magazine
+      - Klimaat
+  - title: "Placeholder title 4"
+    link: https://www.vliz.be/testerep/nl/2023-06-meeste-zuurstof-die-we-inademen-komt-uit-zee
+    image: /assets/media/img/SquidRNA.webp
+    description: De meeste zuurstof die we inademen komt uit zee. Dat blijkt uit een nieuwe studie van de Universiteit van Californië. De onderzoekers ontdekten dat de oceanen verantwoordelijk zijn voor 50 tot 80 procent van de zuurstof in de atmosfeer. De rest komt van planten op het land.
+    date: 13/06/2023
+    tags:
+      - Zee & gezondheid
+      - Testerep magazine
+      - Klimaat

data/_data/bg_with_block.yml

@@ -0,0 +1,5 @@
+title: "Example title here"
+clickthrough_button_text: "Example button text here"
+clickthrough_button_url: "https://www.vliz.be/nl/wie-we-zijn/over-vliz"
+description: "Example description here"
+image: "/assets/media/img/SquidRNA.webp"

data/_data/carrousel.yml

@@ -0,0 +1,28 @@
+title: "Example title for carrousel section here"
+clickthrough_button_text: "Example button text here"
+clickthrough_button_url: "https://www.vliz.be/nl/wie-we-zijn/over-vliz"
+items:
+  - title: "Example title 1"
+    description: "Example description 1"
+    clickthrough_url: "https://www.vliz.be/nl/wie-we-zijn/over-vliz"
+    clickthrough_button_text: "Example button text here"
+  - title: "Example title 2"
+    description: "Example description 2"
+    clickthrough_url: "https://www.vliz.be/nl/wie-we-zijn/over-vliz"
+    clickthrough_button_text: "Example button text here"
+  - title: "Example title 3"
+    description: "Example description 3"
+    clickthrough_url: "https://www.vliz.be/nl/wie-we-zijn/over-vliz"
+    clickthrough_button_text: "Example button text here"
+  - title: "Example title 4"
+    description: "Example description 4"
+    clickthrough_url: "https://www.vliz.be/nl/wie-we-zijn/over-vliz"
+    clickthrough_button_text: "Example button text here"
+  - title: "Example title 5"
+    description: "Example description 5"
+    clickthrough_url: "https://www.vliz.be/nl/wie-we-zijn/over-vliz"
+    clickthrough_button_text: "Example button text here"
+  - title: "Example title 6"
+    description: "Example description 6"
+    clickthrough_url: "https://www.vliz.be/nl/wie-we-zijn/over-vliz"
+    clickthrough_button_text: "Example button text here"

data/_data/carrousel_two.yml

@@ -0,0 +1,33 @@
+title: "Example title here"
+clickthrough_button_text: "Example button text here"
+clickthrough_button_url: "https://www.vliz.be/nl/wie-we-zijn/over-vliz"
+items:
+  - title: "Example title 1"
+    description: "Example description 1"
+    clickthrough_url: "https://www.vliz.be/nl/wie-we-zijn/over-vliz"
+    clickthrough_button_text: "Example 1 button text here"
+  - title: "Example title 2"
+    description: "Example description 2"
+    clickthrough_url: "https://www.vliz.be/nl/wie-we-zijn/over-vliz"
+    image: "/assets/media/img/SquidRNA.webp"
+    clickthrough_button_text: "Example 2 button text here"
+  - title: "Example title 3"
+    description: "Example description 3"
+    clickthrough_url: "https://www.vliz.be/nl/wie-we-zijn/over-vliz"
+    image: "/assets/media/img/placeholder.png"
+    clickthrough_button_text: "Example 3 button text here"
+  - title: "Example title 4"
+    description: "Example description 4"
+    clickthrough_url: "https://www.vliz.be/nl/wie-we-zijn/over-vliz"
+    image: "https://img.freepik.com/vrije-vector/kalme-zee-of-oceaanoppervlak-met-kleine-golven-en-blauwe-lucht-vlakke-afbeelding_1284-62000.jpg?w=2000"
+    clickthrough_button_text: "Example 4 button text here"
+  - title: "Example title 5"
+    description: "Example description 5"
+    clickthrough_url: "https://www.vliz.be/nl/wie-we-zijn/over-vliz"
+    image: "/assets/media/img/placeholder.png"
+    clickthrough_button_text: "Example 5 button text here"
+  - title: "Example title 6"
+    description: "Example description 6"
+    clickthrough_url: "https://www.vliz.be/nl/wie-we-zijn/over-vliz"
+    image: "https://www.ecomare.nl/wp-content/uploads/2017/04/5049-strand-duin-ogb-1.jpg"
+    clickthrough_button_text: "Example 6 button text here"

data/_data/main_banner.yml

@@ -0,0 +1,24 @@
+title: "Open Science"
+description: "VLIZ is committed to Open Science. We believe that sharing data, software, publications and other research outputs is essential to advance science."
+button_text: "More About The Open Science Team"
+button_url: "https://www.vliz.be/nl/wie-we-zijn/over-vliz"
+banner_media: "/assets/media/img/graph_concept_art.jpg"
+topics:
+- title: Klimaat
+  image: "/assets/media/img/placeholder.png"
+  clickthrough_url: "https://www.vliz.be/nl/klimaat"
+- title: Biodiversiteit
+  image: "/assets/media/img/placeholder.png"
+  clickthrough_url: "https://www.vliz.be/nl/biodiversiteit"
+- title: Ecosysteem
+  image: "/assets/media/img/placeholder.png"
+  clickthrough_url: "https://www.vliz.be/nl/ecosysteem"
+- title: Gezondheid
+  image: "/assets/media/img/placeholder.png"
+  clickthrough_url: "https://www.vliz.be/nl/gezondheid"
+- title: Economie
+  image: "/assets/media/img/placeholder.png"
+  clickthrough_url: "https://www.vliz.be/nl/economie"
+- title: Energie
+  image: "/assets/media/img/placeholder.png"
+  clickthrough_url: "https://www.vliz.be/nl/energie"

data/_data/simple_questions.yml

@@ -0,0 +1,16 @@
+title: "Example title for carrousel section here"
+clickthrough_button_text: "Example button text here"
+clickthrough_button_url: "https://www.vliz.be/nl/wie-we-zijn/over-vliz"
+items:
+  - title: "Example title 1"
+    description: "Example description 1"
+    clickthrough_url: "https://www.vliz.be/nl/wie-we-zijn/over-vliz"
+    clickthrough_button_text: "Example button text here"
+  - title: "Example title 2"
+    description: "Example description 2"
+    clickthrough_url: "https://www.vliz.be/nl/wie-we-zijn/over-vliz"
+    clickthrough_button_text: "Example button text here"
+  - title: "Example title 3"
+    description: "Example description 3"
+    clickthrough_url: "https://www.vliz.be/nl/wie-we-zijn/over-vliz"
+    clickthrough_button_text: "Example button text here"

data/_includes/banner/banner.html

@@ -0,0 +1,50 @@
+<div class="col-12 field__item">
+    <div class="paragraph paragraph--type--hero paragraph--view-mode--default">
+      <div class="hero-container">
+        <div
+          class="field field--name-field-media field--type-entity-reference field--label-hidden field__items">
+          <article class="media media--type-video media--view-mode-hero">
+            {% assign media_object = banner.banner_media | default:"assets/media/video/Homepage_website_SimonStevin.mp4" %}
+            {% if media_object contains '.mp4' %}
+                {% if media_object contains 'http' %}
+                <video autoplay="autoplay" loop="loop" muted="muted" width="640" height="480">
+                <source src="{{ media_object }}" type="video/mp4" />
+                </video>
+                {% else %}
+                <video autoplay="autoplay" loop="loop" muted="muted" width="640" height="480">
+                <source src="{{ site.baseurl }}{{ media_object }}" type="video/mp4" />
+                </video>
+                {% endif %}
+            {% else %}
+                {% if media_object contains 'http' %}
+                <img 
+                    loading="lazy"
+                    src="{{ media_object }}"
+                    width="640" height="480" alt="{{ banner.title}}"
+                    title="{{ banner.title}}" typeof="foaf:Image"
+                    class="image-style-medium-cropped"
+                />
+                {% else %}
+                <img 
+                    loading="lazy"
+                    src="{{ site.baseurl }}{{ media_object }}"
+                    width="640" height="480" alt="{{ banner.title}}"
+                    title="{{ banner.title}}" typeof="foaf:Image"
+                    class="image-style-medium-cropped"
+                />
+                {% endif %}
+            {% endif %}
+          </article>
+        </div>
+        <div
+          class="clearfix text-formatted field field--name-field-body field--type-text-long field--label-hidden field__items grayoverlay">
+          <div class="field__item">
+            <h2>{{ banner.title}}</h2>
+            <p>{{ banner.description }} </p>
+            <p><a class="more-link" href="{{ banner.button_url}}">{{ banner.button_text}}</a>
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>

data/_includes/banner/main.html

@@ -0,0 +1,35 @@
+<div class="col-12 field__item">
+    <div
+      class="paragraph paragraph--type--from-library paragraph--view-mode--default">
+      {% include banner/banner.html banner=banner %}
+      <div
+        class="field field--name-paragraphs field--type-entity-reference-revisions field--label-hidden">
+        <div>
+          <div class="field__item">
+            <div class="paragraph paragraph--type--container paragraph--view-mode--default">
+              <div
+                class="field field--name-field-paragraph-container-items field--type-entity-reference-revisions field--label-hidden">
+                <div class="row field__items">
+                    {% assign counter = 0 %}
+                    {% assign numtopics = banner.topics | size %}
+                    {% assign mdl = numtopics | modulo: 3 %}
+                    {% assign lmz = numtopics | minus: mdl %}
+                    {% for topic in banner.topics %}
+                    {% assign counter = counter | plus: 1 %}
+                    {% assign mlnz = lmz | minus: 3 %}
+                    {% assign colw = '4' %}
+                    {% if numtopics | modulo: 3 == 0  %}
+                        {% assign colw = '4' %}
+                    {% endif %}
+                    {% include banner/topic.html colw=colw topic=topic  %}
+                    {% endfor %}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+      </div>
+
+    </div>
+  </div>

data/_includes/banner/topic.html

@@ -0,0 +1,20 @@
+<div class="col-6 col-lg-{{colw}} field__item">
+    <div
+      class="paragraph paragraph--type--image-link paragraph--view-mode--default">
+      <div
+        class="field field--name-field-image field--type-image field--label-hidden field__items">
+        <a href="{{ topic.clickthrough_url }}"><img loading="lazy"
+            {% if topic.image contains 'http'%}
+            src="{{ topic.image }}"
+            {% else %}
+            src="{{ site.baseurl }}{{ topic.image }}"
+            {% endif %}
+            width="600" height="450" alt="{{topic.title}}" typeof="Image"
+            class="image-style-medium-cropped" /></a>
+      </div>
+      <h3
+        class="field field--name-field-title field--type-string field--label-hidden field__items">
+        <a href="{{topic.clickthrough_url}}">{{topic.title}}</a>
+      </h3>
+    </div>
+</div>

data/_includes/block_gallery_cards/card.html

@@ -0,0 +1,36 @@
+<div class="views-row">
+    <article role="article" about="{{card.link}}"
+        class="node node--type-news node--promoted node--view-mode-teaser">
+        <div class="node__content">
+            <div class="before">
+                <a href="{{ card.link }}"
+                    hreflang="nl" target="_blank"> <img loading="lazy"
+                        {% if card.image contains 'http' %}
+                        src="{{ card.image }}"
+                        {% else %}
+                        src="{{ site.baseurl }}{{ card.image }}"
+                        {% endif %}
+                        width="600" height="450" alt="{{ card.title }}"
+                        title="{{card.title}}" typeof="foaf:Image"
+                        class="image-style-medium-cropped" />
+                </a>
+            </div>
+            <div class="main">
+                <div class="main-inner">
+                    {% for tag in card.tags %}
+                    <a href="#" class="field__news_teaser">{{tag}}</a>
+                    {% endfor %}
+                    <h3>
+                        <a href="{{ card.link }}"
+                            hreflang="nl" target="_blank"><span
+                                class="field field--name-title field--type-string field--label-hidden">{{card.title}}</span>
+                        </a>
+                    </h3>
+                    <div class="node-date">
+                        {{card.date}}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </article>
+</div>

data/_includes/block_gallery_cards/first_card.html

@@ -0,0 +1,50 @@
+<div class="attachment attachment-before">
+    <div class="views-element-container">
+        <div
+            class="view-news-promoted-first view view-news view-id-news view-display-id-attachment_1">
+            <div class="view-content">
+                <div class="views-row">
+                    <article role="article" about="{{ card.link }}"
+                        class="node node--type-news node--promoted node--view-mode-extended-teaser">
+                        <div class="node__content">
+                            <div class="before">
+                                <a href="{{ card.link }}" hreflang="nl"
+                                    target="_blank">
+                                    <img loading="lazy"
+                                        {% if card.image contains 'http' %}
+                                        src="{{ card.image }}"
+                                        {% else %}
+                                        src="{{ site.baseurl }}{{ card.image }}"
+                                        {% endif %}
+                                        width="1000" height="562" alt="{{ card.title }}"
+                                        title="{{ card.title }}" typeof="foaf:Image"
+                                        class="image-style-large-cropped-16-9" />
+                                </a>
+                            </div>
+                            <div class="main">
+                                <div class="main-inner">
+                                    {% for tag in card.tags %}
+                                    <a href="#" class="field__news_teaser">{{ tag }}</a>
+                                    {% endfor %}
+                                    <h3>
+                                        <a href="{{ card.link }}" hreflang="nl"
+                                            target="_blank"><span
+                                                class="field field--name-title field--type-string field--label-hidden">{{ card.title }}</span>
+                                        </a>
+                                    </h3>
+                                    <div class="node-date">
+                                        {{ card.date }}
+                                    </div>
+
+                                    <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__articles">
+                                        {{ card.description }}
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </article>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

data/_includes/block_gallery_cards/main.html

@@ -0,0 +1,40 @@
+<div class="col-12 field__item">
+    <div class="pb-6 pt-4 paragraph paragraph--type--container paragraph--view-mode--default">
+      <div
+        class="field field--name-field-paragraph-container-items field--type-entity-reference-revisions field--label-hidden">
+        <div class="row field__items">
+          <div class="col-12 field__item">
+            <div class="paragraph paragraph--type--block paragraph--view-mode--default">
+              <div
+                class="field field--name-field-block field--type-block-field field--label-hidden field__items">
+                <div
+                  class="views-element-container block block-views block-views-blocknews-news-promoted"
+                  id="block-views-block-news-news-promoted">
+                  <h2>
+                    {{ cards.title }}
+                  </h2>
+                  <div>
+                    <div
+                      class="view-news-promoted view view-news view-id-news view-display-id-news_promoted js-view-dom-id-7833dfaeee25c3f8b6282f714fe453ff553a6e540616d19c0fc830a81d0e4c44">
+                      {% for card in cards.items %}
+                      {% if forloop.first %}
+                      {% include block_gallery_cards/first_card.html card=card %}
+                      <div class="view-content">
+                      {% else %}
+                      {% include block_gallery_cards/card.html card=card %}
+                      {% endif %}
+                      {% endfor %}
+                      </div>
+                      <div class="more-link">
+                        <a href="{{ cards.clickthrough_url }}">{{ cards.clickthrough_text }}</a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>

data/_includes/carrousel_block/item.html

@@ -0,0 +1,21 @@
+<div class="field__item">
+    <div
+      class="background-white pb-4 pt-4 px-4 text-add-box-shadow paragraph paragraph--type--basic-text paragraph--view-mode--default">
+
+      <div
+        class="clearfix text-formatted field field--name-field-body field--type-text-long field--label-hidden field__items">
+        <h4 class="highlighted-heading text-align-center">
+          {{ item.title }}
+        </h4>
+
+        <p class="paragraph-small text-align-center">
+          {{ item.description }}
+        </p>
+
+        <p class="paragraph-brand-color text-align-center">
+          <a class="more-link-colored"
+            href="{{ item.clickthrough_url }}">{{ item.clickthrough_button_text }}</a>
+        </p>
+      </div>
+    </div>
+  </div>

data/_includes/carrousel_block/main.html

@@ -0,0 +1,22 @@
+<div class="col-12 field__item">
+  <div class="background-light-2 container-full-width pb-5 pt-5 paragraph paragraph--type--container paragraph--view-mode--default">
+    <h2 class="container-title field field--name-field-title field--type-string field--label-hidden field__items">
+      {{ data.title }}
+    </h2>
+    <div class="field field--name-field-paragraph-container-items field--type-entity-reference-revisions field--label-hidden">
+      <div class="row field__items">
+        <div class="col-12 field__item">
+          <div class="ticker-count-3 ticker-nav paragraph paragraph--type--ticker paragraph--view-mode--default">
+            <div class="ticker-items field field--name-field-paragraph-container-items field--type-entity-reference-revisions field--label-hidden">
+              <div class="field__items">
+                {% for item in data.items %}
+                {% include carrousel_block/item.html item=item%}
+                {% endfor %}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

data/_includes/carrousel_w_waves/item.html

@@ -0,0 +1,27 @@
+<div class="views-row">
+    <article role="article"
+        about="/nl/events/bijscholing-voor-leerkrachten-de-oceaan-een-veranderend-klimaat"
+        class="node node--type-events node--view-mode-teaser">
+        <div class="node__content">
+            <div class="event-date-wrapper">
+                <div
+                    class="field field--name-field-event-begindate field--type-datetime field--label-hidden field__items">
+                    {{ item.title }}
+                </div>
+            </div>
+            <h4>
+                <a
+                    href="{{ item.clickthrough_url }}"><span
+                        class="field field--name-title field--type-string field--label-hidden">{{ item.description }}</span>
+                </a>
+            </h4>
+        </div>
+        <svg class="wave" xmlns="http://www.w3.org/2000/svg"
+            width="1565.074" height="134.348" viewBox="0 0 414.093 35.546">
+            <path
+                d="M-111.589 83.852s79.026-33.03 221.644 1.182C252.673 119.245 304.62 91.88 304.62 91.88v14.063l-415.364.179z"
+                style="stroke-width:1.26003"
+                transform="translate(110.53 -69.517)" />
+        </svg>
+    </article>
+</div>

data/_includes/carrousel_w_waves/main.html

@@ -0,0 +1,39 @@
+<div class="col-12 field__item">
+    <div
+        class="background-white container-full-width pb-6 pt-6 paragraph paragraph--type--container paragraph--view-mode--default">
+        <div
+            class="field field--name-field-paragraph-container-items field--type-entity-reference-revisions field--label-hidden">
+            <div class="row field__items">
+                <div class="col-12 field__item">
+                    <div class="paragraph paragraph--type--block paragraph--view-mode--default">
+                        <div
+                            class="field field--name-field-block field--type-block-field field--label-hidden field__items">
+                            <div class="views-element-container block block-views block-views-blockevents-events-upcoming-block"
+                                id="block-views-block-events-events-upcoming-block">
+                                <h2>{{ data.title }}
+                                </h2>
+                                <div>
+                                    <div
+                                        class="events-ticker view view-events view-id-events view-display-id-events_upcoming_block js-view-dom-id-e191d37c185b818cd5a6c279ebcc6dfdf564c0f46c280e772a63f13439f29bd0">
+                                        <div class="view-header-wrapper">
+                                            <div class="view-header">
+                                            </div>
+                                        </div>
+                                        <div class="view-content">
+                                            {% for item in data.items %}
+                                            {% include carrousel_w_waves/item.html item=item %}
+                                            {% endfor %}
+                                        </div>
+                                        <div class="more-link">
+                                            <a href="{{ site.data.carrousel.clickthrough_button_url }}">{{ data.clickthrough_button_text }}</a>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>