epfl-elements 4.5.0 → 4.6.0

package/dist/components/organisms/nav-aside/nav-aside.twig

@@ -0,0 +1,45 @@
+<nav
+  id="nav-aside"
+  class="nav-aside"
+  role="navigation"
+  aria-describedby="nav-aside-title"
+>
+  <h2 class="h5 sr-only-xl">Dans la même section</h2>
+  <ul>
+  {% if nav_aside_items %}
+    {% for item in nav_aside_items %}
+    <li{% if loop.index0 == nav_aside_active %} class="active"{% endif %}>
+      <a href="#">
+        {{item.label}}
+        {% if loop.index0 == nav_aside_active %}
+        <span class="sr-only">(page courante)</span>
+        {% endif %}
+      </a>
+      {% if item.children and loop.index0 == nav_aside_active %}
+      <ul>
+        {% for child in item.children %}
+        <li><a href="#">{{child}}</a></li>
+        {% endfor %}
+      </ul>
+      {% endif %}
+    </li>
+    {% endfor %}
+  {% else %}
+    <li><a href="#">S'inscrire au Master</a></li>
+    <li><a href="#">Plan d'études</a></li>
+    <li><a href="#">En cours d'études</a></li>
+    <li><a href="#">Mineurs</a></li>
+    <li><a href="#">Projets de semestre</a></li>
+    <li class="active">
+      <a href="#">Projets de Master <span class="sr-only">(page courante)</span></a>
+      <ul>
+        <li><a href="#">Projets par laboratoire</a></li>
+        <li><a href="#">Master's project expectations</a></li>
+      </ul>
+    </li>
+    <li><a href="#">Contacts</a></li>
+    <li><a href="#">Stages</a></li>
+    <li><a href="#">Bourse de recherche du programme MSc</a></li>
+  {% endif %}
+  </ul>
+</nav>

package/dist/components/organisms/nav-aside/nav-aside.yml

@@ -0,0 +1,2 @@
+title: Nav aside
+name: nav-aside

package/dist/components/organisms/nav-main/nav-main.twig

@@ -0,0 +1,65 @@
+{# Find if the current branch has the current entry menu selected and "return" the title #}
+{% macro menu_look_for_selected_recursively(menu_entry) %}
+  {% import _self as self %}
+  {% for submenu in menu_entry.submenu %}
+    {% if 'selected' in submenu|keys and submenu.selected %}found
+    {% else %}
+      {{ self.menu_look_for_selected_recursively(submenu) }}
+    {% endif %}
+  {% endfor %}
+{% endmacro %}
+
+{#
+  Print recursively the menu entries. All branches that have the selected item should have this class structure
+  1. current-menu-ancestor, 2->x. current-menu-parent, x. current-menu-item
+#}
+{% macro menu_entry_row(menu_entry, ancestor_set) %}
+  {% import _self as self %}
+  <li class="
+    {% if menu_entry.selected == true %}
+      current-menu-item
+    {% elseif self.menu_look_for_selected_recursively(menu_entry)|trim is not empty %}
+      {% if ancestor_set == '0' %}
+      current-menu-ancestor
+      {% set ancestor_set = '1' %}
+      {% else %}
+      current-menu-parent
+      {% endif %}
+    {% endif %}
+    {% if menu_entry.submenu %} menu-item-has-children{% endif %}">
+    <a href="{{ menu_entry.url }}">{{ menu_entry.title }}</a>
+    {% if menu_entry.submenu %}
+      <a href="#" role="button" aria-hidden="true" class="nav-arrow">
+        <div class="icon-container">
+          {% include '@atoms/icon/icon.twig' with {icon: 'icon-chevron-right'} %}
+        </div>
+      </a>
+      <ul>
+        <li class="nav-back">
+          <a href="{{ menu_entry.url }}">
+            {% include '@atoms/icon/icon.twig' with {icon: 'icon-arrow-left'} %} {{ menu_entry.title }}
+          </a>
+        </li>
+      {% for submenu_entry in menu_entry.submenu %}
+        {{ self.menu_entry_row(submenu_entry, ancestor_set) }}
+      {% endfor %}
+      </ul>
+    {% endif %}
+  </li>
+{% endmacro %}
+
+{% import _self as menu_macro %}
+
+<div class="overlay"></div>
+<nav class="nav-main" id="main-navigation" role="navigation">
+  <div class="nav-wrapper">
+    <div class="nav-container">
+      <ul class="nav-menu">
+        {% set ancestor_set = '0' %}
+        {% for menu_entry in menu %}
+          {{ menu_macro.menu_entry_row(menu_entry, ancestor_set) }}
+        {% endfor %}
+      </ul>
+    </div>
+  </div>
+</nav>

package/dist/components/organisms/nav-main/nav-main.yml

@@ -0,0 +1,13 @@
+title: Nav main
+name: nav-main
+wrapper: nav-solid-layout
+notes: |
+  **Behaviour**
+
+  The navigation has two different modes: **solid** and **toggled**. To differentiate the CSS and js behavior, we use the classes `.nav-toggle-layout` and `.nav-solid-layout` on the `.main-container`.
+
+  Both navigations will behave the same way on mobile.
+
+  **Current item highlight**
+
+  To style current menu item, add `current-menu-item` (Wordpress default class) on the `<li>` element containing the current item menu

package/dist/components/organisms/newsletter-sign-up/newsletter-sign-up.twig

@@ -0,0 +1,19 @@
+<div class="py-5 bg-gray-100">
+  <div class="container">
+    <div class="row">
+      <div class="col-md-8 offset-md-2 col-lg-6 offset-lg-3">
+        <h3 class="h4">Inscrivez-vous à notre newsletter pour ne manquer aucune de nos actualités</h3>
+
+        <div class="newsletter-signup-wrapper form-group mt-4">
+          <label for="newsletter-signup">Votre adresse E-mail</label>
+          <div class="input-group input-group-inner-space mb-3">
+            <input type="text" id="newsletter-signup" class="form-control" placeholder="john.doe@gmail.com">
+            <div class="input-group-append">
+              <button class="btn btn-primary" type="button">Je m'inscris</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

package/dist/components/organisms/newsletter-sign-up/newsletter-sign-up.yml

@@ -0,0 +1,2 @@
+title: Newsletter sign-up
+name: newsletter-sign-up

package/dist/components/organisms/restauration/restauration.twig

@@ -0,0 +1,114 @@
+<ul class="nav nav-tabs" role="tablist">
+  {% for day in restauration %}
+    <li class="nav-item">
+      <a class="nav-link {% if loop.first %}active{% endif %}" id="{{ day|lower }}-tab" data-toggle="tab" href="#{{ day|lower }}" role="tab" aria-controls="{{ day|lower }}" {% if loop.first %}aria-selected="true"{% endif %}>{{ day }}</a>
+    </li>
+  {% endfor %}
+</ul>
+
+<div class="tab-content py-3">
+  {% for day in restauration %}
+  <div class="tab-pane fade show {% if loop.first %}active{% endif %}" id="{{ day|lower }}" role="tabpanel" aria-labelledby="{{ day|lower }}-tab">
+    <div class="row my-3">
+      <div class="col-md-4">
+        {% include '@atoms/select/select-multiple.twig' %}
+      </div>
+      <div class="col-md-4">
+        {% include '@atoms/select/select-multiple.twig' %}
+      </div>
+      <div class="col-md-4">
+        <div class="form-group">
+          <label for="formControlRange">Score Nutrimenu minimum</label>
+          <input type="range" id="nutrimenu-score" name="nutrimenu-score" class="form-control-range custom-range" min="1" max="13" step="1" value="10">
+          <output for="nutrimenu-score" aria-hidden="true">B+</output>
+        </div>
+      </div>
+      <div class="col-12 mb-2">
+        {% include '@atoms/radio/radio-inline.twig' %}
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-12">
+        <div class="tag-group mb-3">
+          <label for="">Filtres de recherches</label>
+          <div>
+            <button class="btn tag tag-plain">Tout effacer</button>
+            <button class="btn tag tag-primary">Campus Biotech Genève<span class="remove" title="Remove">×</span></button>
+            <button class="btn tag tag-primary">Fleur de Pains<span class="remove" title="Remove">×</span></button>
+            <button class="btn tag tag-primary">Food Truck<span class="remove" title="Remove">×</span></button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="tablesaw-container">
+      <table class="table table-restauration tablesaw tablesaw-stack" data-tablesaw-mode="stack">
+        <thead class="sr-only">
+          <tr>
+            <th>Menu</th>
+            <th>Restaurant</th>
+            <th>Prix</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td class="menu">
+              <div class="menu-content">
+                <div class="logo float-left pr-3">
+                  <img class="" src="./images/styleguide/restauration_illustration.png">
+                </div>
+                <div class="descr">
+                  <b>Filets de perche (Estonie) sauce tartare</b><br>
+                  Frites<br>
+                  Salade mêlée
+                </div>
+                <div class="nutrimenu">
+                  <img src="./images/styleguide/nutrimenu-score/nutrimenu-score-A.svg" alt="NutriMenu Score: A+" height="80">
+                </div>
+              </div>
+            </td>
+            <td class="restaurant">
+              <a href="#">Cafétéria BC</a>
+            </td>
+            <td class="prices">
+              <span class="price">
+                <abbr title="Prix étudiant" class="text-primary">E</abbr> 11.90 CHF
+              </span>
+              <span class="price">
+                <abbr title="Prix visiteurs" class="text-primary">V</abbr> 14.00 CHF
+              </span>
+              <span class="price">
+                <abbr title="Prix doctorants" class="text-primary">D</abbr> 11.90 CHF
+              </span>
+              <span class="price">
+                <abbr title="Prix campus" class="text-primary">C</abbr> 14.00 CHF
+              </span>
+            </td>
+          </tr>
+          <tr>
+            <td class="menu">
+              <div class="menu-content">
+                <div class="logo float-left pr-3">
+                  <img class="" src="./images/styleguide/restauration_illustration.png">
+                </div>
+                <div class="descr">
+                <b>Galette</b><br>
+              Thon, oignons, Fromage, Roquette<br>
+                </div>
+                <div class="nutrimenu">
+                  <img src="./images/styleguide/nutrimenu-score/nutrimenu-score-B.svg" alt="NutriMenu Score: B" height="80">
+                </div>
+              </div>
+            </td>
+            <td class="restaurant">
+              <a href="#">L'Esplanade</a>
+            </td>
+            <td class="prices">
+              <span class="price">9.90 CHF</span>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+  {% endfor %}
+</div>

package/dist/components/organisms/restauration/restauration.yml

@@ -0,0 +1,4 @@
+title: Restauration
+name: restauration
+notes: |
+  ### Menu

package/dist/components/organisms/social-feed-group/social-feed-group.twig

@@ -0,0 +1,11 @@
+<div class="social-feed-group">
+  <div class="social-feed-container">
+    {% include '@molecules/social-feed/social-feed.twig' %}
+  </div>
+  <div class="social-feed-container">
+    {% include '@molecules/social-feed/social-feed-instagram.twig' %}
+  </div>
+  <div class="social-feed-container">
+    {% include '@molecules/social-feed/social-feed-facebook.twig' %}
+  </div>
+</div>

package/dist/components/organisms/social-feed-group/social-feed-group.yml

@@ -0,0 +1,3 @@
+title: Social feed group
+name: social-feed-group
+wrapper: bg-gray-100

package/dist/components/pages/about/about.twig

@@ -0,0 +1,91 @@
+{% extends "@templates/base/base.twig" %}
+
+{% block content %}
+
+<div class="container-full">
+  <div class="hero">
+    <div class="hero-content-container">
+      <h1 class="hero-title">About</h1>
+    </div>
+    <div class="hero-img">
+      <img src="images/styleguide/gallery/gallery_01.jpg" alt="IMAGE DESCRIPTION HERE" class="img-fluid">
+    </div>
+  </div>
+</div>
+
+<div class="mt-5">
+  <p>
+    L'EPFL est la plus cosmopolite des universités techniques européennes. Elle accueille des étudiants, professeurs et collaborateurs de plus de 120 nationalités. A vocation à la fois suisse et internationale, l’EPFL est centrée sur trois missions : l’enseignement, la recherche et le transfert de technologies. L’EPFL collabore avec un important réseau de partenaires comprenant notamment les autres universités et hautes écoles, les écoles secondaires et gymnases, l’industrie et l’économie, les milieux politiques et le grand public, ceci dans le but d’avoir un véritable impact pour la société.
+  </p>
+</div>
+
+<div class="container-full bg-gray-100 py-5 mt-5">
+  <div class="container">
+    <div class="row">
+      <div class="col-md-4">
+        {% include '@molecules/links-group/links-group.twig' %}
+      </div>
+      <div class="col-md-4">
+        {% include '@content-types/basic-page/basic-page.twig' %}
+      </div>
+      <div class="col-md-4">
+        {% include '@molecules/links-group/links-group-teaser.twig' %}
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="container">
+  {% include '@content-types/news/news-latest-two.twig' %}
+</div>
+
+<div class="container-full bg-gray-100 py-5">
+  <div class="container">
+    <div class="row">
+      <div class="col-md-4">
+        {% include '@content-types/basic-page/basic-page.twig' %}
+      </div>
+      <div class="col-md-4">
+        {% include '@molecules/links-group/links-group.twig' %}
+      </div>
+      <div class="col-md-4">
+        {% include '@content-types/basic-page/basic-page.twig' %}
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="container-full bg-gray-100 py-5">
+  <div class="overflow-hidden">
+    <div class="container">
+      <h2 class="mb-4 mt-4">The next events</h2>
+      {% include '@organisms/card-slider/card-slider.twig' %}
+    </div>
+  </div>
+</div>
+
+<div class="container-full bg-gray-100 py-5">
+  <div class="container">
+    <div class="row">
+      <div class="col-md-6">
+        {% include '@content-types/basic-page/basic-page.twig' %}
+      </div>
+      <div class="col-md-6">
+        {% include '@content-types/basic-page/basic-page.twig' %}
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="container mt-5">
+  <div class="row">
+    <div class="col-md-6">
+      <!-- @TODO Add Quote component when ready -->
+    </div>
+    <div class="col-md-6">
+      {% include '@content-types/basic-page/basic-page.twig' %}
+    </div>
+  </div>
+</div>
+
+{% endblock %}

package/dist/components/pages/about/about.yml

@@ -0,0 +1,2 @@
+name: about
+title: About

package/dist/components/pages/association-homepage/association-homepage.twig

@@ -0,0 +1,65 @@
+{% set isSpecial = true %}
+
+{% extends "@templates/base/base.twig" %}
+
+{% block header %}
+  {% include '@organisms/header/header-light.twig' with { site_title: 'Association title',  long_nav_lang: true, nav_user: true } %}
+{% endblock %}
+
+{% block content %}
+<div class="container-full">
+  {% include '@organisms/hero/hero.twig' with {title: 'Association title', cover_path: 'images/styleguide/cover/cover01_', content: 'Welcome to our association homepage'} %}
+</div>
+
+<div class="container">
+  {% include '@organisms/introduction/introduction.twig' with {title: 'Introduction', content: "This is an introduction text about the association. It is always interesting to know in few lines what is all about."} %}
+</div>
+
+<div class="container-full bg-gray-100 py-5 mt-5">
+  <div class="container">
+    <h2>The next events</h2>
+    {% include '@organisms/card-slider/card-slider.twig' %}
+  </div>
+</div>
+
+<div class="container">
+  {% include '@content-types/news/news-latest-two.twig' %}
+</div>
+
+<div class="container-full bg-gray-100 py-5 mb-4 mt-6">
+  <div class="container">
+    <div class="mb-4 mt-4">
+      <div class="row">
+        <div class="col-md-6">
+          {% include '@content-types/basic-page/basic-page.twig' %}
+        </div>
+        <div class="col-md-6">
+          <h3 class="mb-4">Our sponsors</h3>
+          {% include '@molecules/sponsor/sponsor.twig' %}
+          {% include '@molecules/sponsor/sponsor.twig' %}
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="container mt-5">
+  <h2 class="mb-4">On social medias</h2>
+  {% include '@organisms/social-feed-group/social-feed-group.twig' %}
+</div>
+
+<div class="container">
+  <hr class="mb-5">
+  {% include '@organisms/contact/contact-banner.twig' %}
+</div>
+{% endblock %}
+
+{% block footer_container %}
+<div class="bg-gray-100 pt-5">
+  <div class="container">
+    {% block footer %}
+      {% include '@organisms/footer/footer-light.twig' %}
+    {% endblock %}
+  </div>
+</div>
+{% endblock %}

package/dist/components/pages/association-homepage/association-homepage.yml

@@ -0,0 +1,2 @@
+title: Association homepage
+name: association-homepage

package/dist/components/pages/association-list/association-list.twig

@@ -0,0 +1,34 @@
+{% extends "@templates/base/base.twig" %}
+
+{% block content %}
+
+  <h1 class="mb-5">Bienvenue dans le monde associatif de l'EPFL</h1>
+
+  <p>Grâce à une septentaine d’associations d’étudiants actives sur le campus de l’EPFL, notre communauté bénéficie d’un lieu d’études dynamique, où chaque semaine la diversité s’invite à travers de nombreux évènements.</p>
+  <p>Conscient de la charge de travail que représente la gestion d'une association, le Domaine de la formation met à disposition des étudiants des outils et des ressources pour que la vie associative soit source d'épanouissement et s'allie au mieux avec le déroulement des études.</p>
+
+<div class="container mt-6">
+  <h2 class="mb-4">Nos associations</h2>
+  <div class="row">
+    <div class="col-md-4">
+      {% include '@molecules/filters/filters.twig' %}
+    </div>
+    <div class="col-md-8">
+      <div class="row">
+        <div class="col-md-6">
+          {% for i in 1..6 %}
+            {% include '@content-types/association/association.twig' %}
+          {% endfor %}
+        </div>
+        <div class="col-md-6">
+          {% for i in 1..7 %}
+            {% include '@content-types/association/association.twig' %}
+          {% endfor %}
+        </div>
+      </div>
+      {% include '@molecules/pagination/pagination.twig' %}
+    </div>
+  </div>
+</div>
+{% endblock %}
+

package/dist/components/pages/association-list/association-list.yml

@@ -0,0 +1,2 @@
+title: Association list
+name: association-list

package/dist/components/pages/basic-page/basic-page.twig

@@ -0,0 +1,84 @@
+{% extends "@templates/base/base.twig" %}
+
+{% block header %}
+  {% include '@organisms/header/header.twig' with { long_nav_lang: true } %}
+{% endblock %}
+
+{% block content %}
+  <h1 class="mb-5">H1 - Basic page</h1>
+
+  <p>This is a simple paragraph directly in the WYSIWYG editor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam consectetur deleniti doloremque eveniet libero minima neque repudiandae sequi suscipit vitae. Ab corporis doloremque earum eius illo incidunt ipsa magnam molestias, nam, necessitatibus neque porro quaerat repellendus tenetur unde velit veritatis? Aliquam amet aut cumque distinctio dolor dolore ducimus eaque est eveniet excepturi explicabo fugit illum inventore iure labore libero magnam minima pariatur provident quam quasi quo, recusandae rem repudiandae sapiente sunt voluptate voluptates! Asperiores, assumenda atque aut eos est in maiores nemo omnis perferendis, quam recusandae rem saepe sint! Consequuntur doloribus dolorum iste, optio placeat rerum. Dolor quis repudiandae soluta?</p>
+  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur autem consequatur, cum hic iure maiores nihil nulla repellendus sequi velit! Asperiores aspernatur, blanditiis culpa deleniti dignissimos eum expedita illum ipsa itaque magnam molestias mollitia nobis, nostrum nulla numquam soluta voluptatum? Aliquam architecto consequatur cumque doloribus ex maiores nemo veritatis voluptatem.</p>
+
+  <div class="container my-5">
+    {% include "@molecules/cover/cover.twig" %}
+  </div>
+
+  <h2>H2 - Title sample</h2>
+
+  <h3>H3 - Sub level title</h3>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Si enim ita est, vide ne facinus facias, cum mori suadeas. Habent enim et bene longam et satis litigiosam disputationem. -delector enim, quamquam te non possum, ut ais, corrumpere, delector, inquam, et familia vestra et nomine. Virtutis, magnitudinis animi, patientiae, fortitudinis fomentis dolor mitigari solet. Cur tantas regiones barbarorum pedibus obiit, tot maria transmisit? Multoque hoc melius nos veriusque quam Stoici. Duo Reges: constructio interrete. Huius, Lyco, oratione locuples, rebus ipsis ielunior. Quid, si etiam iucunda memoria est praeteritorum malorum? In eo enim positum est id, quod dicimus esse expetendum.
+  </p>
+
+  <h3>H3 - Sub level title</h3>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Si enim ita est, vide ne facinus facias, cum mori suadeas. Habent enim et bene longam et satis litigiosam disputationem. -delector enim, quamquam te non possum, ut ais, corrumpere, delector, inquam, et familia vestra et nomine.
+  </p>
+  <h4>H4 - Sub level title</h4>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Si enim ita est, vide ne facinus facias, cum mori suadeas. Habent enim et bene longam et satis litigiosam disputationem. -delector enim, quamquam te non possum, ut ais, corrumpere, delector, inquam, et familia vestra et nomine.
+  </p>
+  <h3>H3 - Sub level title</h3>
+  <h4>H4 - Let's display a list</h4>
+  {% include "@atoms/list/list-unordered.twig" %}
+
+  <h4>H4 - Let's display a table</h4>
+  {% include "@molecules/tables/tables-sortable.twig" %}
+
+  <h4>H4 - Let's display a gallery</h4>
+  {% include "@molecules/gallery/gallery.twig" %}
+
+    <div class="container-full bg-gray-100 py-5 my-5">
+      <div class="container">
+        <h2 class="mb-4">H2 - Call page teasers</h2>
+        <div class="row">
+          {% for i in [1,2] %}
+            <div class="col-sm-6">
+              {% include "@content-types/basic-page/basic-page.twig" %}
+            </div>
+          {% endfor %}
+        </div>
+      </div>
+    </div>
+
+    <h3>H3 - Teaser press review</h3>
+    {% include "@content-types/press-review/press-review.twig" %}
+
+    <div class="container">
+      <h5 class="mt-5">H5 - Video !</h5>
+      {% include "@atoms/video/video.twig" %}
+    </div>
+
+    <h3 class="mt-5">H3 - A last word</h3>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Si enim ita est, vide ne facinus facias, cum mori suadeas. Habent enim et bene longam et satis litigiosam disputationem. -delector enim, quamquam te non possum, ut ais, corrumpere, delector, inquam, et familia vestra et nomine. Virtutis, magnitudinis animi, patientiae, fortitudinis fomentis dolor mitigari solet. Cur tantas regiones barbarorum pedibus obiit, tot maria transmisit? Multoque hoc melius nos veriusque quam Stoici. Duo Reges: constructio interrete. Huius, Lyco, oratione locuples, rebus ipsis ielunior. Quid, si etiam iucunda memoria est praeteritorum malorum? In eo enim positum est id, quod dicimus esse expetendum.
+    </p>
+
+    <div class="container-full mt-5">
+      {% include "@organisms/newsletter-sign-up/newsletter-sign-up.twig" %}
+    </div>
+
+    <div class="container mt-5">
+      <h2>Facultés</h2>
+      <div class="row">
+        {% for i in [1,2,3] %}
+          <div class="col-sm-6 col-lg-4">
+            {% include "@content-types/school/school.twig" %}
+          </div>
+        {% endfor %}
+      </div>
+    </div>
+
+
+{% endblock %}

package/dist/components/pages/basic-page/basic-page.yml

@@ -0,0 +1,2 @@
+title: Basic page
+name: basic-page

package/dist/components/pages/blog-homepage/blog-homepage.twig

@@ -0,0 +1,41 @@
+{% extends "@templates/base/base.twig" %}
+
+{% block header %}
+  {% include '@organisms/header/header-light.twig' with { site_title: 'example blog name' } %}
+{% endblock %}
+
+{% block content %}
+
+<div class="container-full px-5 px-xxl-6 mt-5">
+  <h1>Titre du blog</h1>
+</div>
+
+<div class="container-full px-5 px-xxl-6 mt-5">
+  <div class="row" style="flex-direction: row-reverse;">
+    <div class="col-lg-3">
+      {% include '@molecules/filters/filters-blog.twig' %}
+    </div>
+    <div class="col-lg-9">
+      <div class="card-deck">
+        {% for 1 in 1..9 %}
+          {% include '@content-types/news/news-basic-teaser.twig' %}
+        {% endfor %}
+      </div>
+      <div class="mt-3">
+        {% include '@molecules/pagination/pagination.twig' %}
+      </div>
+    </div>
+  </div>
+</div>
+
+{% endblock %}
+
+{% block footer_container %}
+<div class="bg-gray-100 pt-5">
+  <div class="container">
+    {% block footer %}
+      {% include '@organisms/footer/footer-light.twig' %}
+    {% endblock %}
+  </div>
+</div>
+{% endblock %}

package/dist/components/pages/blog-homepage/blog-homepage.yml

@@ -0,0 +1,2 @@
+title: Blog homepage
+name: blog-homepage