epfl-elements 1.0.1 → 4.0.0

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>

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

@@ -0,0 +1,13 @@
+{% if language is not defined %}{% set language = 'fr' %}{% endif %}
+{% 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 %}
+<div class="footer-social">
+  {% include '@atoms/social-icon/social-icon-link-group.twig' with { negative: true } %}
+</div>

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

@@ -0,0 +1,26 @@
+<footer class="footer" role="contentinfo">
+
+  <div class="footer-group footer-sitemap">
+      {% include "@organisms/footer/footer-col.twig" with {'language': 'fr'} %}
+  </div>
+
+  <div class="footer-group">
+    {% include "@organisms/footer/footer-faculties.twig" with {'language': 'fr'} %}
+  </div>
+
+  <div class="footer-group footer-buttons">
+    {% include "@organisms/footer/footer-buttons.twig" with {'language': 'fr'}  %}
+  </div>
+
+  <div class="footer-group footer-socials">
+    {% include "@organisms/footer/footer-socials.twig" with {'language': 'fr'}  %}
+  </div>
+
+  {% include "@organisms/footer/footer-legal.twig" with {'language': 'fr'}  %}
+
+</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.yml

@@ -0,0 +1,26 @@
+title: Footer
+name: footer
+wrapper: container
+variants:
+  - name: de
+    notes: deutsch
+  - name: en
+    notes: english
+  - name: light
+    title: Footer light
+    notes: french
+  - name: light-de
+    notes: deutsch
+  - name: light-en
+    notes: english
+  - name: dark
+    title: Footer Dark
+    notes: Add .bg-dark to the container
+    wrapper: bg-dark container
+  - name: light-dark
+    title: Footer dark light
+    notes: Add .bg-dark to the light container
+    wrapper: bg-dark container
+notes: |
+  ### Standard
+  french

package/dist/components/organisms/form/form.twig

@@ -0,0 +1,7 @@
+{% include "@molecules/form-group/form-group.twig" %}
+{% include "@molecules/form-group/form-group-checkboxes.twig" %}
+{% include "@molecules/form-group/form-group-radio.twig" %}
+{% include "@molecules/form-group/form-group-error.twig" %}
+{% include "@molecules/form-group/form-group-select.twig" %}
+{% include "@molecules/form-group/form-group-textarea.twig" %}
+{% include "@molecules/form-group/form-group-upload.twig" %}

package/dist/components/organisms/form/form.yml

@@ -0,0 +1,2 @@
+title: Form
+name: form

package/dist/components/organisms/fullwidth-teaser/fullwidth-teaser-horizontal.twig

@@ -0,0 +1,40 @@
+{% set thinner_teaser = thinner_teaser|default(false) %}
+
+<div class="fullwidth-teaser fullwidth-teaser-horizontal{% if thinner_teaser %} thinner-teaser{% endif %}">
+
+  {% include '@atoms/picture/picture-fullwidth-teaser.twig' %}
+
+  <div class="fullwidth-teaser-text">
+
+    <div class="fullwidth-teaser-header">
+      <div class="fullwidth-teaser-title">
+        <h3>
+          {% if not title %}{% set title %}Évaluer la durabilité dans le domaine spatial{% endset %}{% endif %}
+          {{title}}
+        </h3>
+        <ul class="list-inline mt-2">
+          <li class="list-inline-item">Actualités</li>
+          <li class="list-inline-item">Biologie</li>
+        </ul>
+      </div>
+      <a href="#" aria-label="Link to read more of that page" class="btn btn-primary triangle-outer-top-right d-none d-xl-block">
+        Lire l'article
+        <span class="sr-only">sur Tech Transfer.</span>
+        {% include '@atoms/icon/icon.twig' with {icon: 'icon-chevron-right'} %}
+      </a>
+    </div>
+
+    <div class="fullwidth-teaser-content">
+      <p>
+        {% if not content %}
+        {% set content %}Le nouveau Space Sustainability Rating accueilli par eSpace, le centre spatial de l’EPFL, encourage le secteur de l’espace à concevoir et à mettre en œuvre des missions spatiales durables et responsables — montrant ainsi la voie pour assurer à long terme une approche durable de l’environnement spatial.{% endset %}
+        {% endif %}
+        {{content}}
+      </p>
+    </div>
+
+    <div class="fullwidth-teaser-footer">
+      <a href="#" aria-label="Link to read more of that page" class="btn btn-primary btn-block d-xl-none">En savoir plus</a>
+    </div>
+  </div>
+</div>

package/dist/components/organisms/fullwidth-teaser/fullwidth-teaser-left.twig

@@ -0,0 +1,38 @@
+<div class="fullwidth-teaser fullwidth-teaser-left">
+
+  {% include '@atoms/picture/picture-fullwidth-teaser.twig' %}
+
+  <div class="fullwidth-teaser-text">
+
+    <div class="fullwidth-teaser-header">
+      <div class="fullwidth-teaser-title">
+        <h3>
+          {% if not title %}{% set title %}Évaluer la durabilité dans le domaine spatial{% endset %}{% endif %}
+          {{title}}
+        </h3>
+        <ul class="list-inline mt-2">
+          <li class="list-inline-item">Actualités</li>
+          <li class="list-inline-item">Biologie</li>
+        </ul>
+      </div>
+      <a href="#" aria-label="Link to read more of that page" class="btn btn-primary triangle-outer-top-right d-none d-xl-block">
+        Lire l'article
+        <span class="sr-only">sur Tech Transfer.</span>
+        {% include '@atoms/icon/icon.twig' with {icon: 'icon-chevron-right'} %}
+      </a>
+    </div>
+
+    <div class="fullwidth-teaser-content">
+      <p>
+        {% if not content %}
+        {% set content %}Le nouveau Space Sustainability Rating accueilli par eSpace, le centre spatial de l’EPFL, encourage le secteur de l’espace à concevoir et à mettre en œuvre des missions spatiales durables et responsables — montrant ainsi la voie pour assurer à long terme une approche durable de l’environnement spatial.{% endset %}
+        {% endif %}
+        {{content}}
+      </p>
+    </div>
+
+    <div class="fullwidth-teaser-footer">
+      <a href="#" aria-label="Link to read more of that page" class="btn btn-primary btn-block d-xl-none">En savoir plus</a>
+    </div>
+  </div>
+</div>

package/dist/components/organisms/fullwidth-teaser/fullwidth-teaser.twig

@@ -0,0 +1,33 @@
+<div class="fullwidth-teaser">
+
+  {% include '@atoms/picture/picture-fullwidth-teaser.twig' %}
+
+  <div class="fullwidth-teaser-text">
+
+    <div class="fullwidth-teaser-header">
+      <div class="fullwidth-teaser-title">
+        <h3>
+          {% if not title %}{% set title %}Évaluer la durabilité dans le domaine spatial{% endset %}{% endif %}
+          {{title}}
+        </h3>
+      </div>
+      <a href="#" aria-label="En savoir plus sur {{title}}" class="btn btn-primary triangle-outer-bottom-right d-none d-xl-block">
+        En savoir plus
+        {% include '@atoms/icon/icon.twig' with {icon: 'icon-chevron-right'} %}
+      </a>
+    </div>
+
+    <div class="fullwidth-teaser-content">
+      <p>
+        {% if not content %}
+        {% set content %}Le nouveau Space Sustainability Rating accueilli par eSpace, le centre spatial de l’EPFL, encourage le secteur de l’espace à concevoir et à mettre en œuvre des missions spatiales durables et responsables — montrant ainsi la voie pour assurer à long terme une approche durable de l’environnement spatial.{% endset %}
+        {% endif %}
+        {{content}}
+      </p>
+    </div>
+
+    <div class="fullwidth-teaser-footer">
+      <a href="#" aria-label="En savoir plus sur Tech Transfer" class="btn btn-primary btn-block d-xl-none">En savoir plus</a>
+    </div>
+  </div>
+</div>

package/dist/components/organisms/fullwidth-teaser/fullwidth-teaser.yml

@@ -0,0 +1,7 @@
+title: Fullwidth teaser
+name: fullwidth-teaser
+variants:
+  - name: horizontal
+    title: Horizontal
+  - name: left
+    title: Left aligned

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

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

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

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

package/dist/components/organisms/header/header-fr.twig

@@ -0,0 +1 @@
+{% include "@organisms/header/header.twig" with {'language': 'fr'} %}

package/dist/components/organisms/header/header-light-drawer.twig

@@ -0,0 +1,37 @@
+{% if language is not defined %}{% set language = 'fr' %}{% endif %}
+{% set site_title = site_title|default('sub site name') %}
+<header role="banner" class="header header-light">
+  {% include '@atoms/drawer/drawer.twig' %}
+  <div class="header-light-content">
+    <a class="logo" href="https://www.epfl.ch">
+      <img src="svg/epfl-logo.svg" alt="Logo EPFL, École polytechnique fédérale de Lausanne" class="img-fluid">
+    </a>
+    <p class="site-title">
+      <a href="#">{{site_title}}</a>
+    </p>
+    <ul aria-hidden="true" class="nav-header d-none d-xl-flex">
+      {% if dropdown %}
+      <li class="dropdown">
+        <button class="btn btn-link dropdown-toggle nav-item" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+          Liste des options
+        </button>
+        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+          <a class="dropdown-item" href="#">Option 1</a>
+          <a class="dropdown-item active" href="#">Option 2</a>
+          <a class="dropdown-item" href="#">Option 3</a>
+        </div>
+      </li>
+      {% else %}
+        {% for i in 1..5 %}
+      <li id="menu-item-{{ loop.index }}" {% if loop.index == 2 %} class="current-menu-item"{% endif %}>
+        <a class="nav-item" href="#">Page {{ i }}</a>
+      </li>
+        {% endfor %}
+      {% endif %}
+    </ul>
+    {% include '@molecules/search/search-mobile.twig' %}
+    {% include '@molecules/search/search.twig' %}
+    {% include '@atoms/nav-lang/nav-lang-short.twig' %}
+    {% include '@atoms/nav-toggle-mobile/nav-toggle-mobile.twig' %}
+  </div>
+</header>

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

@@ -0,0 +1,36 @@
+{% if language is not defined %}{% set language = 'fr' %}{% endif %}
+{% set site_title = site_title|default('sub site name') %}
+<header role="banner" class="header header-light">
+  <div class="header-light-content">
+    <a class="logo" href="https://www.epfl.ch">
+      <img src="svg/epfl-logo.svg" alt="Logo EPFL, École polytechnique fédérale de Lausanne" class="img-fluid">
+    </a>
+    <p class="site-title">
+      <a href="#">{{site_title}}</a>
+    </p>
+    <ul aria-hidden="true" class="nav-header d-none d-xl-flex">
+      {% if dropdown %}
+      <li class="dropdown">
+        <button class="btn btn-link dropdown-toggle nav-item" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+          Liste des options
+        </button>
+        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+          <a class="dropdown-item" href="#">Option 1</a>
+          <a class="dropdown-item active" href="#">Option 2</a>
+          <a class="dropdown-item" href="#">Option 3</a>
+        </div>
+      </li>
+      {% else %}
+        {% for i in 1..5 %}
+      <li id="menu-item-{{ loop.index }}" {% if loop.index == 2 %} class="current-menu-item"{% endif %}>
+        <a class="nav-item" href="#">Page {{ i }}</a>
+      </li>
+        {% endfor %}
+      {% endif %}
+    </ul>
+    {% include '@molecules/search/search-mobile.twig' %}
+    {% include '@molecules/search/search.twig' %}
+    {% include '@atoms/nav-lang/nav-lang-short.twig' %}
+    {% include '@atoms/nav-toggle-mobile/nav-toggle-mobile.twig' %}
+  </div>
+</header>

package/dist/components/organisms/header/header.twig

@@ -0,0 +1,32 @@
+{% if language is not defined %}{% set language = 'fr' %}{% endif %}
+{% if long_nav_lang is not defined %}{% set long_nav_lang = false %}{% endif %}
+
+<header role="banner" class="header">
+  <a class="logo" href="#">
+    <img src="svg/epfl-logo.svg" alt="Logo EPFL, École polytechnique fédérale de Lausanne" class="img-fluid">
+  </a>
+  <ul aria-hidden="true" class="nav-header d-none d-xl-flex">
+    {% for head in header %}
+      <li id="menu-item-{{ loop.index }}" {% if ( loop.index == 2 ) and ( showCurrentMenuItem|default(true) ) %} class="current-menu-item"{% endif %}>
+        {% if language == 'fr' %}
+        <a class="nav-item" href="{{ head.url_fr }}">{{ head.name_fr }}</a>
+        {% endif %}
+        {% if language == 'en' %}
+        <a class="nav-item" href="{{ head.url_en }}">{{ head.name_en }}</a>
+        {% endif %}
+        {% if language == 'de' %}
+          <a class="nav-item" href="{{ head.url_de }}">{{ head.name_de }}</a>
+        {% endif %}
+      </li>
+    {% endfor %}
+  </ul>
+  {% include '@molecules/search/search.twig' %}
+  {% include '@molecules/search/search-mobile.twig' %}
+  {%  if long_nav_lang %}
+    {% include '@atoms/nav-lang/nav-lang.twig' %}
+  {% endif %}
+  {%  if long_nav_lang == false %}
+    {% include '@atoms/nav-lang/nav-lang-short.twig' %}
+  {% endif %}
+  {% include '@atoms/nav-toggle-mobile/nav-toggle-mobile.twig' %}
+</header>

package/dist/components/organisms/header/header.yml

@@ -0,0 +1,23 @@
+title: Header
+name: header
+variants:
+  - name: de
+    notes: deutsch
+  - name: en
+    notes: english
+  - name: light
+    title: Header light
+    notes: |
+      * EPFL logo should link to the main EPFL website (https://www.epfl.ch);
+      * Sub site name should link to the sub site homepage (e.g. https://actu.epfl.ch, https://people.epfl.ch, etc );
+      * Use `<p class="site-title">` for the sub site title rather than a `<h1>` tag – `<h1>` title should be placed in the page content instead.
+  - name: light-drawer
+    title: Header light with drawer
+    notes: |
+      * EPFL logo should link to the main EPFL website (https://www.epfl.ch);
+      * Sub site name should link to the sub site homepage (e.g. https://actu.epfl.ch, https://people.epfl.ch, etc );
+      * Use `<p class="site-title">` for the sub site title rather than a `<h1>` tag – `<h1>` title should be placed in the page content instead.
+notes: |
+  **Current item highlight**
+
+  To style current menu item, add `current-menu-item` (Wordpress default class) on the `<li>` element containing the current item menu

package/dist/components/organisms/headlines/headlines.twig

@@ -0,0 +1,44 @@
+{% macro card_link(card) %}
+  <a href="#" class="card link-trapeze-horizontal">
+    <div class="card-body">
+      <h3 class="card-title">{{ card.title }}</h3>
+      <div class="card-info">
+        {% if card.date %}
+          <span class="card-info-date">
+            <time datetime="DATETIME HERE">{{ card.date }}</time>
+          </span>
+        {% endif %}
+        {% for item in card.info %}
+          <span>{{ item }}</span>
+        {% endfor %}
+      </div>
+      <p>{{ card.content }}</p>
+    </div>
+  </a>
+{% endmacro %}
+{% import _self as macros %}
+
+{% set bottomlink = bottomlink|default(true) %}
+
+{# The intro fullwidth teaser #}
+{% include '@organisms/fullwidth-teaser/fullwidth-teaser-horizontal.twig' %}
+
+{# First teasers #}
+<div class="container pb-5 offset-xl-top pt-5 pt-xl-0">
+  <div class="row">
+    <div class="col-lg-10 offset-lg-1">
+      <div class="row mb-4">
+        {% for card in homepage.section_one.cards %}
+          <div class="col-md-6 d-flex">
+            {{ macros.card_link(card) }}
+          </div>
+        {% endfor %}
+      </div>
+      {% if bottomlink %}
+        <p class="text-center">
+          <a class="link-pretty" href="#">{{ homepage.section_one.readmore }}</a>
+        </p>
+      {% endif %}
+    </div>
+  </div>
+</div>

package/dist/components/organisms/headlines/headlines.yml

@@ -0,0 +1,2 @@
+title: Headlines
+name: headlines

package/dist/components/organisms/hero/hero-legend.twig

@@ -0,0 +1,15 @@
+{% set title = title|default('Recherche') %}
+{% set content = content|default('<p>Une organisation unique nous permet de figurer systématiquement dans le haut du classement mondial des universités pour les programmes de recherche.</p><p>Découvrez tout ce qui fait de l’EPFL le creuset idéal des meilleurs projets de recherche en Europe et à l’international.</p>') %}
+<div class="hero">
+  <div class="hero-content-container">
+    <h1 class="hero-title">{{title}}</h1>
+    {% if content %}
+      <div class="hero-content">
+        {{content}}
+      </div>
+    {% endif %}
+  </div>
+  <div class="hero-img">
+    {% include '@molecules/cover/cover.twig' %}
+  </div>
+</div>

package/dist/components/organisms/hero/hero.twig

@@ -0,0 +1,15 @@
+{% set title = title|default('Recherche') %}
+{% set content = content|default('<p>Une organisation unique nous permet de figurer systématiquement dans le haut du classement mondial des universités pour les programmes de recherche.</p><p>Découvrez tout ce qui fait de l’EPFL le creuset idéal des meilleurs projets de recherche en Europe et à l’international.</p>') %}
+<div class="hero">
+  <div class="hero-content-container">
+    <h1 class="hero-title">{{title}}</h1>
+    {% if content %}
+      <div class="hero-content">
+        {{content}}
+      </div>
+    {% endif %}
+  </div>
+  <div class="hero-img">
+    {% include '@atoms/picture/picture-cover.twig' %}
+  </div>
+</div>

package/dist/components/organisms/hero/hero.yml

@@ -0,0 +1,8 @@
+name: hero
+title: Hero
+notes: |
+  The hero component is used as intro to basic pages.
+
+variants:
+  - name: legend
+    title: Hero with image legend

package/dist/components/organisms/introduction/introduction-gray.twig

@@ -0,0 +1,10 @@
+<div class="introduction bg-gray-100">
+  <div class="container">
+    <div class="row">
+      <div class="col-md-8 offset-md-2">
+          <h2>Étudier à l’EPFL</h2>
+          <p>Treize filières de formation dans les sciences de l’ingénieur, des programmes doctoraux de choix, des laboratoires de pointe dirigés par des professeurs de réputation internationale, un campus moderne en plein développement, des liens privilégiés avec l’industrie: l’EPFL offre des conditions d’études hors du commun aux jeunes qui envisagent d’amorcer une formation supérieure dans le domaine des sciences et de la technique.</p>
+      </div>
+    </div>
+  </div>
+</div>

package/dist/components/organisms/introduction/introduction.twig

@@ -0,0 +1,13 @@
+<div class="introduction">
+  <div class="container">
+    <div class="row">
+      <div class="col-md-8 offset-md-2">
+          {% if not title %}{% set title %}Étudier à l’EPFL{% endset %}{% endif %}
+          <h2>{{title}}</h2>
+
+          {% if not content %}{% set content %}Treize filières de formation dans les sciences de l’ingénieur, des programmes doctoraux de choix, des laboratoires de pointe dirigés par des professeurs de réputation internationale, un campus moderne en plein développement, des liens privilégiés avec l’industrie: l’EPFL offre des conditions d’études hors du commun aux jeunes qui envisagent d’amorcer une formation supérieure dans le domaine des sciences et de la technique.{% endset %}{% endif %}
+          <p>{{content}}</p>
+      </div>
+    </div>
+  </div>
+</div>

package/dist/components/organisms/introduction/introduction.yml

@@ -0,0 +1,5 @@
+title: Introduction
+name: introduction
+variants:
+  - name: gray
+    title: Gray introduction

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

@@ -0,0 +1,10 @@
+<div class="container">
+  <div class="key-number-group row">
+    {% include '@molecules/key-number/key-number-large.twig' %}
+    {% include '@molecules/key-number/key-number.twig' %}
+    {% include '@molecules/key-number/key-number.twig' %}
+    {% include '@molecules/key-number/key-number.twig' %}
+    {% include '@molecules/key-number/key-number-large.twig' %}
+    {% include '@molecules/key-number/key-number.twig' %}
+  </div>
+</div>

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

@@ -0,0 +1,3 @@
+title: Key number group
+name: key-number-group
+wrapper: bg-gray-100

package/dist/components/organisms/modal/modal.twig

@@ -0,0 +1,25 @@
+<!-- Button trigger modal -->
+<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
+  Launch demo modal
+</button>
+
+<!-- Modal -->
+<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
+  <div class="modal-dialog modal-dialog-centered" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        ...
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-primary">Save changes</button>
+      </div>
+    </div>
+  </div>
+</div>

package/dist/components/organisms/modal/modal.yml

@@ -0,0 +1,6 @@
+title: Modal
+name: modal
+notes: |
+  The **Bootstrap Modal component** is a dialog box/popup window that is displayed on top of the current page.
+
+  For usage, [see Bootstrap documentation](https://getbootstrap.com/docs/4.0/components/modal/).