epfl-elements 4.6.1 → 4.8.0

package/assets/config/bootstrap-variables.scss

@@ -14,6 +14,7 @@ $white:    #fff !default;
 $gray-100: #e6e6e6 !default;
 $gray-200: #d5d5d5 !default;
 $gray-300: #c1c1c1 !default;
+$gray-500: #8e8e8e !default;
 $gray-600: #707070 !default;
 $black:    #212121 !default;
 
@@ -383,7 +384,7 @@ $input-bg:                              $white !default;
 $input-disabled-bg:                     $gray-100 !default;
 
 $input-color:                           $black !default;
-$input-border-color:                    $gray-200 !default;
+$input-border-color:                    $gray-500 !default;
 $input-border-width:                    $input-btn-border-width !default;
 $input-box-shadow:                      inset 0 1px 1px rgba($black, .075) !default;
 

package/assets/config/colors.json

@@ -5,6 +5,7 @@
   "$gray-100": "#e6e6e6",
   "$gray-200": "#d5d5d5",
   "$gray-300": "#c1c1c1",
+  "$gray-500": "#8e8e8e",
   "$gray-600": "#707070",
   "$black": "#212121",
   "$leman": "#00A79F",

package/dist/components/atoms/link/link-button.twig

@@ -0,0 +1,2 @@
+<a class="btn btn-primary" href="#">Primary button link</a>
+<a class="btn btn-secondary" href="#">Secondary button link</a>

package/dist/components/atoms/link/link.yml

@@ -25,3 +25,9 @@ variants:
   - name: login
     title: Login link
     notes:
+  - name: button
+    title: Button link
+    notes: |
+      Use the classes `btn`, `btn-primary` or `btn-secondary` to create a link with the look of a button.
+
+      ⚠️ Button links should be used to target a page or section of a page – like a regular link. To trigger an action, use an [HTML button](#/atoms/button).

package/dist/components/atoms/picture/picture-news-thumb.twig

@@ -1,3 +1,13 @@
+{% if light_image %}
+<picture>
+  <source media="(min-width: 1140px)" srcset="./images/styleguide/news-thumbs/news_thumb_02-95x53.jpg 1x, ./images/styleguide/news-thumbs/news_thumb_02-190x107.jpg 2x">
+  <source media="(min-width: 960px)" srcset="./images/styleguide/news-thumbs/news_thumb_02-95x53.jpg 1x, ./images/styleguide/news-thumbs/news_thumb_02-190x107.jpg 2x">
+  <source media="(min-width: 720px)" srcset="./images/styleguide/news-thumbs/news_thumb_02-80x45.jpg 1x, ./images/styleguide/news-thumbs/news_thumb_02-160x90.jpg 2x">
+  <source media="(min-width: 541px)" srcset="./images/styleguide/news-thumbs/news_thumb_02-120x68.jpg 1x, ./images/styleguide/news-thumbs/news_thumb_02-240x135.jpg 2x">
+  <source media="(max-width: 540px)" srcset="./images/styleguide/news-thumbs/news_thumb_02-540x304.jpg 1x, ./images/styleguide/news-thumbs/news_thumb_02-1080x608.jpg 2x">
+  <img src="./images/styleguide/news-thumbs/news_thumb_02-95x53.jpg" class="img-fluid" alt="ALT">
+</picture>
+{% else %}
 <picture>
   <source media="(min-width: 1140px)" srcset="./images/styleguide/news-thumbs/news_thumb-95x53.jpg 1x, ./images/styleguide/news-thumbs/news_thumb-190x107.jpg 2x">
   <source media="(min-width: 960px)" srcset="./images/styleguide/news-thumbs/news_thumb-95x53.jpg 1x, ./images/styleguide/news-thumbs/news_thumb-190x107.jpg 2x">
@@ -6,3 +16,4 @@
   <source media="(max-width: 540px)" srcset="./images/styleguide/news-thumbs/news_thumb-540x304.jpg 1x, ./images/styleguide/news-thumbs/news_thumb-1080x608.jpg 2x">
   <img src="./images/styleguide/news-thumbs/news_thumb-95x53.jpg" class="img-fluid" alt="ALT">
 </picture>
+{% endif %}

package/dist/components/content-types/news/news-horizontal-listing-gray.twig

@@ -0,0 +1,36 @@
+<div class="card-slider-wrapper">
+  <div class="card-slider">
+  {% for i in 1..10 %}
+    <div class="card-slider-cell">
+      <a href="#" class="card link-trapeze-horizontal">
+        <div class="card-body">
+        {% include '@atoms/picture/picture.twig' with {'variant':'news-thumb'} %}
+          <div itemscope itemtype="http://schema.org/Article">
+            <h3 class="card-title h5 mt-3" itemprop="name">Physics: new e-books for the AIAA Education Series</h3>
+            <p>
+              <time datetime="2018-03-26" itemprop="datePublished"><span class="sr-only">Published:</span>26.03.2018</time>
+              <span class="text-muted" itemprop="description">— Lorem ipsum dolor sit amet, consectetur adipiscing elit. Si enim ad populum me vocas, eum. Quid enim me prohiberet
+                Epicureum esse, si probarem, quae ille diceret?</span>
+            </p>
+          </div>
+        </div>
+      </a>
+    </div>
+  {% endfor %}
+  </div>
+
+  <div class="card-slider-footer">
+    <div>
+      <button role="button" id="card-slider-prev" class="card-slider-btn link-trapeze-horizontal disabled">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#icon-chevron-left"></use>
+        </svg>
+      </button>
+      <button role="button" id="card-slider-next" class="card-slider-btn link-trapeze-horizontal">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#icon-chevron-right"></use>
+        </svg>
+      </button>
+    </div>
+  </div>
+</div>

package/dist/components/content-types/news/news-horizontal-listing.twig

@@ -0,0 +1,36 @@
+<div class="card-slider-wrapper">
+  <div class="card-slider">
+  {% for i in 1..10 %}
+    <div class="card-slider-cell">
+      <a href="#" class="card card-gray link-trapeze-horizontal">
+        <div class="card-body">
+        {% include '@atoms/picture/picture.twig' with {'variant':'news-thumb'} %}
+          <div itemscope itemtype="http://schema.org/Article">
+            <h3 class="card-title h5 mt-3" itemprop="name">Physics: new e-books for the AIAA Education Series</h3>
+            <p>
+              <time datetime="2018-03-26" itemprop="datePublished"><span class="sr-only">Published:</span>26.03.2018</time>
+              <span class="text-muted" itemprop="description">— Lorem ipsum dolor sit amet, consectetur adipiscing elit. Si enim ad populum me vocas, eum. Quid enim me prohiberet
+                Epicureum esse, si probarem, quae ille diceret?</span>
+            </p>
+          </div>
+        </div>
+      </a>
+    </div>
+  {% endfor %}
+  </div>
+
+  <div class="card-slider-footer">
+    <div>
+      <button role="button" id="card-slider-prev" class="card-slider-btn link-trapeze-horizontal disabled">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#icon-chevron-left"></use>
+        </svg>
+      </button>
+      <button role="button" id="card-slider-next" class="card-slider-btn link-trapeze-horizontal">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#icon-chevron-right"></use>
+        </svg>
+      </button>
+    </div>
+  </div>
+</div>

package/dist/components/content-types/news/news.yml

@@ -1,6 +1,13 @@
 title: News
 name: news
 variants:
+  - name: horizontal-listing
+    title: Horizontal Listing
+    notes: Don't forget to wrap your card slider with a wrapper that will hide the overflow (`.overflow-hidden` helper class will achieve just that).
+  - name: horizontal-listing-gray
+    title: Horizontal Listing with gray background
+    notes: Don't forget to wrap your card slider with a wrapper that will hide the overflow (`.overflow-hidden` helper class will achieve just that).
+    wrapper: bg-gray-100 py-4 my-4
   - name: highlighted
     title: Highlighted
   - name: highlighted-carousel

package/dist/components/molecules/breadcrumb/breadcrumb-dropdown.twig

@@ -0,0 +1,69 @@
+<nav aria-label="breadcrumb" class="breadcrumb-wrapper">
+  <ol class="breadcrumb">
+    <li class="breadcrumb-item">
+      <a class="bread-link bread-home" href="#">
+        {% include '@atoms/icon/icon.twig' with { icon: 'icon-home' } %}
+      </a>
+    </li>
+    <li class="breadcrumb-item expand-links">
+      <button class="btn btn-expand-links" aria-expanded="false" title="Display the complete path">
+        <span class="dots" aria-hidden="true">…</span>
+        <span class="sr-only">Display the complete path</span>
+      </button>
+    </li>
+    <li class="breadcrumb-item">
+      <a class="bread-link" href="#">Schools</a>
+      <div class="dropdown">
+        <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-controls="dropdown-menu-1">
+          {% include '@atoms/icon/icon.twig' with { icon: 'arrow-down-circle', icon_classes:'feather' } %}
+          <span class="sr-only">Display same level pages – Schools</span>
+        </button>
+        <ul class="dropdown-menu" id="dropdown-menu-1">
+          <li class="dropdown-item"><a href="#">About</a></li>
+          <li class="dropdown-item"><a href="#">Education</a></li>
+          <li class="dropdown-item"><a href="#">Research</a></li>
+          <li class="dropdown-item"><a href="#">Innovation</a></li>
+          <li class="dropdown-item current-menu-item-parent"><a href="#">Schools</a></li>
+          <li class="dropdown-item"><a href="#">Campus</a></li>
+        </ul>
+      </div>
+    </li>
+    <li class="breadcrumb-item">
+      <a class="bread-link" href="#">School of Architecture, Civil and Environmental Engineering</a>
+      <div class="dropdown">
+        <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-controls="dropdown-menu-2">
+          {% include '@atoms/icon/icon.twig' with { icon: 'arrow-down-circle', icon_classes:'feather' } %}
+          <span class="sr-only">Display same level pages – School of Architecture, Civil and Environmental Engineering</span>
+        </button>
+        <ul class="dropdown-menu" id="dropdown-menu-2">
+          <li class="dropdown-item current-menu-item-parent"><a href="#">School of Architecture, Civil and Environmental Engineering</a></li>
+          <li class="dropdown-item"><a href="#">School of Computer and Communication Sciences</a></li>
+          <li class="dropdown-item"><a href="#">School of Basic Sciences</a></li>
+          <li class="dropdown-item"><a href="#">School of Engineering</a></li>
+          <li class="dropdown-item"><a href="#">School of Life Sciences</a></li>
+          <li class="dropdown-item"><a href="#">College of Management of Technology</a></li>
+          <li class="dropdown-item"><a href="#">College of Humanities</a></li>
+          <li class="dropdown-item"><a href="#">Sections</a></li>
+        </ul>
+      </div>
+    </li>
+    <li class="breadcrumb-item">
+      <a class="bread-link" href="#">Sustainability challenges</a>
+    </li>
+    <li class="breadcrumb-item active" aria-current="page">
+      <span class="bread-item">FUSTIC association</span>
+      <div class="dropdown">
+        <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-controls="dropdown-menu-3">
+          {% include '@atoms/icon/icon.twig' with { icon: 'arrow-down-circle', icon_classes:'feather' } %}
+          <span class="sr-only">Display same level pages – FUSTIC association</span>
+        </button>
+        <ul class="dropdown-menu" id="dropdown-menu-3">
+          <li class="dropdown-item"><a href="#">ENAC Clusters</a></li>
+          <li class="dropdown-item"><a href="#">Interdisciplinary Centers</a></li>
+          <li class="dropdown-item current-menu-item-parent"><a href="#">FUSTIC association</a></li>
+          <li class="dropdown-item"><a href="#">Sustainability grants</a></li>
+        </ul>
+      </div>
+    </li>
+  </ol>
+</nav>

package/dist/components/molecules/breadcrumb/breadcrumb-tagged.twig

@@ -10,9 +10,64 @@
       <a href="#" class="tag tag-primary">Innovation</a>
       <a href="#" class="tag tag-primary">W3C</a>
     </li>
-    <li class="breadcrumb-item"><a href="#">Schools</a></li>
-    <li class="breadcrumb-item"><a href="#">ENAC</a></li>
-    <li class="breadcrumb-item"><a href="#">Formations</a></li>
-    <li class="breadcrumb-item active" aria-current="page">Projets</li>
+    <li class="breadcrumb-item expand-links">
+      <button class="btn btn-expand-links" aria-expanded="false" title="Display the complete path">
+        <span class="dots" aria-hidden="true">…</span>
+        <span class="sr-only">Display the complete path</span>
+      </button>
+    </li>
+    <li class="breadcrumb-item">
+      <a class="bread-link" href="#">Schools</a>
+      <div class="dropdown">
+        <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-controls="dropdown-menu-1">
+          {% include '@atoms/icon/icon.twig' with { icon: 'arrow-down-circle', icon_classes:'feather' } %}
+          <span class="sr-only">Display same level pages – Schools</span>
+        </button>
+        <ul class="dropdown-menu" id="dropdown-menu-1">
+          <li class="dropdown-item"><a href="#">About</a></li>
+          <li class="dropdown-item"><a href="#">Education</a></li>
+          <li class="dropdown-item"><a href="#">Research</a></li>
+          <li class="dropdown-item"><a href="#">Innovation</a></li>
+          <li class="dropdown-item current-menu-item-parent"><a href="#">Schools</a></li>
+          <li class="dropdown-item"><a href="#">Campus</a></li>
+        </ul>
+      </div>
+    </li>
+    <li class="breadcrumb-item">
+      <a class="bread-link" href="#">School of Architecture, Civil and Environmental Engineering</a>
+      <div class="dropdown">
+        <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-controls="dropdown-menu-2">
+          {% include '@atoms/icon/icon.twig' with { icon: 'arrow-down-circle', icon_classes:'feather' } %}
+          <span class="sr-only">Display same level pages – School of Architecture, Civil and Environmental Engineering</span>
+        </button>
+        <ul class="dropdown-menu" id="dropdown-menu-2">
+          <li class="dropdown-item current-menu-item-parent"><a href="#">School of Architecture, Civil and Environmental Engineering</a></li>
+          <li class="dropdown-item"><a href="#">School of Computer and Communication Sciences</a></li>
+          <li class="dropdown-item"><a href="#">School of Basic Sciences</a></li>
+          <li class="dropdown-item"><a href="#">School of Engineering</a></li>
+          <li class="dropdown-item"><a href="#">School of Life Sciences</a></li>
+          <li class="dropdown-item"><a href="#">College of Management of Technology</a></li>
+          <li class="dropdown-item"><a href="#">College of Humanities</a></li>
+          <li class="dropdown-item"><a href="#">Sections</a></li>
+        </ul>
+      </div>
+    </li>
+    <li class="breadcrumb-item active" aria-current="page">
+      <span class="bread-item">ENAC Faculty</span>
+      <div class="dropdown">
+        <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-controls="dropdown-menu-3">
+          {% include '@atoms/icon/icon.twig' with { icon: 'arrow-down-circle', icon_classes:'feather' } %}
+          <span class="sr-only">Display same level pages – ENAC Faculty</span>
+        </button>
+        <ul class="dropdown-menu" id="dropdown-menu-3">
+          <li class="dropdown-item"><a href="#">News</a></li>
+          <li class="dropdown-item current-menu-item-parent"><a href="#">ENAC Faculty</a></li>
+          <li class="dropdown-item"><a href="#">Education</a></li>
+          <li class="dropdown-item"><a href="#">Research</a></li>
+          <li class="dropdown-item"><a href="#">Sustainability challenges</a></li>
+          <li class="dropdown-item"><a href="#">Intranet ENAC</a></li>
+        </ul>
+      </div>
+    </li>
   </ol>
 </nav>

package/dist/components/molecules/breadcrumb/breadcrumb.twig

@@ -1,11 +1,17 @@
 <nav aria-label="breadcrumb" class="breadcrumb-wrapper">
   <ol class="breadcrumb">
     <li class="breadcrumb-item">
-      <a href="#">
+      <a class="bread-link bread-home" href="#">
         {% include '@atoms/icon/icon.twig' with { icon: 'icon-home' } %}
       </a>
     </li>
-    <li class="breadcrumb-item"><a href="#">Schools</a></li>
+    <li class="breadcrumb-item expand-links">
+      <button class="btn btn-expand-links" aria-expanded="false" title="Display the complete path">
+        <span class="dots" aria-hidden="true">…</span>
+        <span class="sr-only">Display the complete path</span>
+      </button>
+    </li>
+    <li class="breadcrumb-item"><a class="bread-link" href="#">Schools</a></li>
     <li class="breadcrumb-item active" aria-current="page">ENAC</li>
   </ol>
 </nav>

package/dist/components/molecules/breadcrumb/breadcrumb.yml

@@ -3,5 +3,9 @@ name: breadcrumb
 notes: |
   The breadcrumb is your compass, on every page. It helps you to understand where you are, so you can decide where to go next.
 variants:
+  - name: dropdown
+    title: Dropdown
+    notes: |
+      Breadcrumb dropdowns are used to display same level pages.
   - name: tagged
     title: Tagged

package/dist/components/molecules/key-number/key-number-hn-link.twig

@@ -0,0 +1,23 @@
+{% set icon = icon|default("https://via.placeholder.com/") %}
+<a class="card link-trapeze-horizontal" href="#">
+  <div class="card border-0 bg-white m-0 h-100">
+    <div class="card-header border-0">
+      <div class="row">
+        <div class="col-md-6">
+          <p class="h4">près de 18'000</p>
+        </div>
+        <div class="col-md-6 text-right">
+          <img src="images/styleguide/key-numbers/students.png" class="d-block m-auto" alt="Pictogramme avec deux personnages" />
+        </div>
+      </div>
+    </div>
+    <div class="card-body pt-0">
+      <div class="row">
+        <div class="col-md-12">
+          <hr />
+          <p>étudiant·es, collaborateurs et collaboratrices font de l'EPFL une petite ville trépidante et dynamique</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</a>

package/dist/components/molecules/key-number/key-number-hn.twig

@@ -0,0 +1,23 @@
+{% set icon = icon|default("https://via.placeholder.com/") %}
+<div class="card">
+  <div class="card border-0 bg-white m-0 h-100">
+    <div class="card-header border-0">
+      <div class="row">
+        <div class="col-md-6">
+          <p class="h4">près de 18'000</p>
+        </div>
+        <div class="col-md-6 text-right">
+          <img src="images/styleguide/key-numbers/students.png" class="d-block m-auto" alt="Pictogramme avec deux personnages" />
+        </div>
+      </div>
+    </div>
+    <div class="card-body pt-0">
+      <div class="row">
+        <div class="col-md-12">
+          <hr />
+          <p>étudiant·es, collaborateurs et collaboratrices font de l'EPFL une petite ville trépidante et dynamique</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

package/dist/components/molecules/key-number/key-number.yml

@@ -5,3 +5,7 @@ variants:
   - name: large
     title: Large
     wrapper: 'bg-gray-100'
+  - name: hn
+    title: Highlighted number
+  - name: hn-link
+    title: Highlighted number with link

package/dist/components/molecules/list-group/list-group-teasers.twig

@@ -1,5 +1,5 @@
 <div class="list-group">
-  {% for i in 1..4 %}
+  {% for i in 1..2 %}
 
       <div class="list-group-teaser list-group-item list-group-teaser-container">
         <div class="list-group-teaser-thumbnail">
@@ -18,6 +18,40 @@
       </div>
   {% endfor %}
 
+  <div class="list-group-teaser list-group-item list-group-teaser-container">
+    <div class="list-group-teaser-thumbnail">
+      <a href="#" class="link-trapeze-horizontal">
+        {% include '@atoms/picture/picture-news-thumb.twig' %}
+        <div class="news-video-overlay"></div>
+      </a>
+    </div>
+    <div class="list-group-teaser-content">
+      <h3 class="h5"><a href="#">Physics: new e-books for the AIAA Education Series</a></h3>
+      <p>
+        <time datetime="2018-03-26"><span class="sr-only">Published:</span>26.03.2018</time>
+        <span class="text-muted">— Lorem ipsum dolor sit amet, consectetur adipiscing elit. Si enim ad populum me vocas, eum. Quid enim me prohiberet
+          Epicureum esse, si probarem, quae ille diceret?</span>
+      </p>
+    </div>
+  </div>
+
+  <div class="list-group-teaser list-group-item list-group-teaser-container">
+    <div class="list-group-teaser-thumbnail">
+      <a href="#" class="link-trapeze-horizontal">
+        {% include '@atoms/picture/picture-news-thumb.twig' with { light_image: true } %}
+        <div class="news-video-overlay"></div>
+      </a>
+    </div>
+    <div class="list-group-teaser-content">
+      <h3 class="h5"><a href="#">Physics: new e-books for the AIAA Education Series</a></h3>
+      <p>
+        <time datetime="2018-03-26"><span class="sr-only">Published:</span>26.03.2018</time>
+        <span class="text-muted">— Lorem ipsum dolor sit amet, consectetur adipiscing elit. Si enim ad populum me vocas, eum. Quid enim me prohiberet
+          Epicureum esse, si probarem, quae ille diceret?</span>
+      </p>
+    </div>
+  </div>
+
   <div class="list-group-teaser list-group-item list-group-teaser-container teaser-img-right">
     <div class="list-group-teaser-thumbnail">
       <a href="#" class="link-trapeze-horizontal">

package/dist/components/organisms/footer/footer-legal.twig

@@ -6,9 +6,12 @@
     <a href="https://www.epfl.ch/about/overview/fr/reglements-et-directives/mentions-legales/">Accessibilité</a>
     <a href="https://www.epfl.ch/about/overview/fr/reglements-et-directives/mentions-legales/">Mentions légales</a>
     <a href="https://go.epfl.ch/protection-des-donnees/">Protection des données</a>
+    {% if isNews %}
+      <a href="https://go.epfl.ch/charte">Charte</a>
+    {% endif %}
   </div>
   <div>
-    <p>&copy; 2023 EPFL, tous droits réservés</p>
+    <p>&copy; 2024 EPFL, tous droits réservés</p>
   </div>
 </div>
 {% endif %}
@@ -18,9 +21,12 @@
     <a href="https://www.epfl.ch/about/overview/regulations-and-guidelines/disclaimer/">Accessibility</a>
     <a href="https://www.epfl.ch/about/overview/regulations-and-guidelines/disclaimer/">Disclaimer</a>
     <a href="https://go.epfl.ch/privacy-policy/">Privacy policy</a>
+    {% if isNews %}
+      <a href="https://go.epfl.ch/guidelines">Charter</a>
+    {% endif %}
   </div>
   <div>
-    <p>&copy; 2023 EPFL, all rights reserved</p>
+    <p>&copy; 2024 EPFL, all rights reserved</p>
   </div>
 </div>
 {% endif %}
@@ -30,9 +36,12 @@
       <a href="https://www.epfl.ch/about/overview/regulations-and-guidelines/disclaimer/">Zugänglichkeit</a>
       <a href="https://www.epfl.ch/about/overview/regulations-and-guidelines/disclaimer/">Impressum</a>
       <a href="https://go.epfl.ch/privacy-policy/">Datenschutzerklärung</a>
+      {% if isNews %}
+        <a href="https://go.epfl.ch/guidelines">Richtlinien</a>
+      {% endif %}
     </div>
     <div>
-      <p>&copy; 2023 EPFL, alle Rechte vorbehalten</p>
+      <p>&copy; 2024 EPFL, alle Rechte vorbehalten</p>
     </div>
   </div>
 {% endif %}

package/dist/components/organisms/key-number-group/key-number-group-hn.twig

@@ -0,0 +1,7 @@
+<div class="container">
+  <div class="card-deck">
+    {% include '@molecules/key-number/key-number-hn-link.twig' %}
+    {% include '@molecules/key-number/key-number-hn-link.twig' %}
+    {% include '@molecules/key-number/key-number-hn.twig' %}
+  </div>
+</div>

package/dist/components/organisms/key-number-group/key-number-group.yml

@@ -1,3 +1,6 @@
 title: Key number group
 name: key-number-group
 wrapper: bg-gray-100
+variants:
+  - name: hn
+    title: Highlighted number

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

@@ -4,10 +4,15 @@
   role="navigation"
   aria-describedby="nav-aside-title"
 >
-  <h2 class="h5 sr-only-xl">Dans la même section</h2>
-  <ul>
+  <h2 class="h5 sr-only-xl" id="nav-aside-title">Dans la même section</h2>
+  <ul class="nav-menu">
   {% if nav_aside_items %}
     {% for item in nav_aside_items %}
+    {% if item.siblings_before and loop.index0 == nav_aside_active %}
+      {% for child in item.siblings_before %}
+      <li><a href="#">{{child}}</a></li>
+      {% endfor %}
+    {% endif %}
     <li{% if loop.index0 == nav_aside_active %} class="active"{% endif %}>
       <a href="#">
         {{item.label}}
@@ -23,6 +28,11 @@
       </ul>
       {% endif %}
     </li>
+    {% if item.siblings_after and loop.index0 == nav_aside_active %}
+      {% for child in item.siblings_after %}
+      <li><a href="#">{{child}}</a></li>
+      {% endfor %}
+    {% endif %}
     {% endfor %}
   {% else %}
     <li><a href="#">S'inscrire au Master</a></li>

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

@@ -1,2 +1,6 @@
 title: Nav aside
 name: nav-aside
+notes: |
+  **Mobile version**
+
+  On small devices, the side navigation can be displayed inside the mobile navigation, below the main menu. See [Nav Mobile](/#/organisms/nav-mobile)

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

@@ -0,0 +1,24 @@
+<div class="nav-container">
+  <nav class="nav-main nav-main-mobile" id="main-navigation" role="navigation">
+    <div class="nav-wrapper">
+      <div class="nav-container current-menu-parent">
+        <ul id="menu-main" class="nav-menu">
+          <li class=""><a href="#">About</a></li>
+          <li><a href="#">Education</a></li>
+          <li><a href="#">Research</a></li>
+          <li><a href="#">Innovation</a></li>
+          <li class="current-menu-item"><a href="#">Schools</a></li>
+          <li><a href="#">Campus</a></li>
+        </ul>
+      </div>
+    </div>
+  </nav>
+  <!-- Add side navigation here in order to display it in the mobile menu -->
+  {% if not isSpecial %}
+  <aside class="nav-aside-wrapper">
+    {% block sideNav %}
+      {% include '@organisms/nav-aside/nav-aside.twig' %}
+    {% endblock %}
+  </aside>
+  {% endif %}
+</div>

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

@@ -0,0 +1,5 @@
+title: Nav mobile
+name: nav-mobile
+wrapper: nav-toggle-layout
+notes: |
+  The mobile navigation is opened by clicking the [Nav Toggle Button](/#/atoms/nav-toggle-mobile).

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

@@ -1,3 +1,5 @@
+{% set isSpecial = true %}
+
 {% extends "@templates/base/base.twig" %}
 
 {% block content %}

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

@@ -1,3 +1,5 @@
+{% set isSpecial = true %}
+
 {% extends "@templates/base/base.twig" %}
 
 {% block content %}