epfl-elements 1.0.0 → 4.0.0

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

@@ -0,0 +1 @@
+<input type="text" class="form-control" value="This is my entry">

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

@@ -0,0 +1 @@
+<input type="text" class="form-control" placeholder="Type here...">

package/dist/components/atoms/input/input.yml

@@ -0,0 +1,30 @@
+title: Input
+name: input
+variants:
+  - name: value
+    title: With value
+    notes: |
+      Sample input with text content. Inputs can have pre-filled content that people can edit.
+  - name: hover
+    title: Hover*
+    notes: |
+      *For previewing purposes only. **Do not use in production!*** \
+      *Represents the input when the mouse cursor hovers the component.*
+  - name: focus
+    title: Focus*
+    notes: |
+      *For previewing purposes only. **Do not use in production!*** \
+      *Represents the input when you are editing the content inside the component.*
+  - name: error
+    title: Error
+    notes: |
+      The style to display when you perform validation in a form and that an error appears.
+  - name: disabled
+    title: Disabled
+    notes: |
+      You cannot edit the input content. A use case can be you want to show the entered content without allowing people to edit it.
+notes: |
+  The input atom is the solution when you need people to submit text content. Inputs serve for search fields, forms, newsletter subscriptions, etc.
+
+  ### Placeholder only
+  The basic component, a box with a placeholder text.

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

@@ -0,0 +1,4 @@
+<a href="#" class="link-icon">
+  Link with an arrow icon
+  {% include '@atoms/icon/icon.twig' with {'icon': 'icon-arrow-right'} %}
+</a>

package/dist/components/atoms/link/link-login.twig

@@ -0,0 +1,4 @@
+<span class="small">
+  {% include '@atoms/icon/icon.twig' with { icon: 'lock', icon_classes:'feather' } %}
+  <a href="#">Login</a>
+</span>

package/dist/components/atoms/link/link.twig

@@ -0,0 +1,4 @@
+<p><strong class="pr-3">Vanilla link:</strong> <a href="http://bit.ly/2DLIPLo">Teaching & PhD</a></p>
+<p><strong class="pr-3">Pretty link:</strong> <a class="link-pretty" href="http://bit.ly/2DLIPLo">Teaching & PhD</a></p>
+<p class="mt-4"><strong class="pr-3">Dark link:</strong> <span class="p-3 bg-dark"><a class="text-white" href="http://bit.ly/2DLIPLo">Teaching & PhD</a></span></p>
+<p class="mt-4"><strong class="pr-3">Dark pretty link:</strong><span class="p-3 bg-dark"><a class="link-pretty" href="http://bit.ly/2DLIPLo">Teaching & PhD</a></span></p>

package/dist/components/atoms/link/link.yml

@@ -0,0 +1,26 @@
+title: Link
+name: link
+notes: >
+  A link is a **navigation** component. Links are recognized as **doors between pages**. That means **links description** should be **self-explanatory**. People need to understand where they will land, if they click on a link. Avoid having long links. The **3-words-maximum** rule is good.
+
+
+  Links may - in some situations - activate interactions without loading a new the page. Like loading extra elements from a results list or sort items in a table.
+
+  ## Links styles
+
+  Default style for links uses a **red underline**, in [supported
+  browsers](https://caniuse.com/#feat=text-decoration). In other browsers, the underline
+  uses text color.
+
+  The `link-pretty` class creates a better and more cross-browser style.
+
+  The `link-collapse` class sets the link to have a red triangle and special
+  styles.
+variants:
+  - name: icon
+    title: Icon
+    notes: |
+      You can set up a link with a custom icon. The icon will automatically be at the other end of the element (with flex).
+  - name: login
+    title: Login link
+    notes:

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

@@ -0,0 +1,11 @@
+<ul class="list-inline">
+  <li>Lorem ipsum</li>
+  <li>Phasellus iaculis</li>
+  <li>Nulla volutpat</li>
+</ul>
+
+<ul class="list-inline has-sep">
+  <li>Lorem ipsum</li>
+  <li>Phasellus iaculis</li>
+  <li>Nulla volutpat</li>
+</ul>

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

@@ -0,0 +1,28 @@
+<ol>
+  <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam, facere! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam, facere! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam, facere!</li>
+  <li>Lorem ipsum dolor sit amet consectetur adipisicing
+    <ol>
+      <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam, facere! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam, facere! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam, facere!</li>
+      <li>Lorem ipsum
+        <ol>
+          <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam, facere! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam, facere! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam, facere!</li>
+        </ol>
+      </li>
+    </ol>
+  </li>
+  <li>Lorem ipsum</li>
+  <li>Lorem ipsum dolor sit amet.</li>
+</ol>
+
+<ol>
+  <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam, facere! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam, facere! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam, facere!</li>
+  <li>Lorem ipsum dolor sit amet.
+    <ul>
+      <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam, facere!
+      </li>
+      <li>Lorem ipsum dolor sit amet</li>
+    </ul>
+  </li>
+  <li>Lorem ipsum</li>
+  <li>Lorem ipsum dolor sit amet consectetur adipisicing</li>
+</ol>

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

@@ -0,0 +1,24 @@
+<ul>
+  <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam, facere! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam, facere! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam, facere!</li>
+  <li>Lorem ipsum dolor sit amet consectetur adipisicing.
+    <ul>
+      <li>Lorem ipsum dolor sit amet consectetur.
+        <ul>
+          <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam, facere! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam, facere! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam, facere!</li>
+        </ul>
+      </li>
+    </ul>
+  </li>
+  <li>Lorem ipsum dolor sit amet consectetur.</li>
+</ul>
+
+<ul>
+  <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam, facere! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam, facere! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam, facere!</li>
+  <li>Lorem ipsum dolor sit amet consectetur adipisicing.
+    <ol>
+      <li>Lorem ipsum dolor sit amet consectetur.</li>
+      <li>Lorem ipsum dolor</li>
+    </ol>
+  </li>
+  <li>Lorem ipsum dolor sit amet consectetur.</li>
+</ul>

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

@@ -0,0 +1,5 @@
+<ul class="list-unstyled">
+  <li>Lorem ipsum</li>
+  <li>Phasellus iaculis</li>
+  <li>Nulla volutpat</li>
+</ul>

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

@@ -0,0 +1,13 @@
+<ul>
+  <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam, facere!</li>
+  <li>Lorem ipsum dolor sit amet.</li>
+  <li>Lorem ipsum dolor sit amet consectetur adipisicing.</li>
+  <li>Lorem ipsum dolor sit amet consectetur.</li>
+</ul>
+
+<ol>
+  <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam, facere!</li>
+  <li>Lorem ipsum dolor sit amet.</li>
+  <li>Lorem ipsum dolor sit amet consectetur adipisicing.</li>
+  <li>Lorem ipsum dolor sit amet consectetur.</li>
+</ol>

package/dist/components/atoms/list/list.yml

@@ -0,0 +1,13 @@
+name: list
+title: Lists
+variants:
+  - name: unordered
+    title: Unordered list (bullets)
+  - name: ordered
+    title: Ordered list (numbers)
+  - name: inline
+    title: Inline list
+  - name: unstyled
+    title: Unstyled list
+notes: |
+  The classic way to display a group of elements, with or without hierarchy (see the variants lower on this page). Use lists in content areas.

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">
+  <a href="#" 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>
+  </a>
+  <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 @@
+<div 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>
+</div>

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/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>