epfl-elements 1.0.1 → 4.0.0

package/dist/components/content-types/coursebook/coursebook.twig

@@ -0,0 +1,142 @@
+
+  <table class="semaineDeRef">
+    <tbody>
+      <tr>
+        <th class="time">&nbsp;</th>
+        <th class="day">Lu</th>
+        <th class="day">Ma</th>
+        <th class="day">Me</th>
+        <th class="day">Je</th>
+        <th class="day">Ve</th>
+      </tr>
+      <tr>
+        <td class="time">8-9</td>
+        <td rowspan="4" class="taken projet">&nbsp;</td>
+        <td rowspan="2" class="taken cours">
+          <a href="#">CM5</a>
+        </td>
+        <td>&nbsp;</td>
+        <td>&nbsp;</td>
+        <td>&nbsp;</td>
+      </tr>
+      <tr>
+        <td class="time">9-10</td>
+        <td>&nbsp;</td>
+        <td>&nbsp;</td>
+        <td>&nbsp;</td>
+      </tr>
+      <tr>
+        <td class="time">10-11</td>
+        <td rowspan="2" class="taken exercice">&nbsp;</td>
+        <td>&nbsp;</td>
+        <td>&nbsp;</td>
+        <td>&nbsp;</td>
+      </tr>
+      <tr>
+        <td class="time">11-12</td>
+        <td>&nbsp;</td>
+        <td>&nbsp;</td>
+        <td>&nbsp;</td>
+      </tr>
+      <tr>
+        <td class="time">12-13</td>
+        <td>&nbsp;</td>
+        <td>&nbsp;</td>
+        <td>&nbsp;</td>
+        <td>&nbsp;</td>
+        <td>&nbsp;</td>
+      </tr>
+      <tr>
+        <td class="time">13-14</td>
+        <td rowspan="6" class="taken projet">&nbsp;</td>
+        <td>&nbsp;</td>
+        <td>&nbsp;</td>
+        <td>&nbsp;</td>
+        <td>&nbsp;</td>
+      </tr>
+      <tr>
+        <td class="time">14-15</td>
+        <td>&nbsp;</td>
+        <td>&nbsp;</td>
+        <td>&nbsp;</td>
+        <td>&nbsp;</td>
+      </tr>
+      <tr>
+        <td class="time">15-16</td>
+        <td>&nbsp;</td>
+        <td>&nbsp;</td>
+        <td>&nbsp;</td>
+        <td>&nbsp;</td>
+      </tr>
+      <tr>
+        <td class="time">16-17</td>
+        <td>&nbsp;</td>
+        <td>&nbsp;</td>
+        <td>&nbsp;</td>
+        <td>&nbsp;</td>
+      </tr>
+      <tr>
+        <td class="time">17-18</td>
+        <td>&nbsp;</td>
+        <td>&nbsp;</td>
+        <td>&nbsp;</td>
+        <td>&nbsp;</td>
+      </tr>
+      <tr>
+        <td class="time">18-19</td>
+        <td>&nbsp;</td>
+        <td>&nbsp;</td>
+        <td>&nbsp;</td>
+        <td>&nbsp;</td>
+      </tr>
+      <tr>
+        <td class="time">19-20</td>
+        <td>&nbsp;</td>
+        <td>&nbsp;</td>
+        <td>&nbsp;</td>
+        <td>&nbsp;</td>
+        <td>&nbsp;</td>
+      </tr>
+      <tr>
+        <td class="time">20-21</td>
+        <td>&nbsp;</td>
+        <td>&nbsp;</td>
+        <td>&nbsp;</td>
+        <td>&nbsp;</td>
+        <td>&nbsp;</td>
+      </tr>
+      <tr>
+        <td class="time">21-22</td>
+        <td>&nbsp;</td>
+        <td>&nbsp;</td>
+        <td>&nbsp;</td>
+        <td>&nbsp;</td>
+        <td>&nbsp;</td>
+      </tr>
+    </tbody>
+  </table>
+
+  <div class="coursebook-week-caption mt-4" role="presentation" aria-hidden="true">
+    <p>Légendes:</p>
+    <p class="caption caption-cours">
+      <span class="caption-icon"></span>
+      Cours
+    </p>
+    <p class="caption caption-exercice">
+      <span class="caption-icon"></span>
+      Exercice, TP
+    </p>
+    <p class="caption caption-projet">
+      <span class="caption-icon"></span>
+      Projet, autre
+    </p>
+  </div>
+
+  <!-- accessible content for screen readers -->
+
+  <div class="coursebook-week-caption sr-only">
+    <p>Lundi, 8h – 12h: Projet, autre</p>
+    <p>Lundi, 13h – 19h: Projet, autre</p>
+    <p>Mardi, 8h – 10h: Cours, bâtiment <a href="#">CM5</a></p>
+    <p>Mardi, 10h – 12h: Exercice, TP</p>
+  </div>

package/dist/components/content-types/coursebook/coursebook.yml

@@ -0,0 +1,13 @@
+title: Coursebook
+name: coursebook
+wrapper: coursebook-reference-week col-md-5
+variants:
+  - name: program
+    title: Programme plan d'étude
+    wrapper: coursebook-program col-md-5
+  - name: legend
+    title: Légende
+    wrapper: coursebook-legend col-md-5
+notes: |
+
+  ### Reference week

package/dist/components/content-types/cursus/cursus.twig

@@ -0,0 +1,6 @@
+<a href="#" class="card link-trapeze-horizontal">
+  <div class="card-body">
+    <h3 class="card-title">Doctorats</h3>
+    <p class="card-text">Une école doctorale de 20 programmes pour 20 disciplines, qui catalysent une communauté scientifique toujours plus dynamique et innovante.</p>
+  </div>
+</a>

package/dist/components/content-types/cursus/cursus.yml

@@ -0,0 +1,3 @@
+title: Cursus
+name: cursus
+wrapper: col-md-6

package/dist/components/content-types/event/event-highlight-listing.twig

@@ -0,0 +1,10 @@
+
+<h2>Les prochains événements</h2>
+<div class="row mt-2">
+  <div class="col-md-6">
+    {% include '@content-types/event/event-highlight.twig' %}
+  </div>
+  <div class="col-md-6">
+    {% include '@content-types/event/event-listing.twig' with { bottomlink: true, hasGrayBackground: true } %}
+  </div>
+</div>

package/dist/components/content-types/event/event-highlight.twig

@@ -0,0 +1,13 @@
+{% extends '@content-types/event/event.twig' %}
+
+{% block img_src %}./images/styleguide/event_teaser_large.jpg{% endblock %}
+
+{% block title %}EPFL Drone Days 2018 dates have been announced!{% endblock %}
+
+{% block summary %}
+<p>From 1 to 3 September 2018, more than 5,000 people will be treated to drone races, a robotics showcase, a conference and demonstrations on the EPFL's campus. Attendees will enjoy 3 days of thrilling races over the middle of campus, including a night race lit by LEDs and the finals of the Swiss Rotor Sports Association (SRSA).</p>
+{% endblock %}
+
+{% block info %}
+Lieu : <b>Laboratoire ALICE</b><br>Organisé par <b>Campus Farmers (Unipoly)</b><br>
+{% endblock %}

package/dist/components/content-types/event/event-invitation.twig

@@ -0,0 +1,20 @@
+<div class="card card-gray">
+  <div class="card-body">
+    {% block img %}
+      <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 %}
+    <h3 class="card-title">
+      <a href="#">EuroTechPostdoc Programme: application platform is now open!</a>
+    </h3>
+    <div class="card-info">
+      <span>Researchers can apply until Feb. 28, 2018</span>
+    </div>
+  </div>
+  <div class="card-footer mt-auto">
+    <a href="#" class="btn btn-primary btn-sm">Learn more & apply</a>
+  </div>
+</div>

package/dist/components/content-types/event/event-just-finished.twig

@@ -0,0 +1,8 @@
+{% extends "@content-types/event/event.twig" %}
+
+{% block classes %}card card-gray card-grayscale link-trapeze-horizontal bg-gray-100{% endblock %}
+
+{% block title %}
+<span class="badge badge-dark badge-sm">Just finished</span>
+Startup Acceleration Workshops
+{% endblock %}

package/dist/components/content-types/event/event-listing-featured.twig

@@ -0,0 +1,5 @@
+<div class="list-group list-events list-events-featured">
+  {% include '@molecules/card/card-event.twig' %}
+  {% include '@molecules/card/card-event.twig' with { eventLocation: 'online_room', live_now: true, online_event: true } %}
+  {% include '@molecules/card/card-event.twig' with { eventLocation: 'online', online_event: true } %}
+</div>

package/dist/components/content-types/event/event-listing.twig

@@ -0,0 +1,16 @@
+<div class="list-group list-events {% if hasGrayBackground|default(false) %}list-group-gray{% endif %}">
+
+  {% include '@molecules/card/card-event.twig' with { eventLocation: 'online_room', live_now: true } %}
+
+  {% include '@molecules/card/card-event.twig' with { eventLocation: 'online' } %}
+
+  {% for i in 1..3 %}
+    {% include '@molecules/card/card-event.twig' %}
+  {% endfor %}
+
+  {% if bottomlink|default(true) %}
+    <a href="#" class="list-group-teaser-more">
+      Voir tous les événements
+    </a>
+  {% endif %}
+</div>

package/dist/components/content-types/event/event-wrapper.twig

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

package/dist/components/content-types/event/event.twig

@@ -0,0 +1,34 @@
+<a href="#" class="{% block classes %}card card-gray link-trapeze-horizontal{% endblock %}" itemscope itemtype="http://schema.org/Event">
+  <div class="card-body">
+    {% block img -%}
+    <picture class="card-img-top">
+      <img src="{% block img_src %}./images/styleguide/event_teaser.png{% endblock %}" class="img-fluid" title="Image title" alt="Image alt description" />
+    </picture>
+    {% endblock %}
+
+    <h3 class="card-title" itemprop="name">{% block title %}Startup Acceleration Workshops{% endblock %}</h3>
+    {% block summary %}{% endblock -%}
+    <div class="card-info">
+      {% block date %}
+      <span class="card-info-date" itemprop="startDate" content="2018-01-10T12:00">10.01.2018</span>
+      <span>13:00</span>
+      <span>17:30</span>
+      {% endblock %}
+      <p>
+      <span itemprop="performer" itemscope itemtype="http://schema.org/performer">
+      {% block speaker %}
+        Avec <b>Prof. Dr. Aditya Mueller</b>
+      {% endblock %}
+      </span>
+      <span itemprop="location" itemscope itemtype="http://schema.org/Place">
+      <br>
+        {% block info %}
+        Lieu : <b><span itemprop="name">ArtLab EPFL</span></b>
+        <br> Catégorie : <b>Événements culturel</b>
+        {% endblock %}
+      </span>
+      </p>
+    </div>
+  </div>
+  {% block footer %}{% endblock %}
+</a>

package/dist/components/content-types/event/event.yml

@@ -0,0 +1,26 @@
+title: Event
+name: event
+wrapper: col-md-5 bg-gray-100
+variants:
+  - name: listing
+    title: Listing
+    wrapper: bg-gray-100
+  - name: listing-featured
+    title: Featured events
+    wrapper: bg-gray-100
+  - name: highlight
+    title: Highlight
+    wrapper: col-md-8 bg-gray-100
+  - name: highlight-listing
+    title: Highlight + listing
+    wrapper: bg-gray-100
+  - name: invitation
+    title: Invitation
+  - name: just-finished
+    title: Just finished
+  - name: wrapper
+    title: Slider wrapper
+    wrapper: bg-gray-100 overflow-hidden
+notes: |
+
+  ### Basic teaser

package/dist/components/content-types/institute/institute.twig

@@ -0,0 +1,12 @@
+<div class="card">
+  <div class="card-body">
+    <h3 class="h5 card-title"><a href="#">Institut d'ingénierie de l'environnement – IIE</a></h3>
+    <div class="card-info">
+      <span>Faculté de l’Environnement Naturel, Architectural et Construit </span>
+    </div>
+    <p>L’objectif principal de l’Institut d’architecture et de la ville (IA) est le développement de la recherche. Une tâche fondamentale qui sous-entend que l’architecture, la qualité de la construction, l’insertion dans le milieu environnant, le respect des paysages naturels et urbains ainsi que celui du patrimoine culturel sont prioritairement d’intérêt général.</p>
+  </div>
+  <div class="card-footer mt-auto">
+    <a href="#" class="btn btn-secondary btn-sm">Découvrir</a>
+  </div>
+</div>

package/dist/components/content-types/institute/institute.yml

@@ -0,0 +1,3 @@
+title: Institute
+name: institute
+wrapper: col-md-6

package/dist/components/content-types/laboratory/laboratory.twig

@@ -0,0 +1,16 @@
+<div class="card">
+  <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>
+  <div class="card-body">
+    <p class="small text-muted">BioS</p>
+    <h3 class="h5 card-title"><a href="#">BioNanoPhotonic Systems Laboratory</a></h3>
+    {% include '@molecules/avatar-teaser/avatar-teaser.twig' %}
+    <p>Optical nanobiosensors, lab-on-a-chip devices, ultra-sensitive spectroscopy, nanoplasmonics, metamaterials</p>
+  </div>
+  <div class="card-footer mt-auto">
+    <a href="#" class="btn btn-secondary btn-sm">Voir plus</a>
+  </div>
+</div>

package/dist/components/content-types/laboratory/laboratory.yml

@@ -0,0 +1,3 @@
+title: Laboratory
+name: laboratory
+wrapper: col-md-6

package/dist/components/content-types/news/news-basic-teaser.twig

@@ -0,0 +1,16 @@
+<a href="#" class="card link-trapeze-horizontal" itemscope itemtype="https://schema.org/NewsArticle">
+  {% block img %}
+    <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 %}
+  <div class="card-body">
+    <h3 class="card-title" itemprop="name">News title</h3>
+    <div class="card-info">
+      <span class="card-info-date" itemprop="datePublished" content="2017-09-11T12:00">11.09.17</span>
+      <span itemprop="about">Recherche</span>
+      <span itemprop="about">Prix et récompenses</span>
+    </div>
+    <p itemprop="description">The EPFL favors closer ties to industry leading research in order to best meet the scientific, technological and societal</p>
+  </div>
+</a>

package/dist/components/content-types/news/news-distinction.twig

@@ -0,0 +1,11 @@
+<a href="#" class="card card-distinction link-trapeze-horizontal">
+  {% block img %}
+    <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 %}
+  <div class="card-body" itemscope itemtype="http://schema.org/Article">
+    <h3 class="card-title" itemprop="name">EPFL doctorate Award 2017 – Priscilla Briquez</h3>
+    <p itemprop="description">Text teaser — EPFL biologists and geneticists have uncovered how the circadian clock orchestrates the 24-hour cycle of gene expression by regulating the structure of chromatin, the tightly wound DNA-protein complex of the cell</p>
+  </div>
+</a>

package/dist/components/content-types/news/news-highlighted-carousel.twig

@@ -0,0 +1,11 @@
+{% set id %}carouselNews{% endset %}
+{% set extraClass %}carousel-highlighted-news{% endset %}
+{% extends "@molecules/carousel/carousel-base.twig" %}
+
+{% block slide %}
+  {% for i in 1..4 %}
+  <div class="carousel-item {% if loop.index0 == 0 %}active{% endif %}">
+    {% include '@organisms/fullwidth-teaser/fullwidth-teaser-horizontal.twig' %}
+  </div>
+  {% endfor %}
+{% endblock %}

package/dist/components/content-types/news/news-highlighted.twig

@@ -0,0 +1 @@
+{% include '@organisms/fullwidth-teaser/fullwidth-teaser-horizontal.twig' %}

package/dist/components/content-types/news/news-latest-two.twig

@@ -0,0 +1,11 @@
+<h2 class="mt-5 mb-4">The last news</h2>
+<div class="row">
+  {% for i in 1..2 %}
+    <div class="col-md-6">
+      {% include '@content-types/news/news-basic-teaser.twig' %}
+    </div>
+  {% endfor %}
+</div>
+<p class="text-center">
+  <a class="link-pretty" href="#">See all news</a>
+</p>

package/dist/components/content-types/news/news-press-release.twig

@@ -0,0 +1,19 @@
+<a href="#" class="card link-trapeze-horizontal">
+  {% block img %}
+    <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 %}
+  <div class="card-body" itemscope itemtype="http://schema.org/Article">
+    <div class="card-header">
+      <strong>Press release</strong>
+      <time datetime="2018-01-31" itemprop="datePublished"><span class="sr-only">Published:</span>31.01.18</time>
+    </div>
+    <h3 class="card-title" itemprop="name">Two months in Pyeongchang to study Korean snowfalls</h3>
+    <div class="card-info">
+      <span>ENAC</span>
+      <span itemprop="about">Environment</span>
+    </div>
+    <p itemprop="description">Text teaser — EPFL biologists and geneticists have uncovered how the circadian clock orchestrates the 24-hour cycle of gene expression by regulating the structure of chromatin, the tightly wound DNA-protein complex of the cell</p>
+  </div>
+</a>

package/dist/components/content-types/news/news.twig

@@ -0,0 +1,25 @@
+<div class="list-group">
+  {% for i in 1..4 %}
+    <a href="#" class="list-group-item list-group-teaser link-trapeze-vertical">
+      <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" itemscope itemtype="http://schema.org/Article">
+          <p class="h5" itemprop="name">Physics: new e-books for the AIAA Education Series</p>
+          <p>
+            <time datetime="2018-03-26" itemprop="datePublished"><span class="sr-only">Published:</span>26.03.2018</time>
+            <span class="text-muted" itemprop="description">— Lorem ipsum dolor sit amet, consectetur adipiscing elit. Si enim ad populum me vocas, eum. Quid enim me prohiberet
+              Epicureum esse, si probarem, quae ille diceret?</span>
+          </p>
+        </div>
+      </div>
+    </a>
+  {% endfor %}
+
+  {% if bottomlink %}
+    <a href="#" class="list-group-teaser-more">
+      Afficher plus d'actualités
+    </a>
+  {% endif %}
+</div>

package/dist/components/content-types/news/news.yml

@@ -0,0 +1,21 @@
+title: News
+name: news
+variants:
+  - name: highlighted
+    title: Highlighted
+  - name: highlighted-carousel
+    title: Highlighted Carousel
+  - name: latest-two
+    title: Latest two
+  - name: basic-teaser
+    title: Basic teaser
+    wrapper: col-md-6
+  - name: press-release
+    title: Press release
+    wrapper: col-md-6
+  - name: distinction
+    title: Distinction
+    wrapper: col-md-6
+notes: |
+
+  ### Listing

package/dist/components/content-types/press-review/press-review.twig

@@ -0,0 +1,25 @@
+<div class="press-teaser">
+  <h4 class="mb-4"><time datetime="2018-01-19">19.01.2018</time></h4>
+  {% for i in [1,2,3] %}
+    <button
+      class="collapse-title collapse-title-desktop {{ i != 1 ? 'collapsed' : ''}}"
+      type="button"
+      data-toggle="collapse"
+      data-target="#collapse-{{i}}"
+      aria-expanded="{{ i == 1 ? 'true' : 'false'}}"
+      aria-controls="collapse-{{i}}"
+    >
+      Piloter un drone avec un joystick
+    </button>
+    <div class="collapse collapse-item collapse-item-desktop {{ i == 1 ? 'show' : ''}}" id="collapse-{{i}}">
+      <div class="pb-4">
+        <p>
+          Le prototype de joystick imaginé par la start-up de l'EPFL MotionPilot permet de piloter un drone d’une seule main, de manière intuitive, rapporte L'Agefi.
+        </p>
+        <a class="link-pretty" href="#">Détails du communiqué</a><br>
+        <a class="link-pretty" href="#">Communiqué réservé aux journalistes</a>
+        <small>{% include "@atoms/icon/icon.twig" with { icon: 'icon-lock' } %}</small>
+      </div>
+    </div>
+  {% endfor %}
+</div>

package/dist/components/content-types/press-review/press-review.yml

@@ -0,0 +1,3 @@
+title: Press review
+name: press-review
+wrapper: col-md-6

package/dist/components/content-types/program/program.twig

@@ -0,0 +1,10 @@
+<a href="#" class="card link-trapeze-horizontal">
+  <div class="card-body">
+    <div class="card-header">
+      <span>Bachelor</span>
+    </div>
+    <h3 class="h5 card-title">Génie Électrique et Électronique</h3>
+    <hr>
+    <p class="card-text">L’électricité est un élément indispensable de notre vie quotidienne : il est difficile de s’en passer ne serait-ce qu’un seul jour. C’est une ressource unique, dotée d’une double propriété : elle est à la fois énergie et vecteur d’information. Le génie électrique et électronique se trouve constamment à la croisée de ces deux domaines.</p>
+  </div>
+</a>

package/dist/components/content-types/program/program.yml

@@ -0,0 +1,3 @@
+title: Program
+name: program
+wrapper: col-md-6

package/dist/components/content-types/project/project.twig

@@ -0,0 +1,11 @@
+<h2 class="mb-4">Our current projects</h2>
+<div class="row">
+  {% for i in 1..3 %}
+    <div class="col-md-4">
+      {% include '@content-types/research-project/research-project.twig' %}
+    </div>
+  {% endfor %}
+</div>
+<p class="text-center">
+  <a class="link-pretty" href="#">See all projects</a>
+</p>

package/dist/components/content-types/project/project.yml

@@ -0,0 +1,2 @@
+title: Project
+name: project

package/dist/components/content-types/project-list/project-list.twig

@@ -0,0 +1,82 @@
+<div class="container">
+  <h2>Current projects</h2>
+
+  {% for i in 1..3 %}
+  <section class="collapse-container">
+    <header class="collapse-title collapse-title-desktop collapsed" data-toggle="collapse" data-target="#project-available-{{loop.index}}" aria-expanded="false" aria-controls="project-available-{{loop.index}}">
+      <p class="title">Lorem ipsum dolor sit amet, consectetur adipising elit</p>
+      <ul class="project-data list-inline has-sep small text-muted">
+        <li>ID: 9762</li>
+        <li><span class="sr-only">Semester: </span>Fall 2020</li>
+        <li><span class="sr-only">Type(s): </span>MS, PdM</li>
+        <li><span class="sr-only">Section(s): </span>GM, MT, EL</li>
+        <li class="available"><span class="sr-only">Status: </span>Available</li>
+        <li><span class="sr-only">Professor: </span>Jane Doe</li>
+      </ul>
+    </header>
+
+    <div class="collapse collapse-item collapse-item-desktop" id="project-available-{{loop.index}}">
+      <div class="project-thumb alignright">
+        {% include '@atoms/picture/picture-thumb-square.twig' %}
+      </div>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent faucibus fringilla est, quis facilisis nunc suscipit ut. Sed dignissim orci non risus convallis consequat. Etiam sit amet feugiat orci, eget eleifend metus. Nam sagittis purus nec purus posuere viverra eu eu leo. Suspendisse nec arcu pharetra, dictum ante vel, bibendum mauris. Integer lacus augue, tincidunt sodales diam quis, pellentesque dictum nisl. Etiam aliquam eros ac urna tincidunt auctor.</p>
+      <p>Integer auctor dictum felis eget interdum. Aenean arcu est, bibendum sit amet elit id, accumsan sollicitudin orci. Aenean tincidunt fringilla justo. Aliquam faucibus odio sem. Quisque neque magna, mattis id lectus eu, fermentum lacinia est. Fusce tincidunt tincidunt luctus. Nam sed vestibulum sapien. Maecenas vel rhoncus risus. Pellentesque facilisis tellus vitae nunc pulvinar, vitae tempus odio consequat.</p>
+
+      <dl class="definition-list definition-list-grid">
+        <dt>Requirements</dt>
+        <dd>Background in System and Control Theory, experience with C++ and Matlab (or Python).
+Knowledge of ROS and mathematical optimization will be a big plus.</dd>
+        <dt>Professor</dt>
+        <dd>Jane Doe</dd>
+        <dt>Supervisor</dt>
+        <dd>John Doe</dd>
+      </dl>
+    </div>
+  </section>
+  {% endfor %}
+
+  <h2>Past projects</h2>
+
+  {% for i in 1..3 %}
+  <section class="collapse-container">
+    <header class="collapse-title collapse-title-desktop collapsed" data-toggle="collapse" data-target="#project-completed-{{loop.index}}" aria-expanded="false" aria-controls="project-completed-{{loop.index}}">
+      <p class="title">Lorem ipsum dolor sit amet, consectetur adipising elit</p>
+      <ul class="project-data list-inline has-sep small text-muted">
+        <li>ID: 9762</li>
+        <li><span class="sr-only">Semester: </span>Fall 2020</li>
+        <li><span class="sr-only">Type(s): </span>MS, PdM</li>
+        <li><span class="sr-only">Section(s): </span>GM, MT, EL</li>
+        <li class="completed"><span class="sr-only">Status: </span>Completed</li>
+        <li><span class="sr-only">Professor: </span>Jane Doe</li>
+      </ul>
+      <div class="project-data project-completed small text-muted">
+        <span class="project-team">Team: <a href="#">John Doe</a>, <a href="#">Jane Doe</a>, <a href="#">John Doe</a></span>
+        <div class="actions">
+          <a class="btn btn-secondary btn-sm" href="#">{% include "@atoms/icon/icon.twig" with { icon:  'download', icon_classes:'feather' } %} Report (PDF)</a>
+          <a class="btn btn-secondary btn-sm" href="#">{% include "@atoms/icon/icon.twig" with { icon:  'download', icon_classes:'feather' } %} Presentation (PDF)</a>
+          <a class="btn btn-secondary btn-sm" href="#">{% include "@atoms/icon/icon.twig" with { icon:  'download', icon_classes:'feather' } %} Archive (Zip)</a>
+        </div>
+      </div>
+    </header>
+
+    <div class="collapse collapse-item collapse-item-desktop" id="project-completed-{{loop.index}}">
+      <div class="project-thumb alignright">
+        {% include '@atoms/picture/picture-thumb-square.twig' %}
+      </div>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent faucibus fringilla est, quis facilisis nunc suscipit ut. Sed dignissim orci non risus convallis consequat. Etiam sit amet feugiat orci, eget eleifend metus. Nam sagittis purus nec purus posuere viverra eu eu leo. Suspendisse nec arcu pharetra, dictum ante vel, bibendum mauris. Integer lacus augue, tincidunt sodales diam quis, pellentesque dictum nisl. Etiam aliquam eros ac urna tincidunt auctor.</p>
+      <p>Integer auctor dictum felis eget interdum. Aenean arcu est, bibendum sit amet elit id, accumsan sollicitudin orci. Aenean tincidunt fringilla justo. Aliquam faucibus odio sem. Quisque neque magna, mattis id lectus eu, fermentum lacinia est. Fusce tincidunt tincidunt luctus. Nam sed vestibulum sapien. Maecenas vel rhoncus risus. Pellentesque facilisis tellus vitae nunc pulvinar, vitae tempus odio consequat.</p>
+
+      <dl class="definition-list definition-list-grid">
+        <dt>Requirements</dt>
+        <dd>Background in System and Control Theory, experience with C++ and Matlab (or Python).
+Knowledge of ROS and mathematical optimization will be a big plus.</dd>
+        <dt>Professor</dt>
+        <dd>Jane Doe</dd>
+        <dt>Supervisor</dt>
+        <dd>John Doe</dd>
+      </dl>
+    </div>
+  </section>
+  {% endfor %}
+
+</div>

package/dist/components/content-types/project-list/project-list.yml

@@ -0,0 +1,2 @@
+title: Project list
+name: project-list