epfl-elements 4.4.1 → 4.5.1

package/dist/components/atoms/loader/loader.twig

@@ -0,0 +1,3 @@
+<span class="loader" role="status">
+    <span class="sr-only">Loading...</span>
+</span>

package/dist/components/atoms/loader/loader.yml

@@ -0,0 +1,2 @@
+title: Loader
+name: loader

package/dist/components/atoms/nav-lang/nav-lang-short.twig

@@ -0,0 +1,30 @@
+{% if language is not defined %}{% set language = 'fr' %}{% endif %}
+
+<nav class="nav-lang nav-lang-short ml-auto">
+  <ul>
+    {% if language == 'fr' %}
+    <li>
+      <span class="active" aria-label="Français">FR</span>
+    </li>
+    <li>
+      <a href="#" aria-label="English">EN</a>
+    </li>
+    {% endif %}
+    {% if language == 'en' %}
+    <li>
+      <a href="#" aria-label="Français">FR</a>
+    </li>
+    <li>
+      <span class="active" aria-label="English">EN</span>
+    </li>
+    {% endif %}
+    {% if language == 'de' %}
+      <li>
+        <span class="active" aria-label="Deutsch">DE</span>
+      </li>
+      <li>
+        <a href="#" aria-label="Français">FR</a>
+      </li>
+    {% endif %}
+  </ul>
+</nav>

package/dist/components/atoms/nav-lang/nav-lang.twig

@@ -0,0 +1,29 @@
+<nav class="nav-lang ml-auto dropdown" aria-label="Change language">
+  <button class="dropdown-toggle btn btn-secondary" aria-haspopup="true" aria-expanded="false" data-toggle="dropdown">
+    {% include '@atoms/icon/icon.twig' with {icon: 'icon-planet'} %}
+    <span>FR</span>
+  </button>
+  <ul class="dropdown-menu">
+    <li>
+      <a aria-label="Français (Current language)" class="active dropdown-item" >
+        {% include '@atoms/icon/icon.twig' with {icon: 'icon-planet'} %}
+        <span>FR</span>
+      </a>
+    </li>
+    <li>
+      <a href="#" aria-label="English" class="dropdown-item">
+        <span>EN</span>
+      </a>
+    </li>
+    <li>
+      <a href="#" aria-label="русский" class="dropdown-item">
+        <span>RU</span>
+      </a>
+    </li>
+    <li>
+      <a href="#" aria-label="Deutsch" class="dropdown-item">
+        <span>DE</span>
+      </a>
+    </li>
+  </ul>
+</nav>

package/dist/components/atoms/nav-lang/nav-lang.yml

@@ -0,0 +1,7 @@
+title: Nav lang
+name: nav-lang
+variants:
+  - name: short
+    title: Less than 2 languages
+    notes: >
+      When only 2 languages are available, displaying 2 options doesn't require a dropdown menu

package/dist/components/atoms/nav-toggle/nav-toggle-async.twig

@@ -0,0 +1,6 @@
+<button id="nav-toggle" class="nav-toggle nav-toggle-async btn btn-secondary">
+  {% include '@atoms/loader/loader.twig' %}
+  {% include '@atoms/icon/icon.twig' with { icon: 'icon-browse' } %}
+  {% include '@atoms/icon/icon.twig' with { icon: 'icon-close' } %}
+  Browse
+</button>

package/dist/components/atoms/nav-toggle/nav-toggle.twig

@@ -0,0 +1,6 @@
+<button id="nav-toggle" class="nav-toggle btn btn-secondary">
+  {% include '@atoms/loader/loader.twig' %}
+  {% include '@atoms/icon/icon.twig' with { icon: 'icon-browse' } %}
+  {% include '@atoms/icon/icon.twig' with { icon: 'icon-close' } %}
+  Browse
+</button>

package/dist/components/atoms/nav-toggle/nav-toggle.yml

@@ -0,0 +1,10 @@
+title: Nav toggle
+name: nav-toggle
+variants:
+  - name: async
+    title: Async
+    notes: >
+      If you want an asynchronous transition, you can apply `nav-toggle-async` class on
+      the component. **It will start the loading** state `onClick` instead of opening the navigation.
+      <br /><br />
+      When your content is ready, **you need to trigger the end of the loading** state using `$('.nav-toggle-async').trigger('loadend');`

package/dist/components/atoms/nav-toggle-mobile/nav-toggle-mobile.twig

@@ -0,0 +1,8 @@
+<button class="btn btn-secondary nav-toggle-mobile d-xl-none">
+  <span class="label">Menu</span>
+  <div class="hamburger">
+    <span></span>
+    <span></span>
+    <span></span>
+  </div>
+</button>

package/dist/components/atoms/nav-toggle-mobile/nav-toggle-mobile.yml

@@ -0,0 +1,4 @@
+title: Nav toggle mobile
+name: nav-toggle-mobile
+notes: |
+  Toggles the menu on mobile. Won't be displayed on desktop screens.

package/dist/components/atoms/nav-user/nav-user-login.twig

@@ -0,0 +1,6 @@
+<div class="nav-user user-login mr-lg-2">
+  <a href="#" class="user-login-link">
+    {% include '@atoms/icon/icon.twig' with {'icon': 'user', icon_classes: 'feather'} %}
+    <span class="label">Connexion</span>
+  </a>
+</div>

package/dist/components/atoms/nav-user/nav-user.twig

@@ -0,0 +1,16 @@
+<div class="nav-user dropdown user-dropdown mr-lg-2">
+  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+    <img class="user-avatar rounded-circle" src="https://randomuser.me/api/portraits/women/2.jpg" alt="">
+    <p class="user-name">Heidy Traill</p>
+  </button>
+  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+    <li class="dropdown-item">
+      {% include '@atoms/icon/icon.twig' with {'icon': 'user', icon_classes: 'feather'} %}
+      <a href="#">Accéder à mon compte</a>
+    </li>
+    <li class="dropdown-item">
+      {% include '@atoms/icon/icon.twig' with {'icon': 'log-out', icon_classes: 'feather'} %}
+      <a href="#">Me déconnecter</a>
+    </li>
+  </ul>
+</div>

package/dist/components/atoms/nav-user/nav-user.yml

@@ -0,0 +1,10 @@
+title: Nav user
+name: nav-user
+notes: |
+  * If included in the header, the user dropdown and login link should be placed between the search form and language selector.
+  * If you choose to place it elsewhere, you may need to adjust the Boostratp margin classes on the `.nav-user` element.
+  * An example of user menu integration can be found on the [Laboratory Homepage](#/pages/lab-homepage) template page.
+variants:
+  - name: login
+    title: Login link
+    notes: 

package/dist/components/atoms/picture/picture-avatar.twig

@@ -0,0 +1,18 @@
+<picture>
+  <source
+    media="(min-width: 1140px)"
+    srcset="https://via.placeholder.com/95x95.jpg 1x,https://via.placeholder.com/190x190.jpg 2x">
+  <source
+    media="(min-width: 960px)"
+    srcset="https://via.placeholder.com/95x95.jpg 1x,https://via.placeholder.com/190x190.jpg 2x">
+  <source
+    media="(min-width: 720px)"
+    srcset="https://via.placeholder.com/80x80.jpg 1x,https://via.placeholder.com/160x160.jpg 2x">
+  <source
+    media="(min-width: 541px)"
+    srcset="https://via.placeholder.com/60x60.jpg 1x,https://via.placeholder.com/120x120.jpg 2x">
+  <source
+    media="(max-width: 540px)"
+    srcset="https://via.placeholder.com/90x90.jpg 1x,https://via.placeholder.com/180x180.jpg 2x">
+  <img src="https://via.placeholder.com/95x95.jpg" class="img-fluid rounded-circle" alt="ALT">
+</picture>

package/dist/components/atoms/picture/picture-cover.twig

@@ -0,0 +1,19 @@
+{% set cover_path = cover_path|default("https://via.placeholder.com/") %}
+<picture>
+  <source
+    media="(min-width: 1140px)"
+    srcset="{{cover_path}}1920x1080.jpg 1x,{{cover_path}}2880x1620.jpg 2x">
+  <source
+    media="(min-width: 960px)"
+    srcset="{{cover_path}}1140x641.jpg 1x,{{cover_path}}2280x1283.jpg 2x">
+  <source
+    media="(min-width: 720px)"
+    srcset="{{cover_path}}960x540.jpg 1x,{{cover_path}}1920x1080.jpg 2x">
+  <source
+    media="(min-width: 541px)"
+    srcset="{{cover_path}}720x405.jpg 1x,{{cover_path}}1440x810.jpg 2x">
+  <source
+    media="(max-width: 540px)"
+    srcset="{{cover_path}}540x304.jpg 1x,{{cover_path}}1080x608.jpg 2x">
+  <img src="{{cover_path}}1920x1080.jpg" class="img-fluid" alt="Cover description">
+</picture>

package/dist/components/atoms/picture/picture-fullwidth-teaser.twig

@@ -0,0 +1,21 @@
+{% if not img %}
+{% set img %}./images/styleguide/teaser/news-teaser{% endset %}
+{% endif %}
+<picture>
+  <source
+    media="(min-width: 1920px)"
+    srcset="{{img}}-1920x1080.jpg 1x, {{img}}-2240x1260.jpg 2x">
+  <source
+    media="(min-width: 1366px)"
+    srcset="{{img}}-1440x810.jpg 1x, {{img}}-1920x1080.jpg 2x">
+  <source
+    media="(min-width: 1200px)"
+    srcset="{{img}}-1294x728.jpg 1x, {{img}}-1600x900.jpg 2x">
+  <source
+    media="(min-width: 576px)"
+    srcset="{{img}}-768x432.jpg 1x, {{img}}-1440x810.jpg 2x">
+  <source
+    media="(max-width: 575px)"
+    srcset="{{img}}-576x324.jpg 1x, {{img}}-1140x641.jpg 2x">
+  <img src="{{img}}-1440x810.jpg" class="img-fluid" alt="image description">
+</picture>

package/dist/components/atoms/picture/picture-news-thumb.twig

@@ -0,0 +1,8 @@
+<picture>
+  <source media="(min-width: 1140px)" srcset="./images/styleguide/news-thumbs/news_thumb-95x53.jpg 1x, ./images/styleguide/news-thumbs/news_thumb-190x107.jpg 2x">
+  <source media="(min-width: 960px)" srcset="./images/styleguide/news-thumbs/news_thumb-95x53.jpg 1x, ./images/styleguide/news-thumbs/news_thumb-190x107.jpg 2x">
+  <source media="(min-width: 720px)" srcset="./images/styleguide/news-thumbs/news_thumb-80x45.jpg 1x, ./images/styleguide/news-thumbs/news_thumb-160x90.jpg 2x">
+  <source media="(min-width: 541px)" srcset="./images/styleguide/news-thumbs/news_thumb-120x68.jpg 1x, ./images/styleguide/news-thumbs/news_thumb-240x135.jpg 2x">
+  <source media="(max-width: 540px)" srcset="./images/styleguide/news-thumbs/news_thumb-540x304.jpg 1x, ./images/styleguide/news-thumbs/news_thumb-1080x608.jpg 2x">
+  <img src="./images/styleguide/news-thumbs/news_thumb-95x53.jpg" class="img-fluid" alt="ALT">
+</picture>

package/dist/components/atoms/picture/picture-one-third-square.twig

@@ -0,0 +1,18 @@
+<picture>
+  <source
+    media="(min-width: 1140px)"
+    srcset="https://via.placeholder.com/1140x1140.jpg 1x,https://via.placeholder.com/2280x2280.jpg 2x">
+  <source
+    media="(min-width: 960px)"
+    srcset="https://via.placeholder.com/1140x1140.jpg 1x,https://via.placeholder.com/2280x2280.jpg 2x">
+  <source
+    media="(min-width: 720px)"
+    srcset="https://via.placeholder.com/960x960.jpg 1x,https://via.placeholder.com/1920x1920.jpg 2x">
+  <source
+    media="(min-width: 541px)"
+    srcset="https://via.placeholder.com/240x240.jpg 1x,https://via.placeholder.com/480x480.jpg 2x">
+  <source
+    media="(max-width: 540px)"
+    srcset="https://via.placeholder.com/180x180.jpg 1x,https://via.placeholder.com/360x360.jpg 2x">
+  <img src="https://via.placeholder.com/1140x1140.jpg" class="img-fluid" alt="ALT">
+</picture>

package/dist/components/atoms/picture/picture-one-third.twig

@@ -0,0 +1,18 @@
+<picture>
+  <source
+    media="(min-width: 1140px)"
+    srcset="https://via.placeholder.com/380x214.jpg 1x,https://via.placeholder.com/760x428.jpg 2x">
+  <source
+    media="(min-width: 960px)"
+    srcset="https://via.placeholder.com/380x214.jpg 1x,https://via.placeholder.com/760x428.jpg 2x">
+  <source
+    media="(min-width: 720px)"
+    srcset="https://via.placeholder.com/320x180.jpg 1x,https://via.placeholder.com/640x360.jpg 2x">
+  <source
+    media="(min-width: 541px)"
+    srcset="https://via.placeholder.com/720x405.jpg 1x,https://via.placeholder.com/1440x810.jpg 2x">
+  <source
+    media="(max-width: 540px)"
+    srcset="https://via.placeholder.com/540x304.jpg 1x,https://via.placeholder.com/1080x608.jpg 2x">
+  <img src="https://via.placeholder.com/380x214.jpg" class="img-fluid" alt="ALT">
+</picture>

package/dist/components/atoms/picture/picture-portrait.twig

@@ -0,0 +1,18 @@
+<picture>
+  <source
+    media="(min-width: 1140px)"
+    srcset="https://via.placeholder.com/253x360.jpg 1x,https://via.placeholder.com/506x720.jpg 2x">
+  <source
+    media="(min-width: 960px)"
+    srcset="https://via.placeholder.com/211x300.jpg 1x,https://via.placeholder.com/422x600.jpg 2x">
+  <source
+    media="(min-width: 720px)"
+    srcset="https://via.placeholder.com/253x360.jpg 1x,https://via.placeholder.com/506x720.jpg 2x">
+  <source
+    media="(min-width: 541px)"
+    srcset="https://via.placeholder.com/253x360.jpg 1x,https://via.placeholder.com/506x720.jpg 2x">
+  <source
+    media="(max-width: 540px)"
+    srcset="https://via.placeholder.com/211x300.jpg 1x,https://via.placeholder.com/422x600.jpg 2x">
+  <img src="https://via.placeholder.com/506x720.jpg" class="img-fluid" alt="ALT">
+</picture>

package/dist/components/atoms/picture/picture-question.twig

@@ -0,0 +1,18 @@
+<picture>
+  <source
+    media="(min-width: 1140px)"
+    srcset="./images/styleguide/homepage/7-science-question-SF.jpg 1x, ./images/styleguide/homepage/7-science-question-SF.jpg 2x">
+  <source
+    media="(min-width: 960px)"
+    srcset="https://via.placeholder.com/475x267.jpg 1x,https://via.placeholder.com/950x534.jpg 2x">
+  <source
+    media="(min-width: 720px)"
+    srcset="https://via.placeholder.com/400x225.jpg 1x,https://via.placeholder.com/800x450.jpg 2x">
+  <source
+    media="(min-width: 541px)"
+    srcset="https://via.placeholder.com/720x405.jpg 1x,https://via.placeholder.com/1440x810.jpg 2x">
+  <source
+    media="(max-width: 540px)"
+    srcset="https://via.placeholder.com/540x304.jpg 1x,https://via.placeholder.com/1080x608.jpg 2x">
+  <img src="./images/styleguide/homepage/7-science-question-SF.jpg" class="img-fluid" alt="ALT">
+</picture>

package/dist/components/atoms/picture/picture-thumb-square.twig

@@ -0,0 +1,8 @@
+<picture>
+  <source media="(min-width: 1140px)" srcset="https://via.placeholder.com/95x95.jpg 1x,https://via.placeholder.com/190x190.jpg 2x">
+  <source media="(min-width: 960px)" srcset="https://via.placeholder.com/95x95.jpg 1x,https://via.placeholder.com/190x190.jpg 2x">
+  <source media="(min-width: 720px)" srcset="https://via.placeholder.com/80x80.jpg 1x,https://via.placeholder.com/160x160.jpg 2x">
+  <source media="(min-width: 541px)" srcset="https://via.placeholder.com/120x120.jpg 1x,https://via.placeholder.com/240x240.jpg 2x">
+  <source media="(max-width: 540px)" srcset="https://via.placeholder.com/540x540.jpg 1x,https://via.placeholder.com/1080x1080.jpg 2x">
+  <img src="https://via.placeholder.com/95x95.jpg" class="img-fluid" alt="ALT">
+</picture>

package/dist/components/atoms/picture/picture.twig

@@ -0,0 +1,18 @@
+<picture>
+  <source
+    media="(min-width: 1140px)"
+    srcset="https://via.placeholder.com/570x321.jpg 1x,https://via.placeholder.com/1140x641.jpg 2x">
+  <source
+    media="(min-width: 960px)"
+    srcset="https://via.placeholder.com/570x321.jpg 1x,https://via.placeholder.com/1140x641.jpg 2x">
+  <source
+    media="(min-width: 720px)"
+    srcset="https://via.placeholder.com/480x270.jpg 1x,https://via.placeholder.com/960x540.jpg 2x">
+  <source
+    media="(min-width: 541px)"
+    srcset="https://via.placeholder.com/720x405.jpg 1x,https://via.placeholder.com/1440x810.jpg 2x">
+  <source
+    media="(max-width: 540px)"
+    srcset="https://via.placeholder.com/540x304.jpg 1x,https://via.placeholder.com/1080x608.jpg 2x">
+  <img src="https://via.placeholder.com/570x321.jpg" class="img-fluid" alt="image description">
+</picture>

package/dist/components/atoms/picture/picture.yml

@@ -0,0 +1,43 @@
+title: Picture
+name: picture
+wrapper: col-md-6
+variants:
+  - name: cover
+    title: Cover picture
+    wrapper: 'col-md-12'
+  - name: fullwidth-teaser
+    title: Fullwidth teaser
+    wrapper: 'col-md-12'
+    notes: |
+      Picture used in 'Organism > Fullwidth teaser' and 'News > Highlighted'.
+  - name: avatar
+    title: Avatar
+    wrapper: col-sm-4 col-md-2 col-lg-1
+    notes: |
+      Avatar picture need an equal height and width in order to be displayed as a circle
+  - name: portrait
+    title: Portrait
+    wrapper: col-md-3
+    notes: |
+      Portrait picture is used in People pages
+  - name: one-third
+    title: One third picture
+    wrapper: col-md-4
+  - name: one-third-square
+    title: One third Square picture
+  - name: news-thumb
+    title: News Listing Thumbnail
+    wrapper: col-3 col-md-2
+  - name: thumb-square
+    title: Listing square Thumbnail
+    wrapper: col-3 col-md-2
+notes: |
+
+  > The HTML **`<picture>` element** serves as a container for zero or more `<source>` elements and one `<img>` element to provide versions of an image for different display device scenarios. The browser will consider each of the child `<source>` elements and select one corresponding to the best match found; if no matches are found among the `<source>` elements, the file specified by the `<img>` element's src attribute is selected. The selected image is then presented in the space occupied by the `<img>` element. \
+  > — *[Read more on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture)*
+
+  We are using `<picture>` in Elements instead of a simple `<img>` to **ensure that every user and device will receive the right image format, size and weight**.
+
+  This page presents all image formats defined in Element and all their related sizes. **This implies implemening a lot of image sizes**, but CMS like Wordpress can easily manage [that logic](https://developer.wordpress.org/reference/functions/add_image_size/).
+
+  ### Half desktop picture

package/dist/components/atoms/popover/popover.twig

@@ -0,0 +1,11 @@
+<button
+  aria-hidden="true"
+  type="button"
+  class="btn-circle"
+  data-toggle="popover"
+  data-content="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aut deserunt dolorem eligendi, nemo nulla quae reprehenderit saepe sapiente similique!"
+>
+  {% include "@atoms/icon/icon.twig" with { icon: 'icon-info' } %}
+  {% include "@atoms/icon/icon.twig" with { icon: 'icon-chevron-right', 'icon_classes': 'icon-rotate-90' } %}
+</button>
+<p class="sr-only">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aut deserunt dolorem eligendi, nemo nulla quae reprehenderit saepe sapiente similique!</p>

package/dist/components/atoms/popover/popover.yml

@@ -0,0 +1,6 @@
+name: popover
+title: Popover
+notes: |
+  If you use the `.btn-circle` class on the popover toggle, the popover text should be also added in a `.sr-only` paragraph.
+
+  See the [cover](#/molecules/cover) component for an implementation inside a `<figcaption>`.

package/dist/components/atoms/radio/radio-inline.twig

@@ -0,0 +1,4 @@
+<div class="custom-controls-inline">
+  {% include '@atoms/radio/radio.twig' with { id: '22', name: '2', label: 'Offres du midi', checked: 'checked' } %}
+  {% include '@atoms/radio/radio.twig' with { id: '23', name: '2', label: 'Offres du soir' } %}
+</div>

package/dist/components/atoms/radio/radio-list.twig

@@ -0,0 +1,4 @@
+<h5>Make your choice (only one selection possible):</h5>
+{% include '@atoms/radio/radio.twig' with { id: '12', label: 'First choice' } %}
+{% include '@atoms/radio/radio.twig' with { id: '13', label: 'Choice number two' } %}
+{% include '@atoms/radio/radio.twig' with { id: '14', label: 'Three is for me!' } %}

package/dist/components/atoms/radio/radio.twig

@@ -0,0 +1,4 @@
+<div class="custom-control custom-radio">
+  <input type="radio" id="custom-radio{{id}}" name="customRadio{{name}}" class="custom-control-input" {{checked}}>
+  <label class="custom-control-label" for="custom-radio{{id}}">{{ label ?: 'Option one' }}</label>
+</div>

package/dist/components/atoms/radio/radio.yml

@@ -0,0 +1,8 @@
+title: Radio
+name: radio
+variants:
+  - name: list
+    title: Radio list sample
+    notes: Here is a sample list with radio buttons.
+  - name: inline
+    title: Inline radio list

package/dist/components/atoms/range/range.twig

@@ -0,0 +1,8 @@
+<div class="form-group custom-control">
+  <label for="range-slider">Example range</label>
+  <input type="range" id="rangeSlider" name="range" class="form-control-range custom-range" min="1" max="10" step="1" value="3" id="range-slider" oninput="rangeOutput.value = rangeSlider.value">
+  <span class="output">
+    Value:
+    <strong><output for="range-slider" id="rangeOutput" aria-hidden="true">3</output></strong>
+  </span>
+</div>

package/dist/components/atoms/range/range.yml

@@ -0,0 +1,4 @@
+title: Range
+name: range
+notes: |
+  Custom range slider.

package/dist/components/atoms/select/select-multiple.twig

@@ -0,0 +1,13 @@
+<div class="form-group">
+  <label>Pick a restaurant</label>
+  <select class="select-multiple" multiple="multiple" data-placeholder="Restaurant list">
+    <option value="1">Chuck Testa's tavern</option>
+    <option value="2">The Sage Cattabriga-Alosa hideout</option>
+    <option value="3">Nikola Tesla Drive-in</option>
+    <option value="4">A Love for Pizza 🍕</option>
+    <option value="5">The Hydron Collider
+    </option>
+    <option value="6">There's no place like 127.0.0.1</option>
+    <option value="7">The Shake Shack Space bar</option>
+  </select>
+</div>

package/dist/components/atoms/select/select.twig

@@ -0,0 +1,11 @@
+<div class="form-group">
+<label>Choose wisely</label>
+<select id="select-input" class="custom-select">
+  <option selected>Make a choice...</option>
+  <option value="1">Legolas</option>
+  <option value="2">Jar Jar Binks</option>
+  <option value="3">None of them</option>
+  <option value="4">The fourth choice</option>
+  <option value="5">42</option>
+</select>
+</div>

package/dist/components/atoms/select/select.yml

@@ -0,0 +1,11 @@
+title: Select
+name: select
+variants:
+  - name: multiple
+    title: Select multiple
+    notes: |
+      This variation of the select component enables **multiple choices**. Again, keep your list to the smallest. Think of having a “select all/none” item when the list is long.
+notes: |
+  The select component is mainly used in **forms**. Use it when people have to **choose options from a list**. The select component doesn't trigger actions: it stores a choice before submission. Don't use it when the number of options is low (2 to 3). Use the [checkboxes](#/atoms/checkbox) or [radio buttons](#/atoms/radio) instead. Pay  attention to **long lists**: beyond 7 or 8 options, people struggle to make a educated choice. In any case, keep your list below 15-ish items.
+
+  ### Standard select

package/dist/components/atoms/separator/separator.twig

@@ -0,0 +1,7 @@
+<hr>
+
+<hr class="bold">
+
+<hr class="darker">
+
+<hr class="bold darker">

package/dist/components/atoms/separator/separator.yml

@@ -0,0 +1,5 @@
+title: Separator
+name: separator
+notes: |
+  Use the `.bold` class to make the border wider.
+  Use the `.darker` class for a darker separator.

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

@@ -0,0 +1,3 @@
+{% include "@atoms/social-icon/social-icon-link.twig" with {
+  discrete: true
+} %}

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

@@ -0,0 +1,33 @@
+{% set round = round ? round : false %}
+{% set discrete = discrete ? discrete : false %}
+{% set negative = negative ? negative : false %}
+
+<ul class="social-icon-list list-inline">
+  <li>
+    {% include '@atoms/social-icon/social-icon-single.twig' with { pretty_name: 'E-mail', icon: 'icon-mail-plane', round: round, discrete: discrete, negative: negative } %}
+  </li>
+  <li>
+    {% include '@atoms/social-icon/social-icon-single.twig' with { pretty_name: 'Facebook', icon: 'icon-facebook', round: round, discrete: discrete, negative: negative } %}
+  </li>
+  <li>
+    {% include '@atoms/social-icon/social-icon-single.twig' with { pretty_name: 'Instagram', icon: 'icon-instagram', round: round, discrete: discrete, negative: negative } %}
+  </li>
+  <li>
+    {% include '@atoms/social-icon/social-icon-single.twig' with { pretty_name: 'LinkedIn', icon: 'icon-linkedin', round: round, discrete: discrete, negative: negative } %}
+  </li>
+  <li>
+    {% include '@atoms/social-icon/social-icon-single.twig' with { pretty_name: 'Mastodon', icon: 'icon-mastodon', round: round, discrete: discrete, negative: negative } %}
+  </li>
+  <li>
+    {% include '@atoms/social-icon/social-icon-single.twig' with { pretty_name: 'TikTok', icon: 'icon-tiktok', round: round, discrete: discrete, negative: negative } %}
+  </li>
+  <li>
+    {% include '@atoms/social-icon/social-icon-single.twig' with { pretty_name: 'WhatsApp', icon: 'icon-whatsapp', round: round, discrete: discrete, negative: negative } %}
+  </li>
+  <li>
+    {% include '@atoms/social-icon/social-icon-single.twig' with { pretty_name: 'X', icon: 'icon-x', round: round, discrete: discrete, negative: negative } %}
+  </li>
+  <li>
+    {% include '@atoms/social-icon/social-icon-single.twig' with { pretty_name: 'Youtube', icon: 'icon-youtube', round: round, discrete: discrete, negative: negative } %}
+  </li>
+</ul>

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

@@ -0,0 +1,31 @@
+{% set round = round ? round : false %}
+{% set discrete = discrete ? discrete : false %}
+{% set negative = negative ? negative : false %}
+
+<ul class="social-icon-list list-inline">
+  <li>
+    {% include '@atoms/social-icon/social-icon-single-link.twig' with { pretty_name: 'Follow us on Facebook', icon: 'icon-facebook', round: round, discrete: discrete, negative: negative, url: 'https://www.facebook.com/epflcampus' } %}
+  </li>
+  <li>
+    {% include '@atoms/social-icon/social-icon-single-link.twig' with { pretty_name: 'Follow us on Instagram', icon: 'icon-instagram', round: round, discrete: discrete, negative: negative, url: 'http://instagram.com/epflcampus' } %}
+  </li>
+  <li>
+    {% include '@atoms/social-icon/social-icon-single-link.twig' with { pretty_name: 'Follow us on LinkedIn', icon: 'icon-linkedin', round: round, discrete: discrete, negative: negative, url: 'https://www.linkedin.com/school/epfl/' } %}
+  </li>
+  {%  if social_mastodon %}
+  <li>
+    {% include '@atoms/social-icon/social-icon-single-link.twig' with { pretty_name: 'Follow us on Mastodon', icon: 'icon-mastodon', round: round, discrete: discrete, negative: negative, url: 'https://joinmastodon.org/' } %}
+  </li>
+  {% endif %}
+    {%  if social_tiktok %}
+  <li>
+    {% include '@atoms/social-icon/social-icon-single-link.twig' with { pretty_name: 'Follow us on TikTok', icon: 'icon-tiktok', round: round, discrete: discrete, negative: negative, url: 'https://www.tiktok.com/@epflstudents' } %}
+  </li>
+  {% endif %}
+  <li>
+    {% include '@atoms/social-icon/social-icon-single-link.twig' with { pretty_name: 'Follow us on X', icon: 'icon-x', round: round, discrete: discrete, negative: negative, url: 'https://x.com/epfl_en' } %}
+  </li>
+  <li>
+    {% include '@atoms/social-icon/social-icon-single-link.twig' with { pretty_name: 'Follow us on Youtube', icon: 'icon-youtube', round: round, discrete: discrete, negative: negative, url: 'https://www.youtube.com/user/epflnews' } %}
+  </li>
+</ul>

package/dist/components/atoms/social-icon/social-icon-link.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' : '' %}
+<a href="#" class="{{ 'social-icon social-' ~ icon ~ round ~ negative ~ discrete }}">
+  {% include '@atoms/icon/icon.twig' with { icon: icon } %}
+  <span class="sr-only">{{ pretty_name }}</span>
+</a>

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

@@ -0,0 +1,3 @@
+{% include "@atoms/social-icon/social-icon-link.twig" with {
+  negative: true
+} %}

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

@@ -0,0 +1,3 @@
+{% include "@atoms/social-icon/social-icon.twig" with {
+  negative: true
+} %}

package/dist/components/atoms/social-icon/social-icon-round-discrete-link.twig

@@ -0,0 +1,4 @@
+{% include "@atoms/social-icon/social-icon-link.twig" with {
+  discrete: true,
+  round: true
+} %}

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

@@ -0,0 +1,3 @@
+{% include "@atoms/social-icon/social-icon-link.twig" with {
+  round: true
+} %}

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

@@ -0,0 +1,3 @@
+{% include "@atoms/social-icon/social-icon.twig" with {
+  round: true
+} %}