epfl-elements 1.0.1 → 4.0.0

package/dist/components/molecules/tables/tables-sortable.twig

@@ -0,0 +1,22 @@
+<table class="table table-sortable" data-tablesaw-sortable>
+  <thead>
+    <tr>
+      <th data-tablesaw-sortable-col>Header one</th>
+      <th data-tablesaw-sortable-col>Header two</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Curabitur blandit</td>
+      <td>Morbi leo porta</td>
+    </tr>
+    <tr>
+      <td>Tempus porttitor</td>
+      <td>Duis mollis</td>
+    </tr>
+    <tr>
+      <td>Commodo luctus nisi</td>
+      <td>Blandit tempus porttitor</td>
+    </tr>
+  </tbody>
+</table>

package/dist/components/molecules/tables/tables.twig

@@ -0,0 +1,28 @@
+<table class="table">
+  <thead>
+    <tr>
+      <th>Header one</th>
+      <th>Header two</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Curabitur blandit</td>
+      <td>Morbi leo porta</td>
+    </tr>
+    <tr>
+      <td>Tempus porttitor</td>
+      <td>Duis mollis</td>
+    </tr>
+    <tr>
+      <td>Commodo luctus nisi</td>
+      <td>Blandit tempus porttitor</td>
+    </tr>
+  </tbody>
+  <tfoot>
+    <tr>
+      <td>Footer one</td>
+      <td>Footer two</td>
+    </tr>
+  </tfoot>
+</table>

package/dist/components/molecules/tables/tables.yml

@@ -0,0 +1,15 @@
+title: Table
+name: tables
+variants:
+  - name: boxed
+    title: Boxed Table
+  - name: sortable
+    title: Sortable table
+    notes: |
+      To handle table sorting and responsive, we use the [Tablesaw JS plugins](https://github.com/filamentgroup/tablesaw). On the current page, if the sortable table doesn't have *arrows in the header*, please *refresh your browser* to allow Tablesaw to initialise correctly.
+      To enable these features, you will need to:
+        - insert the correct data-attributes (as in the following code) in your html tables
+        - Include the styleguide `vendors.css` and `vendors.js` files on your page
+        - **after the DOM is ready**, make sure to launch `$ Tablesaw.init()` function
+  - name: boxed-sortable
+    title: Boxed and sortable table

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 class="link-pretty" 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 class="link-pretty" 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 class="link-pretty" 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 class="link-pretty" 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 class="link-pretty" 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/overview/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/overview/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/overview/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; 2021 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; 2021 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; 2021 EPFL, alle Rechte vorbehalten</p>
+    </div>
+  </div>
+{% endif %}