epfl-elements 4.4.1 → 4.5.1

package/dist/components/pages/maintenance/maintenance.yml

@@ -0,0 +1,2 @@
+title: Maintenance
+name: maintenance

package/dist/components/pages/news-detail/news-detail.twig

@@ -0,0 +1,159 @@
+{% set isSpecial = true %}
+
+{% extends "@templates/base/base.twig" %}
+
+{% block header %}
+  {% include '@organisms/header/header-light.twig' with { site_title: 'Actualités' } %}
+{% endblock %}
+
+{% block breadcrumb %}
+<div class="breadcrumb-container">
+  {% include '@molecules/breadcrumb/breadcrumb.twig' %}
+</div>
+{% endblock %}
+
+{% block grid %}{% endblock %}
+
+{% block content %}
+  <div class="container mb-5" itemscope itemtype="http://schema.org/Article">
+    <h1 itemprop="name">Des connexions se créent pour dépasser la paralysie</h1>
+  </div>
+
+  <div class="container">
+    {% include '@atoms/picture/picture.twig' %}
+  </div>
+
+  <div class="container">
+    <div class="row">
+      <div class="col-md-6">
+        <p class="bg-gray-100 px-4 py-5 lead mb-5">Des rats paraplégiques retrouvent l’usage de leurs pattes à la suite d’une rééducation neuroprosthétique qui provoque la création de nouvelles connexions cérébrales. Celles-ci transmettent les commandes motrices jusqu’aux centres d'exécution de la moelle épinière en aval de la blessure, permettant ainsi de marcher, nager et même monter des escaliers.</p>
+
+        <ul class="nav nav-tabs" role="tablist">
+          <li class="nav-item">
+            <a class="nav-link active" id="original-tab" data-toggle="tab" href="#original" role="tab" aria-controls="home" aria-selected="true">Texte original</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" id="simplified-tab" data-toggle="tab" href="#simplified" role="tab" aria-controls="profile" aria-selected="false">Version simplifiée (bêta)</a>
+          </li>
+        </ul>
+
+        <div class="tab-content py-3">
+          <div class="tab-pane fade show active" id="original" role="tabpanel" aria-labelledby="original-tab">
+            <p>Par la combinaison de stimulations électrochimiques de la moelle épinière et d’une rééducation assistée par robot, des rats atteints d'une lésion médullaire clinique retrouvent le contrôle des membres paralysés. Mais comment ces commandes cérébrales (de marche, de natation, ou de montée d’escaliers) peuvent-elles contourner la lésion, atteindre la moelle épinière, et ainsi rendre possibles ces tâches complexes ? Des scientifiques de l'EPFL ont observé pour la première fois que le cerveau ré-achemine des commandes motrices spécifiques par des voies alternatives, soit des fibres neuronales poussant du tronc cérébral jusqu’à la moelle épinière. La thérapie provoque le développement de nouvelles connexions entre le cortex moteur et le tronc cérébral, et entre le tronc cérébral et la moelle épinière, reconnectant ainsi le cerveau avec la moelle épinière de l’autre côté de la lésion. Ces résultats paraissent le 19 mars dans la revue Nature Neuroscience.</p>
+            <p>Grégoire Courtine, chef d’unité au Centre de neuroprothèses de l’EPFL, explique que « le cerveau développe de nouvelles connexions anatomiques à travers des régions du système nerveux restées intactes après la lésion. Le cerveau rebranche principalement les circuits du cortex cérébral, du tronc cérébral, et de la moelle épinière. Ce recâblage extensif, nous avons pu l’observer avec un niveau de détail jusqu’ici inégalé, grâce aux technologies dernier cri de microscopie du cerveau et de la moelle épinière. »</p>
+
+            <blockquote class="blockquote">
+              <p>La guérison n'est pas spontanée », poursuit Léonie Asboth, scientifique de l'EPFL et auteure principale de l’étude. «Pour que le recâblage ait lieu, les animaux doivent suivre une thérapie de rééducation intensive. Dans notre cas, cette thérapie implique une stimulation électrochimique de la moelle épinière, combinée à une physiothérapie active à l’aide d’un harnais de soutien intelligent. »</p>
+              <footer class="blockquote-footer">
+                — Grégoire Courtine, chef d’unité au Centre de neuroprothèses de l’EPFL
+              </footer>
+            </blockquote>
+
+            <p>Dans le laboratoire, des rats rendus totalement paraplégiques par une contusion apprennent à remarcher à l'aide d'une thérapie qui combine une stimulation électrochimique de la moelle épinière et une rééducation assistée par robot. La moelle épinière du rat est doublement stimulée : d’abord par injection de produits pharmaceutiques, puis par stimulation électrique en-dessous de la lésion, afin d’activer les muscles des jambes. Une physiothérapie soutenue par un harnais intelligent qui allège le poids du corps et offre des conditions naturelles de marche permet aux rats de retrouver, au bout de quelques semaines, un contrôle volontaire et étendu de leurs pattes postérieures. A la longue, les rats peuvent contrôler leurs muscles même sans stimulation électrochimique, ni harnais. En 2012, le Prof. Courtine et son équipe avaient déjà montré que des rats portant des lésions médullaires arrivaient, à la suite d’une rééducation neuroprosthétique, à nager et monter des escaliers.</p>
+            <p>En comparant les cerveaux de rats blessés puis réhabilités avec ceux de rats sains, les scientifiques ont pu identifier une région spécifique du tronc cérébral, la formation réticulée, comme acteur clé du rétablissement. Ce rôle, les scientifiques l’ont découvert à l’aide de techniques de pointe, l'optogénétique et la chimiogénétique, appliquées à des animaux transgéniques. Cet ensemble d'outils permet d’activer ou d’inhiber sélectivement certains circuits du cerveau et du tronc cérébral afin d’en étudier la fonction. Les chercheurs ont également utilisé, pour visualiser les voies nerveuses, un puissant microscope à « feuilles lumineuses » (light sheet microscope en anglais) nouvellement mis au point par le Wyss Center for Bio and Neuroengineering à Genève. Cette technologie permet de rendre transparent l'ensemble du système nerveux central, à l'exception de nerfs spécifiques où s’exprime une protéine fluorescente. En passant un feuillet de lumière à travers le cerveau et la moelle épinière intactes, les scientifiques ont obtenu des images 3D inédites qui illustrent l'organisation des voies nerveuses chez les animaux sains, et montrent comment la thérapie réorganise ces connexions. Les neurones blessés ne repoussent pas spontanément, mais une réorganisation des connections neurales se produit au-dessus de la lésion, activant de nouveaux canaux de communication.</p>
+            <p>Reste encore à voir si la réhabilitation neuroprosthétique conduit aussi, chez l'homme, à un recâblage similaire du cerveau, du tronc cérébral et de la moelle épinière. Grégoire Courtine est optimiste: « Nous avons déjà montré que la plasticité du système nerveux, c’est-à-dire sa remarquable capacité à développer de nouvelles connexions après une lésion de la moelle épinière, est encore plus robuste chez l'homme que chez le rongeur. Nous sommes actuellement en train de tester notre thérapie sur des personnes atteintes d'une lésion de la moelle épinière au Centre hospitalier universitaire vaudois (CHUV). »</p>
+          </div>
+          <div class="tab-pane fade" id="simplified" role="tabpanel" aria-labelledby="simplified-tab">
+            <div class="alert alert-info fade show" role="alert">
+              <p>Ceci est une <a href="https://go.epfl.ch/news-ai-fr">version simplifiée automatiquement par une AI</a> dans le cadre d’un projet de recherche de l'EPFL.</p>
+              <p><strong>Aucune relecture ou correction systématique</strong> n'est effectuée a posteriori par un humain.</p>
+              <p>Plus d'informations sur le projet sur le site du <a href="https://go.epfl.ch/mlo-ai">Laboratoire d'apprentissage automatique et d'optimisation (MLO)</a></p>
+              <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+              </button>
+            </div>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sodales, augue vitae semper vestibulum, tortor risus bibendum urna, nec venenatis justo lacus nec lorem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi ipsum nisi, dignissim non dolor ut, hendrerit volutpat lorem. Sed sem velit, convallis eget feugiat non, blandit quis ante.</p>
+            <p>In dignissim sem eget risus faucibus maximus. Ut convallis leo quis mauris aliquam condimentum. Nullam nec vestibulum neque, convallis rutrum magna. Quisque in nisl vel elit congue semper id vitae ligula. Quisque posuere viverra orci sit amet pharetra. Vivamus dictum euismod mattis. Vivamus lobortis posuere quam pharetra elementum. Aenean sed ipsum ornare, porttitor mauris sit amet, interdum mi. In hac habitasse platea dictumst. Sed orci dolor, lacinia at luctus non, cursus at est.</p>
+            <p>Sed efficitur lectus et lacinia efficitur. Integer sed fringilla nulla. Sed at libero luctus, molestie urna at, lobortis est. Vivamus ullamcorper mi a sem sagittis commodo. Sed molestie hendrerit magna quis lacinia. Nam eget diam lorem. Cras pellentesque lobortis felis, at fermentum tellus aliquam sit amet.</p>
+            <p>Integer purus nisl, gravida sed auctor id, luctus non metus. Integer in mauris sapien. Donec commodo mattis leo in tincidunt. Etiam porta venenatis diam, nec dapibus turpis dapibus quis. Etiam dapibus arcu porta ex vestibulum sodales. Nam hendrerit ligula eget felis porta, non lacinia ipsum dignissim. Nulla auctor faucibus tortor, quis porta ipsum scelerisque nec. </p>
+          </div>
+        </div>
+        <hr>
+        <footer class="my-3">
+          <p class="m-0 small text-muted">
+            <strong>Auteur: </strong> <a href="#">Lorem Ipsum</a>
+          </p>
+          <p class="small text-muted mb-0 mt-1">
+            <strong>Source: </strong><a href="/search/mediacom/fr">EPFL</a>
+          </p>
+          <p class="small text-muted mb-0 mt-1">
+            Ce contenu est distribué sous les termes de la licence Creative Commons CC BY-SA 4.0. Vous pouvez reprendre librement les textes, vidéos et images y figurant à condition de créditer l’auteur de l’œuvre, et de ne pas restreindre son utilisation. Pour les illustrations ne contenant pas la mention CC BY-SA, l’autorisation de l’auteur est nécessaire.
+          </p>
+        </footer>
+
+      </div>
+      <div class="col-md-4 offset-md-2 mt-5">
+        <time itemprop="datePublished" datetime="2018-03-19">19.03.18</time>
+        <hr class="mb-4">
+        <div class="mb-5">
+          <h2 class="h6">Liens</h2>
+          <ul class="list-bullet">
+            <li><a href="#">2012 Results</a></li>
+            <li><a href="#">Press kit</a></li>
+            <li><a href="#">Youtube</a></li>
+          </ul>
+        </div>
+
+        <div class="mb-5">
+          <h2 class="h6">En relation</h2>
+          <ul class="list-bullet mb-5">
+            <li><a href="#">Toutes les actualités Mediacom</a></li>
+            <li><a href="#">Toutes les actualités EPFL</a></li>
+          </ul>
+        </div>
+
+        <div class="mb-5">
+          <h2 class="h6">IMAGES À TÉLÉCHARGER</h2>
+          {% for i in 0..1 %}
+            <div class="row mb-3">
+              <div class="col-4">
+                <a href="#">{% include '@atoms/picture/picture-news-thumb.twig' %}</a>
+              </div>
+              <div class="col-8">
+                5760 x 3840 px
+                © 2018 EPFL / Alban Kakulya
+              </div>
+            </div>
+          {% endfor %}
+        </div>
+
+        <div class="mb-5">
+          <h2 class="h6">Abonnez-vous aux publications de Mediacom</h2>
+          <div class="form-group">
+            <input type="email" placeholder="Votre email" class="form-control">
+          </div>
+        </div>
+
+        <div class="mb-5">
+          <h2 class="h6">Mots-clés</h2>
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, natus.</p>
+        </div>
+
+        <div class="mb-5">
+          <p class="text-muted">Partager sur</p>
+          <div>
+            <a href="#" class="social-icon social-icon-discrete social-icon-facebook">
+              <svg class="icon"><use xlink:href="#icon-facebook"></use></svg>
+            </a>
+            <a href="#" class="social-icon social-icon-discrete social-icon-x">
+              <svg class="icon"><use xlink:href="#icon-x"></use></svg>
+            </a>
+            <a href="#" class="social-icon social-icon-discrete social-icon-instagram">
+              <svg class="icon"><use xlink:href="#icon-instagram"></use></svg>
+            </a>
+            <a href="#" class="social-icon social-icon-discrete social-icon-mail-plane">
+              <svg class="icon"><use xlink:href="#icon-mail-plane"></use></svg>
+            </a>
+            <a href="#" class="social-icon social-icon-discrete social-icon-whatsapp">
+              <svg class="icon"><use xlink:href="#icon-whatsapp"></use></svg>
+            </a>
+            <a href="#" class="social-icon social-icon-discrete social-icon-googleplus">
+              <svg class="icon"><use xlink:href="#icon-googleplus"></use></svg>
+            </a>
+          </div>
+        </div>
+
+      </div>
+    </div>
+
+  </div>
+{% endblock %}

package/dist/components/pages/news-detail/news-detail.yml

@@ -0,0 +1,2 @@
+name: news-detail
+title: News detail

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

@@ -0,0 +1,42 @@
+{% set isSpecial = true %}
+
+{% extends "@templates/base/base.twig" %}
+
+{% block header %}
+  {% include '@organisms/header/header-light.twig' with {
+    site_title: 'Actu',
+    dropdown: true
+  } %}
+{% endblock %}
+
+{% block content %}
+<div class="container-full">
+  {% include '@organisms/headlines/headlines.twig' with { bottomlink: false } %}
+</div>
+
+<div class="container">
+  <div class="row">
+    <div class="col-md-4">
+      {% include '@molecules/filters/filters.twig' %}
+    </div>
+    <div class="col-md-8">
+        {% include '@content-types/news/news.twig' %}
+        <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 %}
+  </div>
+</div>

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

@@ -0,0 +1,2 @@
+title: News homepage
+name: news-homepage

package/dist/components/pages/people-detail/people-detail.twig

@@ -0,0 +1,302 @@
+{% set isSpecial = true %}
+
+{% extends "@templates/base/base.twig" %}
+
+{% block header %}
+<header role="banner" class="header header-light">
+  <div class="header-light-content">
+    <a class="logo" href="#">
+      <img src="svg/epfl-logo.svg" alt="Logo EPFL, École polytechnique fédérale de Lausanne" class="img-fluid">
+    </a>
+    <p class="site-title">
+      <a href="#">Online People Directory</a>
+    </p>
+    {% include '@molecules/search/search-mobile.twig' %}
+    {% include '@molecules/search/search.twig' %}
+    {% include '@atoms/nav-lang/nav-lang.twig' %}
+    {% include '@atoms/nav-toggle-mobile/nav-toggle-mobile.twig' %}
+  </div>
+</header>
+{% endblock %}
+
+{% block breadcrumb %}
+<div class="breadcrumb-container">
+  {% include '@molecules/breadcrumb/breadcrumb.twig' %}
+</div>
+{% endblock %}
+
+{% block grid %}{% endblock %}
+
+{% block content %}
+  <div class="container">
+    {# Title and actions #}
+    <div class="d-flex flex-wrap justify-content-between align-items-baseline">
+      <h1 class="mr-3">Prenom Nom</h1>
+      <div>
+        {% include '@atoms/icon/icon.twig' with {'icon': 'edit', icon_classes: 'feather'} %}
+        <a href="#">
+          Edit profile <span class="sr-only">of Prenom Nom</span>
+        </a>
+      </div>
+    </div>
+
+    {# Header area #}
+    <div class="row mt-5">
+      <div class="col-md-12">
+        <div class="row people-basic-info">
+
+          <div class="col-md-4 col-lg-3 offset-lg-1 mb-3">
+            {# Person avatar and buttons #}
+            <div class="row">
+              <div class="col-sm-12 mb-3">
+                <!-- Default profile picture markup -->
+
+                <!--
+                {% include '@atoms/picture/picture-portrait.twig' %}
+                -->
+
+                <!-- Placeholder when there is no profile picture -->
+                <img src="svg/portrait-placeholder.svg" alt="Avatar placeholder image" class="img-fluid bg-gray-100">
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-sm-12">
+
+                <p>
+                  <small>
+                    <a href="#">Liste complète des adresses et fonctions</a>
+                    <br/>
+                    {% include "@atoms/icon/icon.twig" with { icon: 'icon-lock' } %}<a href="#">Données administratives</a>
+                  </small>
+                </p>
+
+              </div>
+            </div>
+          </div>
+
+          <div class="people-contacts col-md-8">
+            <div class="row">
+              <div class="col-sm-12 mb-4">
+                <h2 class="people-title mb-3">Professeur titulaire, directeur du département XY</h2>
+                <p>
+                  <a href="#" class="btn btn-sm btn-primary">prenom.nom@epfl.ch</a>
+                  <a href="#" class="btn btn-sm btn-secondary">+41 21 666 77 88</a>
+                  <a href="#" class="btn btn-sm btn-secondary">abbr.epfl.ch</a>
+                </p>
+                <p>Nationalité: suisse et allemande</p>
+                <div class="mt-1">
+                  <p>
+                    <a href="true" class="social-icon social-icon-details social-icon-linkedin social-icon-discrete" rel="nofollow" title="View on LinkedIn">
+                      <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-linkedin"></use>
+                      </svg>
+                      <span class="user">firstname.name</span>
+                    </a>
+                    <a href="true" class="social-icon social-icon-details social-icon-google social-icon-discrete" rel="nofollow" title="View on Google Scholar">
+                      <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-google"></use>
+                      </svg>
+                      <span class="user">firstname.name</span>
+                    </a>
+                    <a href="true" class="social-icon social-icon-details social-icon-discrete" rel="nofollow" title="View on Scopus">
+                      <span class="user">Scopus: 123456789</span>
+                    </a>
+                    <a href="true" class="social-icon social-icon-details social-icon-discrete" rel="nofollow" title="View on Orcid">
+                      <span class="user">Orcid: 123456789</span>
+                    </a>
+                    <a href="true" class="social-icon social-icon-details social-icon-discrete" rel="nofollow" title="View on ResearcherID">
+                      <span class="user">ResearcherID: 123456789</span>
+                    </a>
+                  </p>
+                </div>
+              </div>
+            </div>
+            {# Collapsible info #}
+            {% include '@molecules/collapse-group/collapse-group-people-contacts.twig' with { title: false } %}
+            <hr>
+            <div class="row">
+              <div class="people-extra-info col-sm-12 mt-5">
+                <p><strong>Informations complémentaires</strong></p>
+                <p>Disponibilités: absente un vendredi sur deux.</p>
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque auctor urna id nulla ornare, placerat gravida nulla tincidunt. Nullam scelerisque mauris neque. Quisque condimentum nisl dolor, id auctor lorem interdum non.</p>
+              </div>
+            </div>
+          </div>
+
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="position-relative mt-5">
+    {# Intermediate navigation #}
+    <nav class="nav-tabs-light-wrapper sticky-top" id="intermediate-nav">
+      <div class="container">
+        <ul class="nav nav-tabs-light">
+          <li class="nav-item">
+            <a class="nav-link active" href="#biography">Biographie</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#publications">Publications</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#teaching-and-phd">Teaching &amp; PhD</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#research">Research</a>
+          </li>
+        </ul>
+      </div>
+    </nav>
+
+    <div class="container people-contents">
+      {# Biography area #}
+      <div class="my-5">
+        <h2 id="biography">Biographie <span class="sr-only">de Xavier Alexandre</span></h2>
+        <!--{% include '@atoms/collapse/collapse-partial.twig' %} -->
+        <div class="biogaphy-content">
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque auctor urna id nulla ornare, placerat gravida nulla tincidunt. Nullam scelerisque mauris neque. Quisque condimentum nisl dolor, id auctor lorem interdum non. Pellentesque ut ligula imperdiet, dictum risus eu, cursus eros. Curabitur elementum sapien nec velit egestas consequat. Ut fermentum dolor eu purus efficitur rutrum ac at purus. Curabitur eu risus vel leo vehicula auctor. Aenean in velit nisi. Curabitur ultricies lacinia odio, sed egestas ex facilisis nec. Pellentesque et sagittis justo, id consequat odio. Nullam molestie sit amet eros quis consequat.</p>
+          <h3>Mission</h3>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque auctor urna id nulla ornare, placerat gravida nulla tincidunt. Nullam scelerisque mauris neque. Quisque condimentum nisl dolor, id auctor lorem interdum non. Pellentesque ut ligula imperdiet, dictum risus eu, cursus eros.</p>
+          <p>Curabitur elementum sapien nec velit egestas consequat. Ut fermentum dolor eu purus efficitur rutrum ac at purus. Curabitur eu risus vel leo vehicula auctor. Aenean in velit nisi. Curabitur ultricies lacinia odio, sed egestas ex facilisis nec. Pellentesque et sagittis justo, id consequat odio. Nullam molestie sit amet eros quis consequat.</p>
+          <h3>Travail en cours</h3>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque auctor urna id nulla ornare, placerat gravida nulla tincidunt. Nullam scelerisque mauris neque. Quisque condimentum nisl dolor, id auctor lorem interdum non. Pellentesque ut ligula imperdiet, dictum risus eu, cursus eros. Curabitur elementum sapien nec velit egestas consequat. Ut fermentum dolor eu purus efficitur rutrum ac at purus.</p>
+        </div>
+        <div class="mt-5">
+          <h3>Champs de compétences</h3>
+          <p>
+            <a href="#" class="tag tag-primary">Mot clé</a>
+            <a href="#" class="tag tag-primary">Mot clé</a>
+            <a href="#" class="tag tag-primary">Mot clé</a>
+            <a href="#" class="tag tag-primary">Mot clé</a>
+            <a href="#" class="tag tag-primary">Mot clé</a>
+            <a href="#" class="tag tag-primary">Mot clé</a>
+            <a href="#" class="tag tag-primary">Mot clé</a>
+            <a href="#" class="tag tag-primary">Mot clé</a>
+          </p>
+          {# Free content area #}
+          <p>architecture web, ergonomie, usability, ergonomie, design et architecture de l’information, cms, iconographie, graphisme web, charte graphique, design, logo, expertise communication web, html, css2, ui design</p>
+        </div>
+        <div class="mt-5">
+          <h3>Formation</h3>
+          <div class="list-group">
+            <div class="list-group-item list-group-item-borderless education-list">
+              <p><strong>Dr. ès Sciences</strong></p>
+              <p>Microtechnologie</p>
+              <p>Université de Neuchâtel</p>
+              <p>2001</p>
+            </div>
+            <div class="list-group-item list-group-item-borderless education-list">
+              <p><strong>Master in Applied Sciences</strong></p>
+              <p>Engineering Physics</p>
+              <p>École Polytechnique de Montréal</p>
+              <p>1997</p>
+            </div>
+          </div>
+        </div>
+        <div class="mt-5">
+          <h3>Parcours professionnel</h3>
+          <div class="list-group">
+            {% for i in 1..3 %}
+            <div class="list-group-item list-group-item-borderless">
+              <p><strong>Intitulé du poste</strong></p>
+              <p>Description du poste, lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vel tortor nulla. In vehicula ante vel turpis rhoncus, ut malesuada magna tincidunt. Pellentesque purus sapien, porta ut aliquet et, sagittis ut diam.</p>
+              <div class="item-metadata">
+                <p class="item-date">2017 – 2019</p>
+                <p class="small">Nom de l'entreprise – <a href="#">Lien</a></p>
+              </div>
+            </div>
+            {% endfor %}
+          </div>
+        </div>
+        <div class="mt-5">
+          <h3>Récompenses</h3>
+          <div class="list-group">
+            {% for i in 1..4 %}
+            <div class="list-group-item list-group-item-borderless">
+              <p><strong>Titre de la récompense</strong></p>
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vel tortor nulla. In vehicula ante vel turpis rhoncus, ut malesuada magna tincidunt. Pellentesque purus sapien, porta ut aliquet et, sagittis ut diam.</p>
+              <div class="item-metadata">
+                <p class="item-date">12.11.2019</p>
+                <p class="small">Type: Lorem ipsum dolor – Source: Nom de l'institution – <a href="#">Lien</a></p>
+              </div>
+            </div>
+            {% endfor %}
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <hr class="darker">
+
+    <div class="container people-contents">
+      {# Publications #}
+      <div class="my-5">
+        <h2 id="publications">Publications <span class="sr-only">de Xavier Alexandre</span></h2>
+        <div class="mt-5">
+          <h3>Infoscience</h3>
+          {% include '@molecules/list-group/list-group-infoscience.twig' %}
+        </div>
+        <div class="mt-5">
+        <h3>Autres publications</h3>
+          {% include '@molecules/list-group/list-group-infoscience.twig' %}
+        </div>
+      </div>
+    </div>
+
+    <hr class="darker">
+
+    <div class="container people-contents">
+      {# Teaching and PHD area #}
+      <div class="my-5">
+        <h2 id="teaching-and-phd">Enseignement <span class="sr-only">of Xavier Alexandre</span></h2>
+        <div class="mt-5">
+          <h3 class="h4">Matières enseignées</h3>
+          <p>Informatique, Systèmes de communication, Architecture logiciels</p>
+          <h3 class="h4">Programmes doctoraux</h3>
+          <p>Doctoral program in computer and communication science, Doctoral program in Electrical Engineering</p>
+          <h3 class="h4">Doctorant·es</h3>
+          <p><a href="#">Gwendoline Woodroff</a>, <a href="#">Hurlu Berlu</a>, <a href="#">Anne Hughes</a>, <a href="#">Martin Richard-Foy</a></p>
+          <h3 class="h4">Ancien·nes doctorant·es</h3>
+          <p><a href="#">Gwendoline Woodroff</a>, <a href="#">Hurlu Berlu</a>, <a href="#">Anne Hughes</a>, <a href="#">Martin Richard-Foy</a>, <a href="#">Gwendoline Woodroff</a>, <a href="#">Hurlu Berlu</a>, <a href="#">Anne Hughes</a>, <a href="#">Martin Richard-Foy</a>, <a href="#">Gwendoline Woodroff</a>, <a href="#">Hurlu Berlu</a>, <a href="#">Anne Hughes</a>, <a href="#">Martin Richard-Foy</a>, <a href="#">Gwendoline Woodroff</a>, <a href="#">Hurlu Berlu</a>, <a href="#">Anne Hughes</a>, <a href="#">Martin Richard-Foy</a>, <a href="#">Gwendoline Woodroff</a>, <a href="#">Hurlu Berlu</a>, <a href="#">Anne Hughes</a>, <a href="#">Martin Richard-Foy</a></p>
+        </div>
+        <div class="mt-5">
+          <h3>Cours <span class="sr-only">of Xavier Alexandre</span></h3>
+          <div class="list-group">
+            {% for i in 1..3 %}
+            <div class="list-group-item list-group-item-borderless">
+              <h4><a href="#">Nom du cours</a></h4>
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vel tortor nulla. In vehicula ante vel turpis rhoncus, ut malesuada magna tincidunt. Pellentesque purus sapien, porta ut aliquet et, sagittis ut diam.</p>
+            </div>
+            {% endfor %}
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <hr class="darker">
+
+    <div class="container people-contents">
+      {# Research area #}
+      <div class="mt-5">
+        <h2 id="research">Recherche <span class="sr-only">of Xavier Alexandre</span></h2>
+        <div class="mt-5">
+          <h3>Sujets</h3>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+          </p>
+
+          <h3>Projets de recherche en cours</h3>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+          </p>
+        </div>
+      </div>
+    </div>
+
+  </div>
+{% endblock %}
+
+{% block footer %}
+  {% include '@organisms/footer/footer-light.twig' %}
+{% endblock %}

package/dist/components/pages/people-detail/people-detail.yml

@@ -0,0 +1,2 @@
+name: people-detail
+title: People detail

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

@@ -0,0 +1,41 @@
+{% set isSpecial = true %}
+
+{% extends "@templates/base/base.twig" %}
+
+{% block header %}
+  {% include '@organisms/header/header-light.twig' with { site_title: 'People' } %}
+{% endblock %}
+
+{% block breadcrumb %}
+<div class="breadcrumb-container">
+  {% include '@molecules/breadcrumb/breadcrumb-tagged.twig' %}
+</div>
+{% endblock %}
+
+{% block content %}
+
+<div class="container">
+  <h1>Résultats de recherche pour "Nom de la personne"</h1>
+  <h2>10 résultats</h2>
+</div>
+
+<div class="container mt-5">
+  <div class="row">
+    {% for i in 1..8 %}
+      <div class="col-md-6">
+        {% include '@organisms/contact/contact-compact.twig' %}
+      </div>
+    {% endfor %}
+  </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/people-list/people-list.yml

@@ -0,0 +1,2 @@
+title: People list
+name: people-list

package/dist/components/pages/programs/programs.twig

@@ -0,0 +1,30 @@
+{% extends "@templates/base/base.twig" %}
+
+{% block grid %}{% endblock %}
+
+{% block content %}
+
+<div class="container">
+  <div class="container-grid mt-5 mb-6">
+    <h1 class="mb-5">Programmes</h1>
+
+    <p>Un cursus de Bachelor représente en règle générale 3 années d'études, soit <a href="https://bachelor.epfl.ch/cms/site/bachelor2/op/edit/lang/fr/faq#faq-492445" target="_blank">180 crédits ECTS</a>. Le cursus est divisé en une première année dite propédeutique puis un cycle plus spécifique de 2 ans. La possibilité de partir pour un échange international d'un semestre ou d'un an est offerte lors de la troisième année du programme.</p>
+    <p>Un bachelor EPFL est un diplôme intermédiaire. Il est le passeport pour débuter un programme de master, à l'EPFL ou auprès d'une autre université dans le monde. La page <a href="https://bachelor.epfl.ch/cms/site/bachelor2/lang/fr/structure-etudes" target="_blank">structure générale</a> des études détaille cette organisation des cursus.</p>
+  </div>
+</div>
+
+<div class="container">
+  <h2 class="mb-4">Découvrez les programmes de Bachelor enseignés à l'EPFL :</h2>
+  <div class="row">
+    <div class="col-md-12">
+      <div class="row">
+        {% for i in 1..12 %}
+          <div class="col-md-6">
+            {% include '@content-types/section/section.twig' %}
+          </div>
+        {% endfor %}
+      </div>
+    </div>
+  </div>
+</div>
+{% endblock %}

package/dist/components/pages/programs/programs.yml

@@ -0,0 +1,2 @@
+title: Programs
+name: programs