epfl-elements 1.0.0 → 4.0.0

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

@@ -0,0 +1,22 @@
+<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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,19 @@
+<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

@@ -0,0 +1,10 @@
+<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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,18 @@
+<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

@@ -0,0 +1,11 @@
+<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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,69 @@
+<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="card-info-date event-date" itemprop="startDate" content="2018-01-10T12:00">10.01.2018</span>
+          {% include '@atoms/icon/icon.twig' with { icon:  'clock', icon_classes:'feather' } %}
+          <span class="event-time">13:00</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

@@ -0,0 +1,27 @@
+{% 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

@@ -0,0 +1,16 @@
+<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

@@ -0,0 +1,19 @@
+{% 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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,4 @@
+<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

@@ -0,0 +1,4 @@
+<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

@@ -0,0 +1,4 @@
+<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

@@ -0,0 +1,4 @@
+<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

@@ -0,0 +1,3 @@
+<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

@@ -0,0 +1,3 @@
+<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

@@ -0,0 +1,38 @@
+<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

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

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

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

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

@@ -0,0 +1,8 @@
+<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

@@ -0,0 +1,36 @@
+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

@@ -0,0 +1,24 @@
+{% 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

@@ -0,0 +1,9 @@
+{% 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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,124 @@
+{% 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>