epfl-elements 4.7.0 → 4.9.0

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/atoms/switch/switch-inline.twig

@@ -0,0 +1,5 @@
+<div class="custom-controls-inline">
+  {% include '@atoms/switch/switch.twig' with { id: '22', label: 'Cellular data', state: 'checked' } %}
+  {% include '@atoms/switch/switch.twig' with { id: '23', label: 'Airplane mode' } %}
+  {% include '@atoms/switch/switch.twig' with { id: '24', label: 'Turn off notifications'} %}
+</div>

package/dist/components/atoms/switch/switch-states.twig

@@ -0,0 +1,3 @@
+{% include '@atoms/switch/switch.twig' with { id: '12', label: 'Wi-Fi', state: 'checked' } %}
+{% include '@atoms/switch/switch.twig' with { id: '13', label: 'Bluetooth' } %}
+{% include '@atoms/switch/switch.twig' with { id: '14', label: 'VPN', state: 'disabled' } %}

package/dist/components/atoms/switch/switch.twig

@@ -0,0 +1,4 @@
+<div class="custom-control custom-switch">
+  <input type="checkbox" class="custom-control-input" id="custom-switch{{id}}" {{state}}>
+  <label class="custom-control-label" for="custom-switch{{id}}">{{ label?: 'Toggle'}}</label>
+</div>

package/dist/components/atoms/switch/switch.yml

@@ -0,0 +1,10 @@
+title: Switch
+name: switch
+variants:
+  - name: states
+    title: Switch sample
+    notes: Switches also support the disabled attribute.
+  - name: inline
+    title: Inline switch
+notes: |
+  A switch has the markup of a custom [checkbox](#/atoms/checkbox) but uses the `.custom-switch` class to render a toggle switch.

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 %}

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

@@ -6,9 +6,9 @@
 
 {% block content %}
 
-<article class="blog-post">
+<article class="blog-post container">
 
-  <header class="entry-header mb-5">
+  <header class="entry-header mb-5 container-grid">
     <h1 itemprop="name">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>
     <div class="post-meta my-4">
       <p class="text-muted">Publié le 9 décembre 2019</p>
@@ -20,10 +20,22 @@
     </div>
   </header>
 
-  <div class="entry-content mb-5">
+  <div class="entry-content mb-5 container-grid">
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent at pharetra est, non bibendum dolor. Proin turpis neque, viverra a augue vitae, dapibus iaculis tellus. Morbi ante nisi, venenatis vel velit id, ultrices efficitur nisl. Morbi consectetur non turpis eu interdum. Phasellus nec felis at justo efficitur cursus sed quis sapien. Proin facilisis sapien sit amet venenatis pellentesque. Nulla efficitur, massa a facilisis egestas, massa nulla scelerisque tellus, quis fringilla orci ante sed risus.</p>
-    <p>Sed varius volutpat mollis. Vestibulum suscipit hendrerit congue. Donec ante urna, molestie et magna quis, pellentesque auctor urna. Donec porta ligula sed nisl consequat vehicula. Maecenas aliquet, sapien vitae iaculis vestibulum, arcu neque viverra tellus, nec pulvinar diam sem id massa. Nunc vestibulum lacus nunc. Nunc sodales nisi in ante molestie gravida. Sed iaculis, libero quis efficitur fermentum, lacus orci sagittis lacus, sit amet consectetur lectus nibh vel nisi. Sed et accumsan orci. Cras imperdiet nibh odio, vitae dictum purus luctus in. Maecenas a nunc sit amet mauris fermentum fermentum. Curabitur sit amet neque sit amet lorem commodo rutrum vitae sed magna. Sed quis lectus dolor. Nullam placerat augue ut sollicitudin pharetra.</p>
+
+    <div class="container my-5">
+      {% include "@atoms/picture/picture.twig" %}
+    </div>
+
+    <p>Sed varius volutpat mollis. Vestibulum suscipit hendrerit congue. Donec ante urna, molestie et magna quis, pellentesque auctor urna. Donec porta ligula sed nisl consequat vehicula. Maecenas aliquet, sapien vitae iaculis vestibulum, arcu neque viverra tellus, nec pulvinar diam sem id massa. Nunc vestibulum lacus nunc.</p>
+
+    <div class="my-3">
+      {% include "@atoms/picture/picture.twig" %}
+    </div>
+
+    <p>Nunc sodales nisi in ante molestie gravida. Sed iaculis, libero quis efficitur fermentum, lacus orci sagittis lacus, sit amet consectetur lectus nibh vel nisi. Sed et accumsan orci. Cras imperdiet nibh odio, vitae dictum purus luctus in. Maecenas a nunc sit amet mauris fermentum fermentum. Curabitur sit amet neque sit amet lorem commodo rutrum vitae sed magna. Sed quis lectus dolor. Nullam placerat augue ut sollicitudin pharetra.</p>
+
 
     <blockquote class="blockquote">
       <p>In ut viverra mauris. Duis hendrerit, nulla ac condimentum condimentum, quam sem dignissim nulla, ut suscipit lorem purus sodales sapien. Mauris luctus scelerisque malesuada. Maecenas id augue velit. Donec malesuada, dolor vel auctor fermentum, eros enim auctor tellus, non vestibulum felis elit ut arcu. Maecenas sed euismod arcu, quis aliquam mi. Donec faucibus tristique ex, id cursus metus varius quis. Aenean neque mauris, pulvinar id placerat ac, finibus vel quam.</p>
@@ -33,12 +45,17 @@
     </blockquote>
 
     <p>In ut viverra mauris. Duis hendrerit, nulla ac condimentum condimentum, quam sem dignissim nulla, ut suscipit lorem purus sodales sapien. Mauris luctus scelerisque malesuada. Maecenas id augue velit. Donec malesuada, dolor vel auctor fermentum, eros enim auctor tellus, non vestibulum felis elit ut arcu. Maecenas sed euismod arcu, quis aliquam mi. Donec faucibus tristique ex, id cursus metus varius quis. Aenean neque mauris, pulvinar id placerat ac, finibus vel quam. Praesent fringilla neque ante, et auctor augue gravida at. Nunc pulvinar, nibh fringilla suscipit interdum, augue velit convallis enim, tempor rutrum risus justo ac mauris. Praesent lobortis odio augue. Curabitur vestibulum condimentum ipsum, a rhoncus est malesuada quis. Fusce luctus nisl et tortor varius ornare.</p>
+
+    <div class="container my-5">
+      {% include '@atoms/video/video.twig' %}
+    </div>
+
     <p>Nunc id imperdiet est. Phasellus a semper ante. Sed purus nisi, iaculis non purus id, ultricies vulputate leo. Ut dignissim vitae quam eget gravida. Nulla nec metus tortor. Nullam quis nisl at purus commodo consequat. Nullam sem dolor, faucibus in turpis eleifend, condimentum ultricies nisi. Phasellus vitae gravida lectus. Nam tellus magna, lacinia vel congue non, egestas at erat. Mauris consequat, justo in lobortis pharetra, nibh sapien gravida risus, vitae commodo nunc tellus eu nisi. Fusce tempus nisl laoreet diam luctus dictum. Aenean nisi felis, maximus nec ante ut, sodales viverra nisl. Vivamus iaculis fermentum lorem, vel sagittis erat imperdiet ac. In hac habitasse platea dictumst. Vivamus congue augue eget mi mollis tristique.</p>
     <p>Cras non sem sed erat feugiat pellentesque. In in risus est. Praesent ut lectus sit amet leo viverra scelerisque. Nulla facilisi. Cras vel lectus tortor. In auctor dictum odio vitae mollis. Donec fringilla viverra suscipit. Curabitur cursus nibh a purus volutpat imperdiet. Integer mollis varius enim eu porttitor.</p>
 
   </div>
 
-  <footer class="post-footer pt-4">
+  <footer class="post-footer pt-4 container-grid">
 
     <div class="post-nav py-md-1">