epfl-elements 4.4.0 → 4.5.0

package/dist/components/molecules/access-nav/access-nav.twig

@@ -1,22 +0,0 @@
-<nav class="access-nav" aria-label="Raccourcis de navigation">
-  <ul>
-    <li>
-      <a class="btn btn-primary" href="/" title="[ALT + 1]" accesskey="1">Page d'accueil du site</a>
-    </li>
-    <li>
-      <a class="btn btn-primary" href="#main" title="[ALT + 2]" accesskey="2">Accéder au contenu</a>
-    </li>
-    <li>
-      <a class="btn btn-primary" href="#main-navigation" title="[ALT + 3]" accesskey="3">Accéder à la navigation principale</a>
-    </li>
-    <li>
-      <a class="btn btn-primary" href="#nav-aside" title="[ALT + 4]" accesskey="4">Accéder à la navigation latérale</a>
-    </li>
-    <li>
-      <a class="btn btn-primary" href="#search" title="[ALT + 5]" accesskey="5">Accéder à la recherche</a>
-    </li>
-    <li>
-      <a class="btn btn-primary" href="mailto:email@example.com" title="[ALT + 6]" accesskey="6">Nous contacter</a>
-    </li>
-  </ul>
-</nav>

package/dist/components/molecules/access-nav/access-nav.yml

@@ -1,8 +0,0 @@
-name: access-nav
-title: Access navigation
-notes: |
-  Also called **Skip links**, the access navigation has to be the first element in the markup of every page. Its purpose is to help people using a Screen Reader or just using the keyboard to navigate more easily in the page. The links can be used with keyboard shortcuts (accesskeys) too.
-
-  With the access navigation, the user can jump to the section they want in the page (navigation / main content).
-wrapper: ''
-background: ''

package/dist/components/molecules/avatar-teaser/avatar-teaser-multiple.twig

@@ -1,19 +0,0 @@
-<div class="row">
-  <div class="col-md-6">
-    {% include '@molecules/avatar-teaser/avatar-teaser.twig' with {'count': 2} %}
-  </div>
-  <div class="col-md-6">
-    <div class="avatar-teaser">
-      <a class="avatar-teaser-img" href="#">
-        <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Julien Richard-Foy">
-      </a>
-      <a class="avatar-teaser-img-placeholder" href="#">
-        2+
-      </a>
-      <div class="avatar-teaser-body">
-        <p>Julien Richard-Foy</p>
-      </div>
-    </div>
-  </div>
-</div>
-

package/dist/components/molecules/avatar-teaser/avatar-teaser.twig

@@ -1,10 +0,0 @@
-<div class="avatar-teaser">
-  {% for i in 1..count|default(1) -%}
-  <a class="avatar-teaser-img" href="#">
-    <img src="https://randomuser.me/api/portraits/men/{{ i }}.jpg" alt="Julien Richard-Foy">
-  </a>
-  {% endfor %}
-  <div class="avatar-teaser-body">
-    <p>Julien Richard-Foy</p>
-  </div>
-</div>

package/dist/components/molecules/avatar-teaser/avatar-teaser.yml

@@ -1,13 +0,0 @@
-name: avatar-teaser
-title: Avatar teaser
-notes: |
-  An avatar teaser can link to a person profile.
-wrapper: ''
-background: ''
-variants:
-  - name: multiple
-    title: Multiple
-    notes: |
-      When you have several people to display, use a "+X" thumbnail in a `.avatar-teaser-img-placeholder` item.
-    background: ''
-    wrapper: ''

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

@@ -1,18 +0,0 @@
-<nav aria-label="breadcrumb" class="breadcrumb-wrapper" id="breadcrumb-wrapper">
-  <ol class="breadcrumb">
-    <li class="breadcrumb-item">
-      <a href="#">
-        {% include '@atoms/icon/icon.twig' with { icon: 'icon-home' } %}
-      </a>
-    </li>
-    <li class="breadcrumb-item breadcrumb-tags-wrapper">
-      <a href="#" class="tag tag-primary">School</a>
-      <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>
-  </ol>
-</nav>

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

@@ -1,11 +0,0 @@
-<nav aria-label="breadcrumb" class="breadcrumb-wrapper">
-  <ol class="breadcrumb">
-    <li class="breadcrumb-item">
-      <a 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 active" aria-current="page">ENAC</li>
-  </ol>
-</nav>

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

@@ -1,7 +0,0 @@
-title: Breadcrumb
-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: tagged
-    title: Tagged

package/dist/components/molecules/card/card-event.twig

@@ -1,76 +0,0 @@
-<div href="#" class="list-group-item list-group-teaser" itemscope itemtype="http://schema.org/Event">
-  <div class="list-group-teaser-container">
-    <div class="list-group-teaser-thumbnail">
-      {% include '@atoms/picture/picture.twig' with {'variant':'news-thumb'} %}
-    </div>
-    <div class="list-group-teaser-content">
-      <p class="h5 card-title" itemprop="name">
-        <a href="#">Startup Acceleration Workshops</a>
-      </p>
-      <div class="card-info mt-0">
-        {% block date %}
-        <p class="event-info-date">
-          {% include '@atoms/icon/icon.twig' with { icon:  'calendar', icon_classes:'feather' } %}
-          <span class="sr-only">Dates: du</span>
-          <span class="card-info-date event-date" itemprop="startDate" content="2018-01-10T12:00">10.01.2018</span>
-          <span class="sep" aria-hidden="true">›</span>
-          <span class="sr-only">au</span>
-          <span class="card-info-date event-date" itemprop="endDate" content="2018-01-12T12:00">12.01.2018</span>
-          {% include '@atoms/icon/icon.twig' with { icon:  'clock', icon_classes:'feather' } %}
-          <span class="sr-only">Heures: de</span>
-          <span class="event-time">13:00</span>
-          <span class="sep" aria-hidden="true">›</span>
-          <span class="sr-only">à</span>
-          <span class="event-time">17:30</span>
-          {% endblock %}
-        </p>
-        <p class="event-info mt-1">
-          <span class="event-speaker" itemprop="performer" itemscope itemtype="http://schema.org/performer">
-          {% block speaker %}
-            <b>Intervenant·e:</b> Prof. Dr. Aditya Mueller
-          {% endblock %}
-          </span>            
-          <span class="event-location" itemprop="location" itemscope itemtype="http://schema.org/Place">
-          {% block location %}
-            
-            {% if eventLocation == 'online' %}
-            <b>Lieu:</b> {% include '@atoms/icon/icon.twig' with { icon: 'monitor', icon_classes:'feather' } %}
-            <span itemprop="name"><a href="#">En ligne</a></span>
-            {% elseif eventLocation == 'online_room' %}
-            <b>Lieu:</b> {% include '@atoms/icon/icon.twig' with { icon: 'map-pin', icon_classes:'feather' } %}
-            <span itemprop="name"><a href="#">ArtLab EPFL</a></span> &amp;
-            {% include '@atoms/icon/icon.twig' with { icon: 'monitor', icon_classes:'feather' } %}
-            <span itemprop="name"><a href="#">En ligne</a></span>
-            {% else %}
-            <b>Lieu:</b> {% include '@atoms/icon/icon.twig' with { icon: 'map-pin', icon_classes:'feather' } %}
-            <span itemprop="name"><a href="#">ArtLab EPFL</a></span>
-            {% endif %}
-            
-          {% endblock %}
-          </span>
-          <span class="event-category">
-          {% block category %}
-            <b>Catégorie:</b> Événements culturel
-          {% endblock %}
-          </span>
-          <span class="event-audience" itemprop="audience" itemscope itemtype="https://schema.org/audience">
-          {% block audience %}
-            <b>Public cible:</b> Tout public
-          {% endblock %}
-          </span>
-        </p>
-        
-        <p class="pt-3 event-actions">
-          {% if live_now|default(false) %}
-            <a href="#" class="btn btn-primary btn-sm">{% include '@atoms/icon/icon.twig' with { icon: 'monitor', icon_classes:'feather' } %} Voir en direct</a>
-          {% endif %}
-          {% if live_future|default(false) %}
-            <a href="#" class="btn btn-secondary btn-sm">{% include '@atoms/icon/icon.twig' with { icon: 'monitor', icon_classes:'feather' } %} Diffusé en direct</a>
-        {% endif %}
-          <a href="#" class="btn btn-secondary btn-sm">{% include '@atoms/icon/icon.twig' with { icon: 'download', icon_classes:'feather' } %} Importer</a>
-        </p>
-        
-      </div>
-    </div>
-  </div>
-</div>

package/dist/components/molecules/card/card-inside-links.twig

@@ -1,27 +0,0 @@
-{% block card %}
-  <div class="card">
-    {% block image -%}
-      <a href="#" class="card-img-top">
-        <picture>
-          <img src="./images/styleguide/event_teaser.png" class="img-fluid" title="professor Xile Hu" alt="a portrait of professor Xile Hu"/>
-        </picture>
-      </a>
-    {% endblock -%}
-    {% block card_body %}
-    <div class="card-body">
-      {% block content %}
-        <div class="card-title">
-          <a href="#" class="h3">{% block title %}Startup Acceleration Workshops{% endblock %}</a>
-        </div>
-      {% endblock %}
-    </div>
-    {% endblock -%}
-    {%- block card_footer %}
-    <div class="card-footer mt-auto">
-      {% block footer %}
-        <a href="#" class="btn btn-secondary btn-sm">Button</a>
-      {% endblock %}
-    </div>
-    {% endblock %}
-  </div>
-{% endblock %}

package/dist/components/molecules/card/card-link.twig

@@ -1,16 +0,0 @@
-<a href="#" class="card link-trapeze-horizontal">
-  {% block image -%}
-  <picture class="card-img-top">
-    <img src="./images/styleguide/event_teaser.png" class="img-fluid" title="professor Xile Hu" alt="a portrait of professor Xile Hu" />
-  </picture>
-  {% endblock -%}
-  {% block card_body %}
-  <div class="card-body">
-    {% block content %}
-      <h3 class="card-title">{% block title %}Startup Acceleration Workshops{% endblock %}</h3>
-    {% endblock %}
-  </div>
-  {% endblock -%}
-  {%- block card_footer %}
-  {% endblock %}
-</a>

package/dist/components/molecules/card/card.twig

@@ -1,19 +0,0 @@
-{% block card %}
-<div class="card">
-  {% block image -%}
-  <picture class="card-img-top">
-    <img src="./images/styleguide/event_teaser.png" class="img-fluid" title="professor Xile Hu" alt="a portrait of professor Xile Hu" />
-  </picture>
-  {% endblock %}
-
-  {% block card_body %}
-  <div class="card-body">
-    {% block content %}
-    <p>a classic card</p>
-    {% endblock %}
-  </div>
-  {% endblock -%}
-  {%- block card_footer %}
-  {% endblock %}
-</div>
-{% endblock %}

package/dist/components/molecules/card/card.yml

@@ -1,24 +0,0 @@
-title: Card
-name: card
-wrapper: col-md-6
-variants:
-  - name: link
-    title: Full Link
-  - name: inside-links
-    title: Inside Links
-notes: |
-  The card component is the component to use for all the card-looking elements. Classes can extend it to adapt its look and feel based on the needs.
-
-  A card can be a full link or not, see examples below.
-
-  Use `.card-header` inside a `.card-body` to display meta info (See [press release](/#/content-types/news)) like **Category** + **date** spread out left and right.
-
-  Add `.card-distinction` to the `.card` wrapper to display a red ribbon in the card body.
-
-  Use `.card-info` to display meta information separated by `›`. **It must only contain `<span>` elements.**
-  With the `.card-info-bordered` modifier, add a border to top and bottom of this area. Add the `.card-info-border-sm` modifier to reduce the inner padding.
-
-  Use `.card-overlay` and `.card-img-overlay` to have a full image card.
-
-  You can reduce the padding in the card body by adding the `.card-sm` class to the card.
-

package/dist/components/molecules/card-deck/card-deck-duo-gray.twig

@@ -1,4 +0,0 @@
-<div class="card-deck card-deck-line">
-  {% include '@molecules/card/card.twig' %}
-  {% include '@molecules/card/card.twig' %}
-</div>

package/dist/components/molecules/card-deck/card-deck-duo.twig

@@ -1,4 +0,0 @@
-<div class="card-deck card-deck-line">
-  {% include '@molecules/card/card.twig' %}
-  {% include '@molecules/card/card.twig' %}
-</div>

package/dist/components/molecules/card-deck/card-deck-link-duo-gray.twig

@@ -1,4 +0,0 @@
-<div class="card-deck card-deck-line">
-  {% include '@molecules/card/card-link.twig' %}
-  {% include '@molecules/card/card-link.twig' %}
-</div>

package/dist/components/molecules/card-deck/card-deck-link-duo.twig

@@ -1,4 +0,0 @@
-<div class="card-deck card-deck-line">
-  {% include '@molecules/card/card-link.twig' %}
-  {% include '@molecules/card/card-link.twig' %}
-</div>

package/dist/components/molecules/card-deck/card-deck-link-single-gray.twig

@@ -1,3 +0,0 @@
-<div class="card-deck card-deck-line">
-  {% include '@molecules/card/card-link.twig' %}
-</div>

package/dist/components/molecules/card-deck/card-deck-link-single.twig

@@ -1,3 +0,0 @@
-<div class="card-deck card-deck-line">
-  {% include '@molecules/card/card-link.twig' %}
-</div>

package/dist/components/molecules/card-deck/card-deck-mini-cards.twig

@@ -1,38 +0,0 @@
-<div class="card-deck mini-cards">
-  <h2 class="deck-title text-center">Section title</h2>
-  {% for i in 1..6 %}
-    <a href="#" class="card link-trapeze-horizontal">
-      {% block image -%}
-      <picture class="card-img-top">
-        <img src="./images/styleguide/minicard_teaser.jpg" class="img-fluid" title="" alt="" />
-      </picture>
-      {% endblock -%}
-      {% block card_body %}
-      <div class="card-body">
-        {% block content %}
-          <h3 class="card-title">{% block title %}Card title{% endblock %}</h3>
-        {% endblock %}
-      </div>
-      {% endblock -%}
-  </a>
-  {% endfor %}
-</div>
-
-<div class="card-deck mini-cards">
-  {% for i in 1..4 %}
-    <a href="#" class="card link-trapeze-horizontal">
-      {% block image -%}
-      <picture class="card-img-top">
-        <img src="./images/styleguide/minicard_teaser.jpg" class="img-fluid" title="" alt="" />
-      </picture>
-      {% endblock -%}
-      {% block card_body %}
-      <div class="card-body">
-        {% block content %}
-          <h3 class="card-title">{% block title %}Card title{% endblock %}</h3>
-        {% endblock %}
-      </div>
-      {% endblock -%}
-  </a>
-  {% endfor %}
-</div>

package/dist/components/molecules/card-deck/card-deck-single-gray.twig

@@ -1,3 +0,0 @@
-<div class="card-deck card-deck-line">
-  {% include '@molecules/card/card.twig' %}
-</div>

package/dist/components/molecules/card-deck/card-deck-single.twig

@@ -1,3 +0,0 @@
-<div class="card-deck card-deck-line">
-  {% include '@molecules/card/card.twig' %}
-</div>

package/dist/components/molecules/card-deck/card-deck.twig

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

package/dist/components/molecules/card-deck/card-deck.yml

@@ -1,36 +0,0 @@
-title: Card Deck
-name: card-deck
-variants:
-  - name: mini-cards
-    title: Mini cards
-    notes: When less than 6 mini cards are displayed, the cards are centered in the row.
-  - name: duo
-    title: Duo
-  - name: duo-gray
-    title: Duo with gray background
-    notes: When wrapped into a container with the class `.bg-gray-100`, the card deck lines will appear darker and cards will get a correct background color / border color to avoid lines touching them.
-    wrapper: bg-gray-100 py-4 my-4
-  - name: single
-    title: Single
-  - name: single-gray
-    title: Single with gray background
-    wrapper: bg-gray-100 py-4 my-4
-    notes: When wrapped into a container with the class `.bg-gray-100`, the card deck lines will appear darker and cards will get a correct background color / border color to avoid lines touching them.
-  - name: link-duo
-    title: Link Duo
-  - name: link-duo-gray
-    title: Link Duo with gray background
-    wrapper: bg-gray-100 py-4 my-4
-    notes: When wrapped into a container with the class `.bg-gray-100`, the card deck lines will appear darker and cards will get a correct background color / border color to avoid lines touching them.
-  - name: link-single
-    title: Link Single
-  - name: link-single-gray
-    title: Link Single with gray background
-    wrapper: bg-gray-100 py-4 my-4
-    notes: When wrapped into a container with the class `.bg-gray-100`, the card deck lines will appear darker and cards will get a correct background color / border color to avoid lines touching them.
-notes: |
-  This component allows you to display multiple cards side by side, in a set of equal width and height. You just have to wrap cards inside of a `.card-deck` component.
-
-  Add the `.card-deck-line` class to the container, when you want to display 1 ou 2 cards only, to add a visual touch on desktop helping readability
-
-  Add the `.mini-cards` class to the container to display a row of 6 mini cards.

package/dist/components/molecules/carousel/carousel-base.twig

@@ -1,24 +0,0 @@
-{% if not id %}
-  {% set id %}carouselExample{% endset %}
-{% endif %}
-
-<div id="{{id}}" class="carousel slide{% if extraClass %} {{extraClass}}{% endif %}" data-ride="carousel" data-interval="6000">
-  <div class="carousel-inner">
-    {% block slide %}{% endblock %}
-  </div>
-
-  <ol class="carousel-indicators">
-    {% for i in 1..4 %}
-    <li data-target="#{{id}}" data-slide-to="{{loop.index0}}" {% if loop.index0 == 0 %} class="active"{% endif %}></li>
-    {% endfor %}
-  </ol>
-
-  <button class="carousel-control carousel-control-prev" type="button" data-slide="prev" data-target="#{{id}}">
-    {% include "@atoms/icon/icon.twig" with { icon: 'icon-chevron-left' } %}
-    <span class="sr-only">Previous</span>
-  </button>
-  <button class="carousel-control carousel-control-next" type="button" data-slide="next" data-target="#{{id}}">
-    {% include "@atoms/icon/icon.twig" with { icon: 'icon-chevron-right' } %}
-    <span class="sr-only">Next</span>
-  </button>
-</div>

package/dist/components/molecules/carousel/carousel.twig

@@ -1,9 +0,0 @@
-{% extends "@molecules/carousel/carousel-base.twig" %}
-
-{% block slide %}
-  {% for i in 1..4 %}
-  <div class="carousel-item {% if loop.index0 == 0 %}active{% endif %}">
-    {% include '@atoms/picture/picture-cover.twig' %}
-  </div>
-  {% endfor %}
-{% endblock %}

package/dist/components/molecules/carousel/carousel.yml

@@ -1,8 +0,0 @@
-name: carousel
-title: Carousel
-notes: |
-  Basic carousel using Bootstrap functionality: https://getbootstrap.com/docs/4.0/components/carousel/.
-
-  Use the 'data-interval' attribute to change the automatic slide delay.
-
-  **Important**: always use a unique 'id' attribute on each carousel displayed on a same page.

package/dist/components/molecules/collapse-group/collapse-group-people-contacts.twig

@@ -1,124 +0,0 @@
-{% if title is not defined %}{% set title = 'Contact information' %}{% endif %}
-{% if title %}
-<h4>{{title}}</h4>
-{% endif %}
-
-<button
-  class="collapse-title collapse-title-desktop"
-  type="button"
-  data-toggle="collapse"
-  data-target="#collapse-1"
-  aria-expanded="false"
-  aria-controls="collapse-1"
->
-  <strong>Fonction précise</strong>, <span class="font-weight-normal">Nom du département</span>
-</button>
-
-<div class="collapse collapse-item show collapse-item-desktop" id="collapse-1">
-
-  <div class="row pt-2 pb-2">
-    <div class="col-md-5">
-      <p itemprop="location" itemscope itemtype="http://schema.org/Place">
-        <strong itemprop="name">EPFL PRES</strong><br/>
-        <span itemprop="address">
-          CE 3 316 (Centre Est)<br/>
-          Station 1<br/>
-          CH-1015 Lausanne
-        </span>
-      </p>
-    </div>
-    <div class="col-md-7">
-      <p>
-        <a href="tel:+41 21 666 77 88" class="btn btn-sm btn-secondary mb-2 align-baseline">+41 21 666 77 88</a>
-        <small class="align-baseline ml-2">Bureau principal: <a href="#">INN 019</a></small>
-        <br>
-        <a href="tel:+41 21 666 55 66" class="btn btn-sm btn-secondary mb-2 align-baseline">+41 21 666 55 66</a>
-        <small class="align-baseline ml-2">Bureau: <a href="#">INN 018</a></small>
-        <br>
-        <small>Unité: <a href="#">EPFL</a> &rsaquo; <a href="#">SI</a> &rsaquo; <a href="#">SI-EXOP</a> &rsaquo; <a href="#">EXAPP</a></small>
-      </p>
-    </div>
-    <div class="col-sm-12">
-      <p><span class="sr-only">Web site: </span><a href="https://www.epfl.ch/about/vice-presidencies/vice-presidencies/information-systems/">https://www.epfl.ch/about/vice-presidencies/vice-presidencies/information-systems/</a></p>
-    </div>
-  </div>
-
-</div>
-
-<button
-  class="collapse-title collapse-title-desktop collapsed"
-  type="button"
-  data-toggle="collapse"
-  data-target="#collapse-2"
-  aria-expanded="false"
-  aria-controls="collapse-2"
->
-  <strong>Fonction précise</strong>, <span class="font-weight-normal">Nom du département</span>
-</button>
-
-<div class="collapse collapse-item collapse-item-desktop" id="collapse-2">
-
-  <div class="row pt-2 pb-2">
-    <div class="col-md-5">
-      <p itemprop="location" itemscope itemtype="http://schema.org/Place">
-        <strong itemprop="name">EPFL PRES</strong><br/>
-        <span itemprop="address">
-          CE 3 316 (Centre Est)<br/>
-          Station 1<br/>
-          CH-1015 Lausanne
-        </span>
-      </p>
-    </div>
-    <div class="col-md-7">
-      <p>
-        <a href="tel:+41 21 666 77 88" class="btn btn-sm btn-secondary mb-2 align-baseline">+41 21 666 77 88</a>
-        <small class="align-baseline ml-2">Bureau principal: <a href="#">INN 019</a></small>
-        <br>
-        <small>Unité: <a href="#">EPFL</a> &rsaquo; <a href="#">SI</a> &rsaquo; <a href="#">SI-EXOP</a> &rsaquo; <a href="#">EXAPP</a></small>
-      </p>
-    </div>
-    <div class="col-sm-12">
-      <p><span class="sr-only">Web site: </span><a href="https://rh.epfl.ch/">https://rh.epfl.ch/</a></p>
-    </div>
-  </div>
-
-</div>
-
-<button
-  class="collapse-title collapse-title-desktop collapsed"
-  type="button"
-  data-toggle="collapse"
-  data-target="#collapse-3"
-  aria-expanded="false"
-  aria-controls="collapse-3"
->
-  <strong>Fonction précise</strong>, <span class="font-weight-normal">Nom du département</span>
-</button>
-
-<div class="collapse collapse-item collapse-item-desktop" id="collapse-3">
-
-  <div class="row pt-2 pb-2">
-    <div class="col-md-5">
-      <p itemprop="location" itemscope itemtype="http://schema.org/Place">
-        <strong itemprop="name">EPFL PRES</strong><br/>
-        <span itemprop="address">
-          CE 3 316 (Centre Est)<br/>
-          Station 1<br/>
-          CH-1015 Lausanne
-        </span>
-      </p>
-    </div>
-    <div class="col-md-7">
-      <p>
-        <a href="tel:+41 21 666 77 88" class="btn btn-sm btn-secondary mb-2 align-baseline">+41 21 666 77 88</a>
-        <small class="align-baseline ml-2">Bureau principal: <a href="#">INN 019</a></small>
-        <br>
-        <a href="tel:+41 21 666 55 66" class="btn btn-sm btn-secondary mb-2 align-baseline">+41 21 666 55 66</a>
-        <small class="align-baseline ml-2">Bureau: <a href="#">INN 018</a></small>
-        <br>
-        <small>Unité: <a href="#">EPFL</a> &rsaquo; <a href="#">SI</a> &rsaquo; <a href="#">SI-EXOP</a> &rsaquo; <a href="#">EXAPP</a></small>
-      </p>
-    </div>
-  </div>
-
-</div>