epfl-elements 4.5.0 → 4.6.0

package/dist/components/atoms/social-icon/social-icon-single-link-with-details.twig

@@ -0,0 +1,11 @@
+{% set pretty_name = pretty_name ?: 'X' %}
+{% set user_id = user_id ?: 'firstname.name' %}
+{% set icon = icon ?: 'icon-x' %}
+{% set round = round ? ' social-icon-round' : '' %}
+{% set discrete = discrete ? ' social-icon-discrete' : '' %}
+{% set negative = negative ? ' social-icon-negative' : '' %}
+{% set url = url or '#' %}
+<a href="{{ url }}" class="{{ 'social-icon social-icon-details social-' ~ icon ~ round ~ negative ~ discrete }}" rel="nofollow" title="View on {{ pretty_name }}">
+  {% include '@atoms/icon/icon.twig' with { icon: icon } %}
+  <span class="user">{{ user_id }}</span>
+</a>

package/dist/components/atoms/social-icon/social-icon-single-link.twig

@@ -0,0 +1,10 @@
+{% set pretty_name = pretty_name ?: 'Follow us on X' %}
+{% set icon = icon ?: 'icon-x' %}
+{% set round = round ? ' social-icon-round' : '' %}
+{% set discrete = discrete ? ' social-icon-discrete' : '' %}
+{% set negative = negative ? ' social-icon-negative' : '' %}
+{% set url = url ?:  '#' %}
+<a href="{{ url }}" class="{{ 'social-icon social-' ~ icon ~ round ~ negative ~ discrete }}" target="_blank" rel="nofollow noopener">
+  {% include '@atoms/icon/icon.twig' with { icon: icon } %}
+  <span class="sr-only">{{ pretty_name }}</span>
+</a>

package/dist/components/atoms/social-icon/social-icon-single.twig

@@ -0,0 +1,9 @@
+{% set pretty_name = pretty_name ?: 'X' %}
+{% set icon = icon ?: 'icon-x' %}
+{% set round = round ? ' social-icon-round' : '' %}
+{% set discrete = discrete ? ' social-icon-discrete' : '' %}
+{% set negative = negative ? ' social-icon-negative' : '' %}
+<span class="{{ 'social-icon social-' ~ icon ~ round ~ negative }}">
+  {% include '@atoms/icon/icon.twig' with { icon: icon } %}
+  <span class="sr-only">{{ pretty_name }}</span>
+</span>

package/dist/components/atoms/social-icon/social-icon.twig

@@ -0,0 +1,9 @@
+{% set pretty_name = pretty_name ?: 'X' %}
+{% set icon = icon ?: 'icon-x' %}
+{% set round = round ? ' social-icon-round' : '' %}
+{% set discrete = discrete ? ' social-icon-discrete' : '' %}
+{% set negative = negative ? ' social-icon-negative' : '' %}
+<span class="{{ 'social-icon social-' ~ icon ~ round ~ negative }}">
+  {% include '@atoms/icon/icon.twig' with { icon: icon } %}
+  <span class="sr-only">{{ pretty_name }}</span>
+</span>

package/dist/components/atoms/social-icon/social-icon.yml

@@ -0,0 +1,33 @@
+title: Social icon
+name: social-icon
+variants:
+  - name: link
+    title: Link
+  - name: group
+    title: Group
+  - name: link-group
+    title: Link Group
+  - name: negative
+    title: Negative
+  - name: round
+    title: Round
+  - name: discrete-link
+    title: Discrete Link
+  - name: round-link
+    title: Round Link
+  - name: round-discrete-link
+    title: Round Discrete Link
+  - name: negative-link
+    title: Negative Link
+notes: |
+
+  Icons to accomodate social boxes. The available social networks are:
+  * `e-mail`
+  * `facebook`
+  * `instagram`
+  * `linkedin`
+  * `mastodon`
+  * `tiktok`
+  * `whatsapp`
+  * `x`
+  * `youtube`

package/dist/components/atoms/tag/tag-input.twig

@@ -0,0 +1,5 @@
+<h5>Regular</h5>
+<input type="text" class="tag-input" placeholder="Enter a tag...">
+<hr>
+<h5>Small</h5>
+<input type="text" class="tag-input tag-input-sm" placeholder="Enter a tag..." value="Antistatique, EPFL, 🎒">

package/dist/components/atoms/tag/tag.twig

@@ -0,0 +1,25 @@
+<h5>Non-link</h5>
+<span class="tag tag-plain">Plain</span>
+<span class="tag tag-light">Light</span>
+
+<hr>
+<h5>Link</h5>
+<a href="#" class="tag tag-primary">Primary</a>
+<a href="#" class="tag tag-secondary">Secondary</a>
+<hr>
+<h5>removable</h5>
+<button class="btn tag tag-primary">
+  Primary
+  <span class="btn btn-secondary remove" title="Remove">×</span>
+</button>
+<button class="btn tag tag-secondary">
+  Secondary
+  <span class="btn btn-secondary remove" title="Remove">×</span>
+</button>
+<hr>
+<h5>Small</h5>
+<span class="tag tag-sm tag-plain">Plain</span>
+<span class="tag tag-sm tag-primary">Primary</span>
+<span class="tag tag-sm tag-secondary">Secondary</span>
+<span class="tag tag-sm tag-light">Light</span>
+<hr>

package/dist/components/atoms/tag/tag.yml

@@ -0,0 +1,19 @@
+title: Tag
+name: tag
+
+variants:
+  - name: input
+    title: Tag input
+    notes: |
+      Tag input is a specific style for text fields. Usable for search or publishing interfaces.
+
+      This component uses [Selectize.js](https://selectize.dev/). Have a look at the [documentation](https://github.com/selectize/selectize.js/blob/master/docs/usage.md) for more information about all the possibilities. You can start using it with the markup below.
+
+notes: |
+  Tags help categorise and label content items. They can be clicked (active) or informative (passive). Categories for a news article use tags, in an active way.
+
+  Like buttons, tags have different styles:
+  - **Non-link tags**, for informative tags
+  - **Link tags**, for clickable tags
+  - **Removable tags**, used in editable interfaces
+  - **Small tags**, when space is limited

package/dist/components/atoms/trapeze/trapeze-horizontal.twig

@@ -0,0 +1,9 @@
+<a href="#" class="trapeze-horizontal-container">
+  <div class="card mb-0">
+    <div class="card-body">
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquam aliquid architecto culpa cumque dolores dolorum, eius eveniet hic inventore iste itaque laborum nemo nobis nostrum odit, perferendis quae tempora.
+    </div>
+  </div>
+  <span class="trapeze-horizontal"></span>
+</a>
+

package/dist/components/atoms/trapeze/trapeze-pseudo.twig

@@ -0,0 +1,11 @@
+<a href="#" class="card link-trapeze-vertical">
+  <div class="card-body">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquam aliquid architecto culpa cumque dolores dolorum, eius eveniet hic inventore iste itaque laborum nemo nobis nostrum odit, perferendis quae tempora.
+  </div>
+</a>
+
+<a href="#" class="card link-trapeze-horizontal">
+  <div class="card-body">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquam aliquid architecto culpa cumque dolores dolorum, eius eveniet hic inventore iste itaque laborum nemo nobis nostrum odit, perferendis quae tempora.
+  </div>
+</a>

package/dist/components/atoms/trapeze/trapeze.twig

@@ -0,0 +1,9 @@
+<a href="#" class="trapeze-vertical-container">
+  <div class="card">
+    <div class="card-body">
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquam aliquid architecto culpa cumque dolores dolorum, eius eveniet hic inventore iste itaque laborum nemo nobis nostrum odit, perferendis quae tempora.
+    </div>
+  </div>
+  <span class="trapeze-vertical"></span>
+</a>
+

package/dist/components/atoms/trapeze/trapeze.yml

@@ -0,0 +1,17 @@
+name: trapeze
+title: Trapeze
+notes: >
+  The trapeze can be used to make a fancy hover effect. Two variants exist,
+  depending on your needs.
+
+
+  1. Use a `<span>` element to generate the wrapper.
+
+  2. Use a single class with pseudo-elements
+variants:
+  - name: horizontal
+    title: Horizontal
+  - name: pseudo
+    title: Pseudo
+    notes: |
+      Simply add the class `.link-trapeze-horizontal` or `.link-trapeze-vertical` to your link to add a pseudo element trapeze on hover.

package/dist/components/atoms/upload/upload.twig

@@ -0,0 +1,8 @@
+<div class="upload">
+  <input type="file" name="upload-input" class="upload-input" id="upload-input" />
+  <label for="upload-input" class="btn btn-secondary btn-sm icon-right">
+    Choose a file
+    {% include "@atoms/icon/icon.twig" with { icon: 'icon-upload' } %}
+  </label>
+  <div class="upload-preview">No file</div>
+</div>

package/dist/components/atoms/upload/upload.yml

@@ -0,0 +1,6 @@
+title: Upload
+name: upload
+notes: |
+  If you want to **upload more than one file**, you can add the `multiple` attribute on the file input.
+
+  Never forget the `for=""` attribute to link the input to the label.

package/dist/components/atoms/video/video.twig

@@ -0,0 +1,8 @@
+<div class="embed-responsive embed-responsive-16by9">
+  <iframe
+    class="embed-responsive-item"
+    src="https://www.youtube.com/embed/eIefuuUnLvc?rel=0"
+    frameborder="0"
+    allow="autoplay; encrypted-media"
+    allowfullscreen></iframe>
+</div>

package/dist/components/atoms/video/video.yml

@@ -0,0 +1,9 @@
+title: Video
+name: video
+notes : |
+  This is an example of **YouTube** integration but basically, **you can use any kind of `<iframe>` URLs** until you keep the wrapper and the classes applied.
+  If you have another type of aspect ratio, you can use the corresponding modifier classes:
+    - `.embed-responsive-21by9`
+    - `.embed-responsive-16by9`
+    - `.embed-responsive-4by3`
+    - `.embed-responsive-1by1`

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

@@ -0,0 +1,10 @@
+<a href="#" class="card link-trapeze-horizontal">
+  <div class="card-body">
+    <p class="text-muted small">ACC</p>
+    <h3 class="h5 card-title">Association des Cadres de la Confédération</h3>
+    <div class="card-info card-info-bordered">
+      <span>Aide à la vie professionnelle</span>
+    </div>
+    <p class="card-text">First experiences of celestial bodies begins when we saw our first stars.</p>
+  </div>
+</a>

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

@@ -0,0 +1,3 @@
+title: Association
+name: association
+wrapper: col-md-6

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

@@ -0,0 +1,13 @@
+<div class="card">
+  <div class="card-body pb-0">
+    <div class="card-info">
+      <span>Bachelor</span>
+    </div>
+    <h3 class="h5 card-title">
+      <a href="#">Generic user interfaces for data manipulation programs</a>
+    </h3>
+  </div>
+  <div class="card-footer mt-auto">
+    <a href="#" class="btn btn-secondary btn-sm">Project details</a>
+  </div>
+</div>

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

@@ -0,0 +1,3 @@
+title: Bachelor project
+name: bachelor-project
+wrapper: col-md-6

package/dist/components/content-types/basic-page/basic-page-highlighted.twig

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

package/dist/components/content-types/basic-page/basic-page.twig

@@ -0,0 +1,12 @@
+{% embed '@molecules/card/card-inside-links.twig' %}
+  {% block title %}Page title{% endblock %}
+  {% block content %}
+    {{ parent() }}
+    <p>The EPFL favors closer ties to industry leading research in order to best meet the scientific, technological and societal</p>
+  {% endblock %}
+  {% block card_footer %}
+    <div class="card-footer mt-auto">
+      <a href="#" class="btn btn-secondary btn-sm">Button</a>
+    </div>
+  {% endblock %}
+{% endembed %}

package/dist/components/content-types/basic-page/basic-page.yml

@@ -0,0 +1,10 @@
+title: Basic page
+name: basic-page
+wrapper: col-md-6
+notes: |
+  ### Default teaser
+
+variants:
+  - name: highlighted
+    title: Highlighted teaser
+    wrapper: col-12

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

@@ -0,0 +1,47 @@
+<div class="box two-cols">
+  <h3>légende</h3>
+  <div class="box-col box-left-col">
+    <ul>
+      <li>
+        <div class="img_legende automne">
+          <div class="little_icon"></div>
+        </div>Semestre d'automne
+      </li>
+      <li>
+        <div class="img_legende winter">
+          <div class="little_icon"></div>
+        </div>Session d'hiver
+      </li>
+      <li>
+        <div class="img_legende printemps">
+          <div class="little_icon"></div>
+        </div>Semestre de printemps
+      </li>
+      <li>
+        <div class="img_legende sun">
+          <div class="little_icon"></div>
+        </div>Session d'été
+      </li>
+    </ul>
+  </div>
+  <div class="box-col box-right-col">
+    <ul>
+      <li>
+        <div class="img_legende francais">
+          <div class="diet_icon"></div>
+        </div>Cours en français
+      </li>
+      <li>
+        <div class="img_legende anglais">
+          <div class="diet_icon"></div>
+        </div>Cours en anglais
+      </li>
+      <li>
+        <div class="img_legende allemand">
+          <div class="diet_icon"></div>
+        </div>Cours en allemand
+      </li>
+    </ul>
+  </div>
+  <div class="clear"></div>
+</div>

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

@@ -0,0 +1,65 @@
+  <button
+    class="collapse-title collapse-title-desktop"
+    type="button"
+    data-toggle="collapse"
+    data-target="#study-plan-1"
+    aria-expanded="true"
+    aria-controls="study-plan-1"
+  >
+    Architecture<br>
+    <span class="d-block font-weight-normal">2020-2021, Bachelor semestre 6</span>
+  </button>
+
+  <div class="collapse collapse-item show collapse-item-desktop" id="study-plan-1">
+    <ul class="list-bullet">
+      <li><strong>Semestre:</strong> Printemps</li>
+      <li><strong>Examen:</strong> Oral (session d’été)</li>
+      <li><strong>Matière examinée:</strong> Art et Architecture</li>
+      <li><strong>Cours:</strong> 2 heures hebdo x 14 semaines</li>
+      <li><strong>Projet:</strong> 4 heures hebdo x 14 semaines</li>
+    </ul>
+  </div>
+
+  <button
+    class="collapse-title collapse-title-desktop collapsed"
+    type="button"
+    data-toggle="collapse"
+    data-target="#study-plan-2"
+    aria-expanded="false"
+    aria-controls="study-plan-2"
+  >
+    Architecture<br>
+    <span class="d-block font-weight-normal">2020-2021, Bachelor semestre 6b</span>
+  </button>
+
+  <div class="collapse collapse-item collapse-item-desktop" id="study-plan-2">
+    <ul class="list-bullet">
+      <li><strong>Semestre:</strong> Printemps</li>
+      <li><strong>Examen:</strong> Oral (session d’été)</li>
+      <li><strong>Matière examinée:</strong> Art et Architecture</li>
+      <li><strong>Cours:</strong> 2 heures hebdo x 14 semaines</li>
+      <li><strong>Projet:</strong> 4 heures hebdo x 14 semaines</li>
+    </ul>
+  </div>
+
+  <button
+    class="collapse-title collapse-title-desktop collapsed"
+    type="button"
+    data-toggle="collapse"
+    data-target="#study-plan-3"
+    aria-expanded="false"
+    aria-controls="study-plan-3"
+  >
+    Lorem ipsum dolor sit amet<br>
+    <span class="d-block font-weight-normal">2020-2021, Semestre automne</span>
+  </button>
+
+  <div class="collapse collapse-item collapse-item-desktop" id="study-plan-3">
+    <ul class="list-bullet">
+      <li><strong>Semestre:</strong> Printemps</li>
+      <li><strong>Examen:</strong> Oral (session d’été)</li>
+      <li><strong>Matière examinée:</strong> Art et Architecture</li>
+      <li><strong>Cours:</strong> 2 heures hebdo x 14 semaines</li>
+      <li><strong>Projet:</strong> 4 heures hebdo x 14 semaines</li>
+    </ul>
+  </div>

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/list-group/list-group-event.twig' %}
+  {% include '@molecules/list-group/list-group-event.twig' with { eventLocation: 'online_room', live_now: true, online_event: true } %}
+  {% include '@molecules/list-group/list-group-event.twig' with { eventLocation: 'online', online_event: true } %}
+</div>