epfl-elements 4.4.1 → 4.5.1

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

@@ -0,0 +1,49 @@
+{% if title is not defined %}{% set title = 'Further readings' %}{% endif %}
+{% if title %}
+<h4>{{title}}</h4>
+{% endif %}
+
+<button
+  class="collapse-title collapse-title-desktop collapsed"
+  type="button"
+  data-toggle="collapse"
+  data-target="#collapse-1"
+  aria-expanded="false"
+  aria-controls="collapse-1"
+>
+  On the Origin of Species
+</button>
+
+<div class="collapse collapse-item collapse-item-desktop" id="collapse-1">
+  <p>Book by Charles Darwin, 1859 — On the Origin of Species, published on 24 November 1859, is a work of scientific literature by Charles Darwin which is considered to be the foundation of evolutionary biology.</p>
+</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"
+>
+  Silent Spring
+</button>
+
+<div class="collapse collapse-item collapse-item-desktop" id="collapse-2">
+  <p>Book by Rachel Carson, 1962 — Silent Spring is an environmental science book by Rachel Carson. The book was published on 27 September 1962 and it documented the adverse effects on the environment of the indiscriminate use of pesticides.</p>
+</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"
+>
+  The Hitchhiker's Guide to the Galaxy
+</button>
+
+<div class="collapse collapse-item collapse-item-desktop" id="collapse-3">
+  <p>Book by Douglas Adams, 1978–80 — The Hitchhiker's Guide to the Galaxy (sometimes referred to as HG2G, HHGTTG or H2G2) is a comedy science fiction series created by Douglas Adams. Originally a radio comedy broadcast on BBC Radio 4 in 1978, it was later adapted to other formats, including stage shows, novels, comic books, a 1981 TV series, a 1984 video game, and 2005 feature film.</p>
+</div>

package/dist/components/molecules/collapse-group/collapse-group.yml

@@ -0,0 +1,11 @@
+title: Collapse group
+name: collapse-group
+variants:
+  - name: rich-content
+    title: Collapse with rich content
+  - name: people-contacts
+    title: Collapse with contact info
+    notes: |
+      Used in People pages
+notes: |
+  This version is **mobile-only by default**, as used in the mobile version of the footer component. For the desktop version: use the classes `collapse-title-desktop` and `collapse-item-desktop`. See example stack below.

package/dist/components/molecules/cover/cover.twig

@@ -0,0 +1,6 @@
+<figure class="cover">
+  {% include '@atoms/picture/picture-cover.twig' %}
+  <figcaption>
+    {% include '@atoms/popover/popover.twig' %}
+  </figcaption>
+</figure>

package/dist/components/molecules/cover/cover.yml

@@ -0,0 +1,2 @@
+title: Cover
+name: cover

package/dist/components/molecules/datepicker/datepicker-fancy.twig

@@ -0,0 +1,5 @@
+<div class="datepicker-wrapper">
+  <input type="text" class="datepicker-fancy">
+  <span class="nextMonthLabel"></span>
+  <span class="prevMonthLabel"></span>
+</div>

package/dist/components/molecules/datepicker/datepicker.twig

@@ -0,0 +1,3 @@
+<div class="datepicker-wrapper">
+  <input type="text" class="datepicker">
+</div>

package/dist/components/molecules/datepicker/datepicker.yml

@@ -0,0 +1,7 @@
+title: Datepicker
+name: datepicker
+variants:
+  - name: fancy
+    title: Datepicker fancy
+    notes: |
+      Offers big months on desktop and a single line view on mobile.

package/dist/components/molecules/filters/filters-blog.twig

@@ -0,0 +1,48 @@
+<aside>
+  <div class="d-flex justify-content-between px-3 p-md-0 align-baseline">
+    <h3 class="h5 mb-0 font-weight-normal">Filtrer les articles</h3>
+    <button
+      class="btn btn-sm btn-secondary d-lg-none collapsed collapse-drop-toggle"
+      type="button"
+      data-toggle="collapse"
+      data-target="#form-filters"
+      aria-expanded="false"
+      aria-controls="form-filters"
+    >
+      Filtres
+      {% include '@atoms/icon/icon.twig' with {'icon': 'icon-triangle'} %}
+    </button>
+  </div>
+  <div class="collapse collapse-lg-show collapse-drop" id="form-filters">
+    <form class="p-3 p-lg-0 mt-md-3">
+
+      <div class="form-group">
+        <div class="form-group">
+          <label>Catégories</label>
+          <select id="select-input" class="custom-select">
+            <option selected>Toutes les catégories</option>
+            <option value="1">Catégorie 1</option>
+            <option value="2">Catégorie 2</option>
+            <option value="3">Catégorie 3</option>
+            <option value="4">The fourth choice</option>
+            <option value="5">42</option>
+          </select>
+        </div>
+      </div>
+
+      <div class="form-group">
+        <div class="form-group">
+          <label>Archives</label>
+          <select id="select-input" class="custom-select">
+            <option selected>Toutes les années</option>
+            <option value="2020">2020</option>
+            <option value="2019">2019</option>
+            <option value="2018">2018</option>
+            <option value="2017">2017</option>
+          </select>
+        </div>
+      </div>
+
+    </form>
+  </div>
+</aside>

package/dist/components/molecules/filters/filters.twig

@@ -0,0 +1,23 @@
+<aside>
+  <div class="d-flex justify-content-between px-3 p-md-0 align-baseline">
+    <h3 class="h5 mb-0 font-weight-normal">Filtrer votre recherche</h3>
+    <button
+      class="btn btn-sm btn-secondary d-md-none collapsed collapse-drop-toggle"
+      type="button"
+      data-toggle="collapse"
+      data-target="#form-filters"
+      aria-expanded="false"
+      aria-controls="form-filters"
+    >
+      Filtres
+      {% include '@atoms/icon/icon.twig' with {'icon': 'filter', icon_classes: 'feather'} %}
+    </button>
+  </div>
+  <div class="collapse collapse-md-show collapse-drop" id="form-filters">
+    <form class="p-3 p-md-0">
+      {% include "@molecules/form-group/form-group-select.twig" %}
+      {% include "@molecules/form-group/form-group-checkboxes.twig" %}
+      {% include "@molecules/form-group/form-group-checkboxes.twig" %}
+    </form>
+  </div>
+</aside>

package/dist/components/molecules/filters/filters.yml

@@ -0,0 +1,8 @@
+name: filters
+title: Filters
+notes: |
+  The filters are displayed (in a sidebar) on desktop but have to be collapsed in on mobile.
+  variants:
+  - name: blog
+    title: Blog content filters
+    notes: |

package/dist/components/molecules/footnotes/footnotes.twig

@@ -0,0 +1,14 @@
+<article>
+  <p>Maintaining <a href="#footnotes" aria-describedby="footnote-label" id="footnotes-ref">footnotes</a> manually can be a pain. By using <a href="#css" aria-describedby="footnote-label" id="css-ref">CSS</a> <a href="#css-counters" aria-describedby="footnote-label" id="css-counters-ref">counters</a> to add the numbered references in the text and an ordered list to display the actual footnotes in the footer, it becomes extremely easy.</p>
+
+  <footer>
+    <h2 class="sr-only" id="footnote-label">Footnotes</h2>
+    <ol>
+      <li id="footnotes">Footnotes are notes placed at the bottom of a page. They cite references or comment on a designated part of the text above it. <a href="#footnotes-ref" class="back-to-content" aria-label="Back to content">&#8617;</a></li>
+
+      <li id="css">Cascading Style Sheets <a href="#css-ref" class="back-to-content" aria-label="Back to content">&#8617;</a></li>
+
+      <li id="css-counters">CSS counters are, in essence, variables maintained by CSS whose values may be incremented by CSS rules to track how many times they're used. <a href="#css-counters-ref" class="back-to-content" aria-label="Back to content">&#8617;</a></li>
+    </ol>
+  </footer>
+</article>

package/dist/components/molecules/footnotes/footnotes.yml

@@ -0,0 +1,4 @@
+title: Footnotes
+name: footnotes
+notes: |
+  Based on [Hugo Giraudel's article](http://www.sitepoint.com/accessible-footnotes-css) about accessible footnotes using right labelling and back links.

package/dist/components/molecules/form-group/form-group-checkboxes.twig

@@ -0,0 +1,10 @@
+<div class="form-group">
+  <label for="custom-check1">Checkboxes (multiple choice)</label>
+
+  {% for i in [1,2,3] %}
+  {% include "@atoms/checkbox/checkbox.twig" with {
+    id: i,
+    label: 'Option ' ~ i
+  } %}
+  {% endfor %}
+</div>

package/dist/components/molecules/form-group/form-group-error.twig

@@ -0,0 +1,13 @@
+<div class="form-group">
+  <label for="error-input" class="invalid-label">Input's label</label>
+  <input
+    type="text"
+    id="error-input"
+    class="form-control is-invalid"
+    value="Wrong value"
+    aria-describedby="error-input-help"
+  >
+  <small id="error-input-help" class="form-text invalid-feedback">
+    Error message goes here!
+  </small>
+</div>

package/dist/components/molecules/form-group/form-group-radio.twig

@@ -0,0 +1,10 @@
+<div class="form-group">
+  <label for="custom-radio1">Radio button (single choice)</label>
+
+  {% for i in [1,2,3] %}
+  {% include "@atoms/radio/radio.twig" with {
+    id: i,
+    label: 'Option ' ~ i
+  } %}
+  {% endfor %}
+</div>

package/dist/components/molecules/form-group/form-group-search.twig

@@ -0,0 +1,13 @@
+<div class="form-group form-group-search">
+  <label for="search-field" class="sr-only">Search</label>
+  <p class="search-container icon-right">
+    <input
+      type="search"
+      id="search-field"
+      class="form-control"
+      placeholder="Keywords..."
+      aria-describedby="search-field-help"
+    >
+    {% include '@atoms/icon/icon.twig' with { icon:  'icon-search' } %}
+  </p>
+</div>

package/dist/components/molecules/form-group/form-group-select.twig

@@ -0,0 +1,3 @@
+<div class="form-group">
+  {% include "@atoms/select/select.twig" %}
+</div>

package/dist/components/molecules/form-group/form-group-textarea.twig

@@ -0,0 +1,4 @@
+<div class="form-group">
+  <label for="awesome-textarea">Text area</label>
+  <textarea class="form-control" id="awesome-textarea" rows="3">Multiple lines can be typed here…</textarea>
+</div>

package/dist/components/molecules/form-group/form-group-upload.twig

@@ -0,0 +1,4 @@
+<div class="form-group">
+  <label for="upload-input">File upload</label>
+  {% include "@atoms/upload/upload.twig" %}
+</div>

package/dist/components/molecules/form-group/form-group.twig

@@ -0,0 +1,13 @@
+<div class="form-group">
+  <label for="awesome-input">Input's label</label>
+  <input
+    type="text"
+    id="awesome-input"
+    class="form-control"
+    placeholder="Type here..."
+    aria-describedby="awesome-input-help"
+  >
+  <small id="awesome-input-help" class="form-text text-muted">
+    Help text about the text field.
+  </small>
+</div>

package/dist/components/molecules/form-group/form-group.yml

@@ -0,0 +1,21 @@
+title: Form group
+name: form-group
+variants:
+  - name: checkboxes
+    title: Checkboxes
+  - name: radio
+    title: Radio
+  - name: error
+    title: Error form group
+  - name: select
+    title: Select form group
+  - name: textarea
+    title: Textarea
+  - name: upload
+    title: File upload
+  - name: search
+    title: Search field
+notes: |
+  Never forget the `for=""` attribute to link the input to the label.
+
+  ### Standard form group

package/dist/components/molecules/gallery/gallery.twig

@@ -0,0 +1,27 @@
+<div class="gallery-container">
+
+  <div id="my-gallery-{{ id ?: 1 }}" class="gallery gallery-main">
+    {% for i in 1..8 %}
+      <figure class="gallery-item" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
+        <div class="gallery-item-inner">
+          <div class="img-wrapper">
+            <img src="./images/styleguide/gallery/gallery_0{{i}}.jpg" alt="Picture of an amazing science topic" class="img-fluid">
+          </div>
+        </div>
+        <figcaption>
+          <span>Picture of an amazing science topic</span>
+        </figcaption>
+      </figure>
+    {% endfor %}
+  </div>
+
+  <div class="gallery-nav" data-gallery="my-gallery-{{ id ?: 1 }}" aria-hidden="true">
+    {% for i in 1..8 %}
+      <figure class="gallery-nav-item" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
+        <img src="./images/styleguide/gallery/thumb_0{{i}}.jpg" alt="Thumbnail of an amazing science topic" class="img-fluid">
+        <figcaption>Picture of an amazing science topic</figcaption>
+      </figure>
+    {% endfor %}
+  </div>
+
+</div>

package/dist/components/molecules/gallery/gallery.yml

@@ -0,0 +1,5 @@
+title: Gallery
+name: gallery
+wrapper: col-md-8
+notes: |
+  The gallery component uses [Flickity](https://flickity.metafizzy.co/) to manage the slider and fullscreen capabilities.

package/dist/components/molecules/key-number/key-number-large.twig

@@ -0,0 +1,29 @@
+{% set icon = icon|default("https://via.placeholder.com/") %}
+<div class="key-number-large">
+  <div class="card border-0 bg-white m-0 h-100">
+    <div class="card-header border-0">
+      <div class="row">
+        <div class="col-md-6">
+          <p class="h4">Pays d'origine</p>
+        </div>
+        <div class="col-md-6 text-right">
+          <img src="images/styleguide/key-numbers/collaborations.png" alt="">
+        </div>
+      </div>
+    </div>
+    <div class="card-body pt-0">
+      <div class="row">
+        <div class="col-md-6">
+          <hr>
+          <p class="mb-0 display-4 font-weight-bold">2'706</p>
+          <p class="text-small">Femmes</p>
+        </div>
+        <div class="col-md-6">
+          <hr>
+          <p class="mb-0 display-4 font-weight-bold">7'180</p>
+          <p class="text-small">Hommes</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

package/dist/components/molecules/key-number/key-number.twig

@@ -0,0 +1,23 @@
+{% set icon = icon|default("https://via.placeholder.com/") %}
+<div class="key-number">
+  <div class="card border-0 bg-white m-0 h-100">
+    <div class="card-header border-0">
+      <p class="h6 mb-3 text-capitalize">Étudiants</p>
+      <img src="images/styleguide/key-numbers/students.png" class="d-block m-auto" alt="">
+    </div>
+    <div class="card-body pt-0">
+      <div class="row">
+        <div class="col-sm-6">
+          <hr>
+          <p class="h5 mb-0">2'706</p>
+          <p class="text-small">Femmes</p>
+        </div>
+        <div class="col-sm-6">
+          <hr>
+          <p class="h5 mb-0">7'180</p>
+          <p class="text-small">Hommes</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

package/dist/components/molecules/key-number/key-number.yml

@@ -0,0 +1,7 @@
+title: Key Number
+name: key-number
+wrapper: col-md-6 bg-gray-100
+variants:
+  - name: large
+    title: Large
+    wrapper: 'bg-gray-100'

package/dist/components/molecules/links-group/links-group-teaser.twig

@@ -0,0 +1,9 @@
+<div class="links-group links-group-teaser">
+  <h5 id="links-group-title"><a class="link-pretty" href="#">Vue d’ensemble de l’EPFL</a></h5>
+  <ul class="list-unstyled">
+    <li><a class="link-pretty" href="#">Chiffres clés</a></li>
+    <li><a class="link-pretty" href="#">3 missions de l’EPFL</li>
+    <li><a class="link-pretty" href="#">Organigrammes de la direction</li>
+    <li><a class="link-pretty" href="#">Réalisations importantes de l’EPFL</li>
+  </ul>
+</div>

package/dist/components/molecules/links-group/links-group.twig

@@ -0,0 +1,11 @@
+<div class="links-group">
+  <h5 id="links-group-title">Plus d'informations sur la faculté</h5>
+  <ul class="list-unstyled">
+    <li><a class="link-pretty" href="#">Tous les laboratoires de la faculté</a></li>
+    <li><a class="link-pretty" href="#">Liste des professeurs de la faculté</a></li>
+    <li><a class="link-pretty" href="#">Postes à pourvoir à l'ENAC</a></li>
+    <li><a class="link-pretty" href="#">Services internes</a></li>
+    <li><a class="link-pretty" href="#">L'organisation de la faculté</a></li>
+    <li><a class="link-pretty" href="#">Chaires de l'ENAC</a></li>
+  </ul>
+</div>

package/dist/components/molecules/links-group/links-group.yml

@@ -0,0 +1,9 @@
+title: Links group
+name: links-group
+background: '#EEEEEE'
+notes: |
+
+  ### Links block
+variants:
+  - name: teaser
+    title: Links teaser

package/dist/components/molecules/list-group/list-group-borderless.twig

@@ -0,0 +1,25 @@
+<div class="list-group">
+  {% for i in 1..4 %}
+    <div class="list-group-item list-group-item-borderless">
+      <div class="row">
+        <div class="col-md-8">
+          <h4 class="h5">Measuring Latency: Am I doing it right?</h4>
+          <p class="text-muted small mb-0">
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br>
+            Author(s): <a class="text-muted" href="#">John Doe</a>, <a class="text-muted" href="#">John Doe</a>, <a class="text-muted" href="#">John Doe</a>
+          </p>
+        </div>
+        <div class="col-md-3 offset-md-1 text-right">
+          <p>
+            <a href="#" class="btn btn-secondary btn-sm">Detailed record<span class="sr-only">of publication "Measuring Latency: Am I doing it right?"</span></a>
+          </p>
+          <p class="text-muted small mb-0">
+            <a class="text-muted" href="#">Full text<span class="sr-only">of publication "Measuring Latency: Am I doing it right?"</span></a> -
+            <a class="text-muted" href="#">Bib TeX<span class="sr-only">of publication "Measuring Latency: Am I doing it right?"</span></a> -
+            <a class="text-muted" href="#">Endnote XML<span class="sr-only">of publication "Measuring Latency: Am I doing it right?"</span></a>
+          </p>
+        </div>
+      </div>
+    </div>
+  {% endfor %}
+</div>

package/dist/components/molecules/list-group/list-group-event.twig

@@ -0,0 +1,74 @@
+<div 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>
+        </p>
+        {% endblock %}
+        <div class="event-info mt-1">
+          {% block speaker %}
+          <p class="event-speaker" itemprop="performer" itemscope itemtype="http://schema.org/performer">
+            <b>Intervenant·e:</b> Prof. Dr. Aditya Mueller
+          </p>  
+          {% endblock %}
+          {% block location %}
+          <p class="event-location" itemprop="location" itemscope itemtype="http://schema.org/Place">
+            {% 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 %}
+          </p>
+          {% endblock %}
+          {% block category %}
+          <p class="event-category">
+            <b>Catégorie:</b> Événements culturel
+          </p>
+          {% endblock %}
+          {% block audience %}
+          <p class="event-audience" itemprop="audience" itemscope itemtype="https://schema.org/audience">
+            <b>Public cible:</b> Tout public
+          </p>
+          {% endblock %}
+        </div>
+        
+        <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/list-group/list-group-infoscience.twig

@@ -0,0 +1,32 @@
+<div class="list-group">
+  {% for i in 1..3 %}
+  <div class="list-group-item list-group-item-borderless list-group-item-infoscience">
+    <div class="record-content">
+      <p>Noms des auteurs: <strong>Titre de la publication lorem ipsum dolor sit amet consectetur adipscing elit</strong>; <i>Sous-titre lorem ipsum dolor sit amet consectetur adipscing elit</i>; Références, lieu de publication, etc.</p>
+    </div>
+    <div class="item-metadata">
+      <p class="item-date">18.11.2019</p>
+      <p class="item-links small">
+        <a href="#" target="_blank">Notice détaillée</a> – <a href="#" target="_blank">Texte intégral</a>
+      </p>
+    </div>
+  </div>
+  {% endfor %}
+  <!-- Publication with thumbnail image -->
+  <div class="list-group-item list-group-item-borderless list-group-item-infoscience has-thumbnail">
+    <div class="list-group-thumbnail">
+      {% include '@atoms/picture/picture-thumb-square.twig' %}
+    </div>
+    <div class="list-group-content">
+      <div class="record-content">
+        <p>Noms des auteurs: <strong>Titre de la publication lorem ipsum dolor sit amet consectetur adipscing elit</strong>; <i>Sous-titre lorem ipsum dolor sit amet consectetur adipscing elit</i>; Références, lieu de publication, etc.</p>
+      </div>
+      <div class="item-metadata">
+        <p class="item-date">18.11.2019</p>
+        <p class="item-links small">
+          <a href="#" target="_blank">Notice détaillée</a> – <a href="#" target="_blank">Texte intégral</a>
+        </p>
+      </div>
+    </div>
+  </div>
+</div>

package/dist/components/molecules/list-group/list-group-teasers.twig

@@ -0,0 +1,55 @@
+<div class="list-group">
+  {% for i in 1..4 %}
+
+      <div class="list-group-teaser list-group-item list-group-teaser-container">
+        <div class="list-group-teaser-thumbnail">
+          <a href="#" class="link-trapeze-horizontal">
+            {% include '@atoms/picture/picture-news-thumb.twig' %}
+          </a>
+        </div>
+        <div class="list-group-teaser-content">
+          <h3 class="h5"><a href="#">Physics: new e-books for the AIAA Education Series</a></h3>
+          <p>
+            <time datetime="2018-03-26"><span class="sr-only">Published:</span>26.03.2018</time>
+            <span class="text-muted">— 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>
+  {% endfor %}
+
+  <div class="list-group-teaser list-group-item list-group-teaser-container teaser-img-right">
+    <div class="list-group-teaser-thumbnail">
+      <a href="#" class="link-trapeze-horizontal">
+        {% include '@atoms/picture/picture-news-thumb.twig' %}
+      </a>
+    </div>
+    <div class="list-group-teaser-content">
+      <h3 class="h5"><a href="#">Physics: new e-books for the AIAA Education Series</a></h3>
+      <p class="teaser-url text-small text-muted mb-2">https://www.epfl.ch/research/facilities/biological-electron-microscopy/</p>
+      <p>
+        <time datetime="2018-03-26"><span class="sr-only">Published:</span>26.03.2018</time>
+        <span class="text-muted">— 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>
+
+  <div class="list-group-teaser list-group-item list-group-teaser-container">
+    <div class="list-group-teaser-content">
+      <h3 class="h5"><a href="#">Physics: new e-books for the AIAA Education Series</a></h3>
+      <p class="teaser-url text-small text-muted mb-2">https://www.epfl.ch/research/facilities/biological-electron-microscopy/</p>
+      <p>
+        <time datetime="2018-03-26"><span class="sr-only">Published:</span>26.03.2018</time>
+        <span class="text-muted">— 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>
+
+  {# {% if bottomlink %} #}
+    <a href="#" class="list-group-teaser-more">
+      Afficher plus d'actualités
+    </a>
+  {# {% endif %} #}
+</div>

package/dist/components/molecules/list-group/list-group.twig

@@ -0,0 +1,4 @@
+<ul class="list-group list-group-flush">
+  <li class="list-group-item">Computer science</li>
+  <li class="list-group-item">Communication systems</li>
+</ul>