epfl-elements 4.5.0 → 4.5.1

package/dist/components/molecules/tabs/tabs-light.twig

@@ -0,0 +1,13 @@
+<nav class="nav-tabs-light-wrapper">
+  <ul class="nav nav-tabs-light">
+    <li class="nav-item">
+      <a class="nav-link active" href="#home">Home</a>
+    </li>
+    <li class="nav-item">
+      <a class="nav-link" href="#profile">Profile</a>
+    </li>
+    <li class="nav-item">
+      <a class="nav-link" href="#contact">Contact</a>
+    </li>
+  </ul>
+</nav>

package/dist/components/molecules/tabs/tabs-vertical.twig

@@ -0,0 +1,40 @@
+<div class="nav-tabs-vertical-wrapper">
+  <ul class="nav nav-tabs nav-tabs-vertical" role="tablist">
+    <li class="nav-item">
+      <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home2" role="tab" aria-controls="home" aria-selected="true">Home</a>
+    </li>
+    <li class="nav-item">
+      <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile2" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
+    </li>
+    <li class="nav-item">
+      <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact2" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
+    </li>
+  </ul>
+
+  <div class="tab-content p-3">
+    <div class="tab-pane fade show active" id="home2" role="tabpanel" aria-labelledby="home-tab">
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Collatio igitur ista te nihil iuvat. Si longus, levis dictata sunt.
+        Nulla profecto est, quin suam vim retineat a primo ad extremum. Res enim fortasse verae, certe graves, non ita tractantur,
+        ut debent, sed aliquanto minutius. Animum autem reliquis rebus ita perfecit, ut corpus; At coluit ipse amicitias.
+      </p>
+    </div>
+    <div class="tab-pane fade" id="profile2" role="tabpanel" aria-labelledby="profile-tab">
+      <p>
+        Sic vester sapiens magno aliquo emolumento commotus cicuta, si opus erit, dimicabit. Cenasti in vita numquam bene, cum omnia
+        in ista Consumis squilla atque acupensere cum decimano. Nam et complectitur verbis, quod vult, et dicit plane, quod
+        intellegam; Duae sunt enim res quoque, ne tu verba solum putes. Non quaeritur autem quid naturae tuae consentaneum
+        sit, sed quid disciplinae. Haec dicuntur inconstantissime. Ut enim consuetudo loquitur, id solum dicitur honestum,
+        quod est populari fama gloriosum. Ita ne hoc quidem modo paria peccata sunt. Confecta res esset.
+      </p>
+    </div>
+    <div class="tab-pane fade" id="contact2" role="tabpanel" aria-labelledby="contact-tab">
+      <p>
+        Consequens enim est et post oritur, ut dixi. Duo Reges: constructio interrete. Indicant pueri, in quibus ut in speculis natura
+        cernitur. Sed quoniam et advesperascit et mihi ad villam revertendum est, nunc quidem hactenus; Scaevola tribunus plebis
+        ferret ad plebem vellentne de ea re quaeri. Quodsi ipsam honestatem undique pertectam atque absolutam. Paupertas si
+        malum est, mendicus beatus esse nemo potest, quamvis sit sapiens. Sint modo partes vitae beatae. Si quae forte-possumus.
+      </p>
+    </div>
+  </div>
+</div>

package/dist/components/molecules/tabs/tabs.twig

@@ -0,0 +1,38 @@
+<ul class="nav nav-tabs" role="tablist">
+  <li class="nav-item">
+    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
+  </li>
+</ul>
+
+<div class="tab-content p-3">
+  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Collatio igitur ista te nihil iuvat. Si longus, levis dictata sunt.
+      Nulla profecto est, quin suam vim retineat a primo ad extremum. Res enim fortasse verae, certe graves, non ita tractantur,
+      ut debent, sed aliquanto minutius. Animum autem reliquis rebus ita perfecit, ut corpus; At coluit ipse amicitias.
+    </p>
+  </div>
+  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
+    <p>
+      Sic vester sapiens magno aliquo emolumento commotus cicuta, si opus erit, dimicabit. Cenasti in vita numquam bene, cum omnia
+      in ista Consumis squilla atque acupensere cum decimano. Nam et complectitur verbis, quod vult, et dicit plane, quod
+      intellegam; Duae sunt enim res quoque, ne tu verba solum putes. Non quaeritur autem quid naturae tuae consentaneum
+      sit, sed quid disciplinae. Haec dicuntur inconstantissime. Ut enim consuetudo loquitur, id solum dicitur honestum,
+      quod est populari fama gloriosum. Ita ne hoc quidem modo paria peccata sunt. Confecta res esset.
+    </p>
+  </div>
+  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
+    <p>
+      Consequens enim est et post oritur, ut dixi. Duo Reges: constructio interrete. Indicant pueri, in quibus ut in speculis natura
+      cernitur. Sed quoniam et advesperascit et mihi ad villam revertendum est, nunc quidem hactenus; Scaevola tribunus plebis
+      ferret ad plebem vellentne de ea re quaeri. Quodsi ipsam honestatem undique pertectam atque absolutam. Paupertas si
+      malum est, mendicus beatus esse nemo potest, quamvis sit sapiens. Sint modo partes vitae beatae. Si quae forte-possumus.
+    </p>
+  </div>
+</div>

package/dist/components/molecules/tabs/tabs.yml

@@ -0,0 +1,11 @@
+title: Tabs
+name: tabs
+variants:
+  - name: vertical
+    title: Vertical
+  - name: light
+    title: Light
+    notes: |
+      The light version can be set as sticky with the class `.sticky-top` on the wrapper.
+
+      To set the scrollspy plugin on the nav add an id to the nav and `data-spy="scroll" data-target="#nav-id" data-offset="0"` to the body tag.

package/dist/components/organisms/card-slider/card-slider.twig

@@ -0,0 +1,42 @@
+<div class="card-slider-wrapper">
+  <div class="card-slider">
+    <div class="card-slider-cell card-slider-cell-lg">
+      {% include "@content-types/event/event-highlight.twig" %}
+    </div>
+    <div class="card-slider-cell">
+      {% include "@content-types/event/event-just-finished.twig" %}
+    </div>
+    <div class="card-slider-cell">
+      {% include "@content-types/event/event-invitation.twig" %}
+    </div>
+    <div class="card-slider-cell">
+      {% include "@content-types/event/event.twig" %}
+    </div>
+    <div class="card-slider-cell">
+      {% include "@content-types/event/event.twig" %}
+    </div>
+    <div class="card-slider-cell">
+      {% include "@content-types/event/event.twig" %}
+    </div>
+    <div class="card-slider-cell">
+      {% include "@content-types/event/event.twig" %}
+    </div>
+    <div class="card-slider-cell">
+      {% include "@content-types/event/event.twig" %}
+    </div>
+  </div>
+
+  <div class="card-slider-footer">
+    <div>
+      <button role="button" id="card-slider-prev" class="card-slider-btn link-trapeze-horizontal disabled">
+        {% include "@atoms/icon/icon.twig" with { icon: 'icon-chevron-left' } %}
+      </button>
+      <button role="button" id="card-slider-next" class="card-slider-btn link-trapeze-horizontal">
+        {% include "@atoms/icon/icon.twig" with { icon: 'icon-chevron-right' } %}
+      </button>
+    </div>
+    <div>
+      <a href="#">Voir l’agenda complet des événements</a>
+    </div>
+  </div>
+</div>

package/dist/components/organisms/card-slider/card-slider.yml

@@ -0,0 +1,5 @@
+title: Card slider
+name: card-slider
+wrapper: bg-gray-100 overflow-hidden
+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).

package/dist/components/organisms/contact/contact-banner.twig

@@ -0,0 +1,30 @@
+<div class="row">
+  <div class="col-md-6">
+    <h3>Contact</h3>
+    <p>Les guichets des « services aux étudiant-e-s » est le point de contact central pour traiter vos demandes.</p>
+    <div class="card card-body card-sm mb-2 flex-row flex-wrap justify-content-between justify-content-sm-start">
+      <div class="mr-3 w-sm-50">Lundi à jeudi</div>
+      <div><strong><time datetime="09:00">09:00</time> <span aria-label="à">›</span> <time datetime="18:00">18:00</time></strong></div>
+    </div>
+    <div class="card card-body card-sm mb-4 flex-row flex-wrap justify-content-between justify-content-sm-start">
+      <div class="mr-3 w-sm-50">Vendredi</div>
+      <div><strong><time datetime="09:30">09:30</time> <span aria-label="à">›</span> <time datetime="17:00">17:00</time></strong></div>
+    </div>
+    <p>
+      <a href="mailto:services.etudiants@epfl.ch">services.etudiants@epfl.ch</a>
+    </p>
+    <hr>
+    <p>
+      +41 21 693 43 45
+    </p>
+    <hr>
+    <address>
+      EPFL AA-DAF<br>
+      BP 1229 (bâtiment BP) Station 16<br>
+      CH - 1015 Lausanne
+    </address>
+  </div>
+  <div class="col-md-6 d-flex flex-column">
+    {% include '@molecules/map/map.twig' %}
+  </div>
+</div>

package/dist/components/organisms/contact/contact-columns.twig

@@ -0,0 +1,9 @@
+<div class="card-deck">
+  {% for person in people %}
+    {% include '@organisms/contact/contact-compact-for-columns.twig' with {'increment': person.index, 'person': person} %}
+  {% endfor %}
+  <div class="">
+  </div>
+  <div class="">
+  </div>
+</div>

package/dist/components/organisms/contact/contact-compact-for-columns.twig

@@ -0,0 +1,24 @@
+{# to set random missing elements in this template, we allow to set an increment #}
+<div class="card">
+  <div class="card-body d-md-flex flex-md-column">
+    <div class="my-3">
+    {% if person.photo_url %}
+      <img class="img-fluid rounded-circle mb-2 person-card-avatar" src="{{ person.photo_url }}" alt="{{ person.prenom }} {{ person.nom }}">
+      {% else %}
+      <img class="img-fluid rounded-circle mb-2 person-card-avatar" src="./images/defaults/person-avatar-default-small.png" alt="{{ person.prenom }} {{ person.nom }}">
+    {% endif %}
+    </div>
+    <h3><a  href="#">{{ person.prenom }} {{ person.nom }}</a></h3>
+    <dl class="definition-list definition-list-grid my-0">
+      <dt>Fonction</dt>
+      <dd>{{ person.functions|join(', ') }}
+      </dd>
+      <dt>Bureau</dt>
+      <dd><a href="#">{{ person.rooms.0 }}</a></dd>
+    </dl>
+      <div class="w-100 mt-2 mt-md-auto">
+        <a class="btn btn-block btn-primary mb-2" href="mailto:{{ person.email }}">{{ person.email }}</a>
+        <a class="btn btn-block btn-secondary" href="tel:+4179{{ person.phones.0 }}">+41 79 {{ person.phones.0 }}</a>
+      </div>
+  </div>
+</div>

package/dist/components/organisms/contact/contact-compact.twig

@@ -0,0 +1,18 @@
+<div class="card">
+  <div class="card-body">
+    <div class="my-3 d-md-flex align-items-center">
+      <img class="img-fluid rounded-circle mr-4" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Shawna Reeves O'Neill Edwards">
+      <div class="w-100 mt-2 mt-md-0">
+        <a class="btn btn-block btn-primary mb-2" href="mailto:heidy.traill@epfl.ch">shawna.reeves.oneill.edwards@epfl.ch</a>
+        <a class="btn btn-block btn-secondary" href="tel:+41791234567">+41 79 123 45 67</a>
+      </div>
+    </div>
+    <h3><a href="#">Shawna Reeves O'Neill Edwards</a></h3>
+    <dl class="definition-list definition-list-grid mb-0">
+      <dt>Fonction</dt>
+      <dd>Journaliste, Secouriste</dd>
+      <dt>Bureau</dt>
+      <dd><a href="#">BM 4129</a></dd>
+    </dl>
+  </div>
+</div>

package/dist/components/organisms/contact/contact-list.twig

@@ -0,0 +1,14 @@
+<div class="contact-list">
+{% for person in people %}
+  <div class="contact-list-row" itemscope itemtype="http://schema.org/Person">
+    <div class="contact-list-avatar" itemprop="image">
+      {% include '@atoms/picture/picture-avatar.twig' %}
+    </div>
+    <a href="#" class="contact-list-item" itemprop="name">{{ person.prenom }} {{ person.nom }}</a>
+    <p class="contact-list-item m-0 text-muted" itemprop="jobTitle">{{ person.functions|join(', ') }}</p>
+    <a class="contact-list-item text-muted" href="#" itemprop="email">{{ person.email }}</a>
+    <a class="contact-list-item text-muted" href="#" itemprop="telephone">+41 21 69 <b>{{ person.phones.0 }}</b></a>
+    <a class="contact-list-item text-muted" href="#" itemprop="workLocation">{{ person.rooms.0 }}</a>
+  </div>
+{% endfor %}
+</div>

package/dist/components/organisms/contact/contact.twig

@@ -0,0 +1,20 @@
+<div class="card">
+  <div class="card-body">
+    <div class="my-3">
+      <img class="img-fluid rounded-circle" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Heidy Traill">
+    </div>
+    <h3><a href="#">Heidy Traill</a></h3>
+    {% include '@atoms/definition-list/definition-list-grid.twig' %}
+    <a class="btn btn-block btn-primary mb-2" href="mailto:heidy.traill@epfl.ch">heidy.traill@epfl.ch</a>
+
+    <div class="dropdown">
+      <button class="btn btn-block btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+        Téléphones
+      </button>
+      <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+        <a class="dropdown-item" href="#">079 349 72 18</a>
+        <a class="dropdown-item" href="#">079 349 72 18</a>
+      </div>
+    </div>
+  </div>
+</div>

package/dist/components/organisms/contact/contact.yml

@@ -0,0 +1,22 @@
+title: Contact
+name: contact
+variants:
+  - name: list
+    title: List
+  - name: compact
+    title: Contact bloc compact
+  - name: columns
+    title: Columns
+  - name: banner
+    title: Banner
+    notes: |
+      You can use contact Banner inside a grey wrapper as
+      ```
+      <div class="container-full bg-gray-100 py-5 my-5">
+        <div class="bg-white container p-4 p-md-5">
+          ...
+        </div>
+      </div>
+      ```
+notes: |
+  ### Contact bloc

package/dist/components/organisms/cookie-consent/cookie-consent.twig

@@ -0,0 +1 @@
+

package/dist/components/organisms/cookie-consent/cookie-consent.yml

@@ -0,0 +1,4 @@
+title: Cookie consent
+name: cookie-consent
+notes: |
+  You don't need to add or change anything to make it works on your site. You should see on the bottom of this page the popup that the user has to accept for the current domain.

package/dist/components/organisms/faq/faq.twig

@@ -0,0 +1,15 @@
+<div class="grid">
+    <ul class="link-list epfl-faq-header">
+        {% for f in faq %}
+        <li>
+            <a href="#faq-item-{{ loop.index }}">{{ f.0 }}</a>
+        </li>
+        {% endfor %}
+    </ul>
+    {% for f in faq %}
+    <div class="faq-item" id="faq-item-{{ loop.index }}">
+        <h4 class="faq-item-question">{{ f.0 }}</h4>
+        {{ f.1 }}
+    </div>
+    {% endfor %}
+</div>

package/dist/components/organisms/faq/faq.yml

@@ -0,0 +1,2 @@
+title: FAQ
+name: faq

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

@@ -0,0 +1,25 @@
+{% if language is not defined %}{% set language = 'fr' %}{% endif %}
+
+{% if language == 'fr' %}
+<p class="footer-title footer-title-no-underline">Pratique</p>
+<a href="https://www.epfl.ch/campus/services/" class="btn btn-secondary btn-sm">Services et ressources</a>
+<a href="tel:+41216933000" class="btn btn-secondary btn-sm">Urgences : +41 21 693 3000</a>
+<a href="https://www.epfl.ch/about/fr/contact/" class="btn btn-secondary btn-sm">Contact</a>
+<a href="https://map.epfl.ch/?lang=fr" class="btn btn-secondary btn-sm">Plan</a>
+{% endif %}
+
+{% if language == 'en' %}
+<p class="footer-title footer-title-no-underline">Practical</p>
+<a href="https://www.epfl.ch/campus/services/en/" class="btn btn-secondary btn-sm">Services & Resources</a>
+<a href="tel:+41216933000" class="btn btn-secondary btn-sm">Emergencies: +41 21 693 3000</a>
+<a href="https://www.epfl.ch/about/contact-en/" class="btn btn-secondary btn-sm">Contact</a>
+<a href="https://map.epfl.ch/?lang=en" class="btn btn-secondary btn-sm">Map</a>
+{% endif %}
+
+{% if language == 'de' %}
+    <p class="footer-title footer-title-no-underline">Praktische Hinweise</p>
+    <a href="https://www.epfl.ch/campus/services/en/" class="btn btn-secondary btn-sm">Services und Ressourcen</a>
+    <a href="tel:+41216933000" class="btn btn-secondary btn-sm">Notfälle : +41 21 693 3000</a>
+    <a href="https://www.epfl.ch/about/de/kontakt/" class="btn btn-secondary btn-sm">Kontakt</a>
+    <a href="https://map.epfl.ch/" class="btn btn-secondary btn-sm">Plan</a>
+{% endif %}

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

@@ -0,0 +1,34 @@
+{% if language is not defined %}{% set language = 'fr' %}{% endif %}
+
+{% for col in footer %}
+  <div class="footer-sitemap-col">
+    <button class="footer-title collapse-title collapsed" type="button" data-toggle="collapse" data-target="#collapse-footer-{{loop.index ?: 1}}" aria-expanded="false" aria-controls="collapse-footer-{{loop.index ?: 1}}">
+      {% if language == 'fr' %}
+      <strong>{{col.heading_fr}}</strong>
+      {% endif %}
+      {% if language == 'en' %}
+      <strong>{{col.heading_en}}</strong>
+      {% endif %}
+      {% if language == 'de' %}
+        <strong>{{col.heading_de}}</strong>
+      {% endif %}
+    </button>
+    <div class="collapse collapse-item" id="collapse-footer-{{loop.index ?: 1}}">
+      <ul class="footer-links">
+        {% for item in col.items %}
+          <li>
+            {% if language == 'fr' %}
+            <a href="{{item.url_fr}}"{{ item.target_blank_fr ? ' target="_blank"' }}{{ item.rel_noopener_fr ? ' rel="noopener"' }}>{{item.name_fr}}</a>
+            {% endif %}
+            {% if language == 'en' %}
+            <a href="{{item.url_en}}"{{ item.target_blank_en ? ' target="_blank"' }}{{ item.rel_noopener_en ? ' rel="noopener"' }}>{{item.name_en}}</a>
+            {% endif %}
+            {% if language == 'de' %}
+              <a href="{{item.url_de}}"{{ item.target_blank_de ? ' target="_blank"' }}{{ item.rel_noopener_de ? ' rel="noopener"' }}>{{item.name_de}}</a>
+            {% endif %}
+          </li>
+        {% endfor %}
+      </ul>
+    </div>
+  </div>
+{% endfor %}

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

@@ -0,0 +1 @@
+{% include "@organisms/footer/footer.twig" %}

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

@@ -0,0 +1,26 @@
+<footer class="footer" role="contentinfo">
+
+  <div class="footer-group footer-sitemap">
+      {% include "@organisms/footer/footer-col.twig" with {'language': 'de'} %}
+  </div>
+
+  <div class="footer-group">
+    {% include "@organisms/footer/footer-faculties.twig" with {'language': 'de'}  %}
+  </div>
+
+  <div class="footer-group footer-buttons">
+    {% include "@organisms/footer/footer-buttons.twig" with {'language': 'de'} %}
+  </div>
+
+  <div class="footer-group footer-socials">
+    {% include "@organisms/footer/footer-socials.twig" with {'language': 'de'} %}
+  </div>
+
+  {% include "@organisms/footer/footer-legal.twig" with {'language': 'de'} %}
+
+</footer>
+
+<button id="back-to-top" class="btn btn-primary btn-back-to-top">
+  <span class="sr-only">Back to top</span>
+  {% include '@atoms/icon/icon.twig' with {icon: 'icon-chevron-top'} %}
+</button>

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

@@ -0,0 +1,26 @@
+<footer class="footer" role="contentinfo">
+
+  <div class="footer-group footer-sitemap">
+      {% include "@organisms/footer/footer-col.twig" with {'language': 'en'} %}
+  </div>
+
+  <div class="footer-group">
+    {% include "@organisms/footer/footer-faculties.twig" with {'language': 'en'}  %}
+  </div>
+
+  <div class="footer-group footer-buttons">
+    {% include "@organisms/footer/footer-buttons.twig" with {'language': 'en'} %}
+  </div>
+
+  <div class="footer-group footer-socials">
+    {% include "@organisms/footer/footer-socials.twig" with {'language': 'en'} %}
+  </div>
+
+  {% include "@organisms/footer/footer-legal.twig" with {'language': 'en'} %}
+
+</footer>
+
+<button id="back-to-top" class="btn btn-primary btn-back-to-top">
+  <span class="sr-only">Back to top</span>
+  {% include '@atoms/icon/icon.twig' with {icon: 'icon-chevron-top'} %}
+</button>

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

@@ -0,0 +1,32 @@
+{% if language is not defined %}{% set language = 'fr' %}{% endif %}
+
+<div class="footer-faculties">
+  <button class="footer-title collapse-title collapsed" type="button" data-toggle="collapse" data-target="#collapse-fac" aria-expanded="false" aria-controls="collapse-fac">
+    {% if language == 'fr' %}
+    Facultés et Collèges
+    {% endif %}
+    {% if language == 'en' %}
+    Schools & Colleges
+    {% endif %}
+    {% if language == 'de' %}
+    Fakultäten und Colleges
+    {% endif %}
+  </button>
+  <div class="collapse collapse-item" id="collapse-fac">
+    <ul class="footer-links">
+    {% for school in schools %}
+      <li>
+        {% if language == 'fr' %}
+        <a href="{{school.url_fr}}"{{ school.target_blank_fr ? ' target="_blank"' }}{{ school.rel_noopener_fr ? ' rel="noopener"' }}>{{school.name_fr}} <strong>{{school.acronym}}</strong></a>
+        {% endif %}
+        {% if language == 'en' %}
+        <a href="{{school.url_en}}"{{ school.target_blank_en ? ' target="_blank"' }}{{ school.rel_noopener_en ? ' rel="noopener"' }}>{{school.name_en}} <strong>{{school.acronym}}</strong></a>
+        {% endif %}
+        {% if language == 'de' %}
+          <a href="{{school.url_de}}"{{ school.target_blank_de ? ' target="_blank"' }}{{ school.rel_noopener_de ? ' rel="noopener"' }}>{{school.name_de}} <strong>{{school.acronym}}</strong></a>
+        {% endif %}
+      </li>
+    {% endfor %}
+    </ul>
+  </div>
+</div>

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

@@ -0,0 +1,38 @@
+{% if language is not defined %}{% set language = 'fr' %}{% endif %}
+
+{% if language == 'fr' %}
+<div class="footer-legal">
+  <div class="footer-legal-links">
+    <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>
+  </div>
+  <div>
+    <p>&copy; 2023 EPFL, tous droits réservés</p>
+  </div>
+</div>
+{% endif %}
+{% if language == 'en' %}
+<div class="footer-legal">
+  <div class="footer-legal-links">
+    <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>
+  </div>
+  <div>
+    <p>&copy; 2023 EPFL, all rights reserved</p>
+  </div>
+</div>
+{% endif %}
+{% if language == 'de' %}
+  <div class="footer-legal">
+    <div class="footer-legal-links">
+      <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>
+    </div>
+    <div>
+      <p>&copy; 2023 EPFL, alle Rechte vorbehalten</p>
+    </div>
+  </div>
+{% endif %}

package/dist/components/organisms/footer/footer-light-dark.twig

@@ -0,0 +1,46 @@
+{% if language is not defined %}{% set language = 'fr' %}{% endif %}
+
+<footer class="footer-light" role="contentinfo">
+  <div class="row">
+    <div class="col-xl-11 mx-xl-auto">
+      <div class="row">
+        <div class="col-6 mx-auto mx-md-0 mb-4 col-md-3 col-lg-2">
+          <a href="#">
+            <img src="svg/epfl-logo-negative.svg" alt="Logo EPFL, École polytechnique fédérale de Lausanne" class="img-fluid">
+          </a>
+        </div>
+        <div class="col-md-9 col-lg-10">
+          <div class="ml-md-2 ml-lg-5">
+            <ul class="list-inline list-unstyled">
+              {% if language == 'de' %}
+                <li class="list-inline-item text-white">Kontakt</li>
+              {% else %}
+                <li class="list-inline-item text-white">Contact</li>
+              {% endif %}
+              <li class="list-inline-item text-gray-300 pl-3"><small>EPFL  CH-1015 Lausanne</small></li>
+              <li class="list-inline-item text-gray-300 pl-3"><small>+41 21 693 11 11</small></li>
+            </ul>
+            <div class="footer-light-socials">
+            {% if language == 'fr' %}
+              <p class="footer-title footer-title-no-underline">Suivre les pulsations de l’EPFL sur les réseaux sociaux</p>
+            {% endif %}
+            {% if language == 'en' %}
+              <p class="footer-title footer-title-no-underline">Follow the EPFL on social media</p>
+            {% endif %}
+            {% if language == 'de' %}
+              <p class="footer-title footer-title-no-underline">Der EPFL in sozialen Netzwerken folgen</p>
+            {% endif %}
+              {% include '@atoms/social-icon/social-icon-link-group.twig' with { negative: true }  %}
+            </div>
+            {% include "@organisms/footer/footer-legal.twig" with { 'language': language } %}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>
+
+<button id="back-to-top" class="btn btn-primary btn-back-to-top">
+  <span class="sr-only">Back to top</span>
+  {% include '@atoms/icon/icon.twig' with {icon: 'icon-chevron-top'} %}
+</button>

package/dist/components/organisms/footer/footer-light-de.twig

@@ -0,0 +1 @@
+{% include '@organisms/footer/footer-light.twig' with { 'language': 'de' }  %}

package/dist/components/organisms/footer/footer-light-en.twig

@@ -0,0 +1 @@
+{% include '@organisms/footer/footer-light.twig' with { 'language': 'en' }  %}

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

@@ -0,0 +1,42 @@
+{% if language is not defined %}{% set language = 'fr' %}{% endif %}
+
+<footer class="footer-light" role="contentinfo">
+  <div class="row">
+    <div class="col-6 mx-auto mx-md-0 mb-4 col-md-3 col-lg-2">
+      <a href="#">
+        <img src="svg/epfl-logo.svg" alt="Logo EPFL, École polytechnique fédérale de Lausanne" class="img-fluid">
+      </a>
+    </div>
+    <div class="col-md-9 col-lg-10 mb-4">
+      <div class="ml-md-2 ml-lg-5">
+        <ul class="list-inline list-unstyled">
+          {% if language == 'de' %}
+            <li class="list-inline-item">Kontakt</li>
+          {% else %}
+            <li class="list-inline-item">Contact</li>
+          {% endif %}
+          <li class="list-inline-item text-muted pl-3"><small>EPFL  CH-1015 Lausanne</small></li>
+          <li class="list-inline-item text-muted pl-3"><small>+41 21 693 11 11</small></li>
+        </ul>
+        <div class="footer-light-socials">
+        {% if language == 'fr' %}
+          <p class="footer-title footer-title-no-underline">Suivez l'EPFL sur les réseaux sociaux</p>
+        {% endif %}
+        {% if language == 'en' %}
+          <p class="footer-title footer-title-no-underline">Follow EPFL on social media</p>
+        {% endif %}
+        {% if language == 'de' %}
+          <p class="footer-title footer-title-no-underline">Der EPFL in sozialen Netzwerken folgen</p>
+        {% endif %}
+          {% include '@atoms/social-icon/social-icon-link-group.twig' with { negative: true }  %}
+        </div>
+        {% include "@organisms/footer/footer-legal.twig" with { 'language': language } %}
+      </div>
+    </div>
+  </div>
+</footer>
+
+<button id="back-to-top" class="btn btn-primary btn-back-to-top">
+  <span class="sr-only">Back to top</span>
+  {% include '@atoms/icon/icon.twig' with {icon: 'icon-chevron-top'} %}
+</button>