epfl-elements 5.1.0 → 5.2.1

package/assets/config/bootstrap-variables.scss

@@ -10,13 +10,16 @@
 //
 
 // stylelint-disable
-$white:    #fff !default;
-$gray-100: #e6e6e6 !default;
-$gray-200: #d5d5d5 !default;
-$gray-300: #c1c1c1 !default;
-$gray-500: #8e8e8e !default;
-$gray-600: #707070 !default;
-$black:    #212121 !default;
+$white:       #fff !default;
+$gray-100:    #e6e6e6 !default;
+$gray-200:    #d5d5d5 !default;
+$gray-300:    #c1c1c1 !default;
+$gray-500:    #8e8e8e !default;
+$gray-600:    #707070 !default;
+$black:       #212121 !default;
+$leman:       #00A79F !default;
+$canard:      #007480 !default;
+$canard-dark: #004248 !default;
 
 $grays: () !default;
 $grays: map-merge((
@@ -56,6 +59,7 @@ $theme-colors: () !default;
 $theme-colors: map-merge((
   "primary":    $primary,
   "secondary":  $secondary,
+  "tertiary":   $canard,
   "success":    $success,
   "info":       $info,
   "warning":    $warning,

package/assets/config/colors.json

@@ -9,5 +9,6 @@
   "$gray-600": "#707070",
   "$black": "#212121",
   "$leman": "#00A79F",
-  "$canard": "#007480"
+  "$canard": "#007480",
+  "$canard-dark": "#004248"
 }

package/dist/components/atoms/button/button-tertiary-states.twig

@@ -0,0 +1,4 @@
+<button class="btn btn-tertiary hover">Tertiary hover</button>
+<button class="btn btn-tertiary active">Tertiary active</button>
+<button class="btn btn-tertiary focus">Tertiary focus</button>
+<button class="btn btn-tertiary" disabled>Tertiary disabled</button>

package/dist/components/atoms/button/button-tertiary.twig

@@ -0,0 +1 @@
+<button class="btn btn-tertiary">Tertiary action</button>

package/dist/components/atoms/button/button.yml

@@ -22,6 +22,14 @@ variants:
     title: Secondary states preview
     notes: |
       *For previewing purposes only. **Do not use in production!***
+  - name: tertiary
+    title: Button tertiary
+    notes: |
+      For less aggressive buttons that are still in line with the EPFL graphic charter.
+  - name: tertiary-states
+    title: Tertiary states preview
+    notes: |
+      *For previewing purposes only. **Do not use in production!***
 notes: |
   Button is your interaction friend when you want people to complete an action. By clicking a button, people expect to trigger an event, confirm a form or load a new page. Don't put many buttons on one single page. The primary action should be obvious for people.
 

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

@@ -1,18 +1,19 @@
+{% set avatar_path = avatar_path|default("./images/styleguide/people/avatar-") %}
 <picture>
   <source
     media="(min-width: 1140px)"
-    srcset="https://via.placeholder.com/95x95.jpg 1x,https://via.placeholder.com/190x190.jpg 2x">
+    srcset="{{avatar_path}}120x120.jpg 1x, {{avatar_path}}256x256.jpg 2x">
   <source
     media="(min-width: 960px)"
-    srcset="https://via.placeholder.com/95x95.jpg 1x,https://via.placeholder.com/190x190.jpg 2x">
+    srcset="{{avatar_path}}95x95.jpg 1x, {{avatar_path}}180x180.jpg 2x">
   <source
     media="(min-width: 720px)"
-    srcset="https://via.placeholder.com/80x80.jpg 1x,https://via.placeholder.com/160x160.jpg 2x">
+    srcset="{{avatar_path}}80x80.jpg 1x, {{avatar_path}}160x160.jpg 2x">
   <source
     media="(min-width: 541px)"
-    srcset="https://via.placeholder.com/60x60.jpg 1x,https://via.placeholder.com/120x120.jpg 2x">
+    srcset="{{avatar_path}}60x60.jpg 1x, {{avatar_path}}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">
+    srcset="{{avatar_path}}95x95.jpg 1x, {{avatar_path}}180x180.jpg 2x">
+  <img src="{{avatar_path}}120x120.jpg" class="img-fluid rounded-circle" alt="ALT">
 </picture>

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

@@ -1,19 +1,19 @@
-{% set cover_path = cover_path|default("https://via.placeholder.com/") %}
+{% set cover_path = cover_path|default("./images/styleguide/teaser/news-teaser-") %}
 <picture>
   <source
     media="(min-width: 1140px)"
-    srcset="{{cover_path}}1920x1080.jpg 1x,{{cover_path}}2880x1620.jpg 2x">
+    srcset="{{cover_path}}1920x1080.jpg 1x,{{cover_path}}2240x1260.jpg 2x">
   <source
     media="(min-width: 960px)"
-    srcset="{{cover_path}}1140x641.jpg 1x,{{cover_path}}2280x1283.jpg 2x">
+    srcset="{{cover_path}}1140x641.jpg 1x,{{cover_path}}2240x1260.jpg 2x">
   <source
     media="(min-width: 720px)"
-    srcset="{{cover_path}}960x540.jpg 1x,{{cover_path}}1920x1080.jpg 2x">
+    srcset="{{cover_path}}928x520.jpg 1x,{{cover_path}}1920x1080.jpg 2x">
   <source
     media="(min-width: 541px)"
-    srcset="{{cover_path}}720x405.jpg 1x,{{cover_path}}1440x810.jpg 2x">
+    srcset="{{cover_path}}768x432.jpg 1x,{{cover_path}}1440x810.jpg 2x">
   <source
     media="(max-width: 540px)"
-    srcset="{{cover_path}}540x304.jpg 1x,{{cover_path}}1080x608.jpg 2x">
+    srcset="{{cover_path}}576x324.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

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

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

@@ -1,18 +1,19 @@
+{% set img_path = img_path|default("./images/styleguide/teaser/news-teaser-") %}
 <picture>
   <source
     media="(min-width: 1140px)"
-    srcset="https://via.placeholder.com/1140x1140.jpg 1x,https://via.placeholder.com/2280x2280.jpg 2x">
+    srcset="{{img_path}}480x480.jpg 1x, {{img_path}}780x780.jpg 2x">
   <source
     media="(min-width: 960px)"
-    srcset="https://via.placeholder.com/1140x1140.jpg 1x,https://via.placeholder.com/2280x2280.jpg 2x">
+    srcset="{{img_path}}360x360.jpg 1x, {{img_path}}780x780.jpg 2x">
   <source
     media="(min-width: 720px)"
-    srcset="https://via.placeholder.com/960x960.jpg 1x,https://via.placeholder.com/1920x1920.jpg 2x">
+    srcset="{{img_path}}360x360.jpg 1x, {{img_path}}640x640.jpg 2x">
   <source
     media="(min-width: 541px)"
-    srcset="https://via.placeholder.com/240x240.jpg 1x,https://via.placeholder.com/480x480.jpg 2x">
+    srcset="{{img_path}}780x780.jpg 1x, {{img_path}}1440x1440.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">
+    srcset="{{img_path}}640x640.jpg 1x, {{img_path}}1080x1080.jpg 2x">
+  <img src="{{img_path}}780x780.jpg" class="img-fluid" alt="ALT">
 </picture>

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

@@ -1,18 +1,19 @@
+{% set img_path = img_path|default("./images/styleguide/teaser/news-teaser-") %}
 <picture>
   <source
     media="(min-width: 1140px)"
-    srcset="https://via.placeholder.com/380x214.jpg 1x,https://via.placeholder.com/760x428.jpg 2x">
+    srcset="{{img_path}}380x214.jpg 1x, {{img_path}}768x432.jpg 2x">
   <source
     media="(min-width: 960px)"
-    srcset="https://via.placeholder.com/380x214.jpg 1x,https://via.placeholder.com/760x428.jpg 2x">
+    srcset="{{img_path}}380x214.jpg 1x, {{img_path}}768x432.jpg 2x">
   <source
     media="(min-width: 720px)"
-    srcset="https://via.placeholder.com/320x180.jpg 1x,https://via.placeholder.com/640x360.jpg 2x">
+    srcset="{{img_path}}320x180.jpg 1x, {{img_path}}640x360.jpg 2x">
   <source
     media="(min-width: 541px)"
-    srcset="https://via.placeholder.com/720x405.jpg 1x,https://via.placeholder.com/1440x810.jpg 2x">
+    srcset="{{img_path}}768x432.jpg 1x, {{img_path}}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">
+    srcset="{{img_path}}576x324.jpg 1x, {{img_path}}1080x608.jpg 2x">
+  <img src="{{img_path}}380x214.jpg" class="img-fluid" alt="ALT">
 </picture>

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

@@ -1,18 +1,19 @@
+{% set portrait_path = portrait_path|default("./images/styleguide/people/portrait-") %}
 <picture>
   <source
     media="(min-width: 1140px)"
-    srcset="https://via.placeholder.com/253x360.jpg 1x,https://via.placeholder.com/506x720.jpg 2x">
+    srcset="{{portrait_path}}253x360.jpg 1x, {{portrait_path}}506x720.jpg 2x">
   <source
     media="(min-width: 960px)"
-    srcset="https://via.placeholder.com/211x300.jpg 1x,https://via.placeholder.com/422x600.jpg 2x">
+    srcset="{{portrait_path}}211x300.jpg 1x, {{portrait_path}}422x600.jpg 2x">
   <source
     media="(min-width: 720px)"
-    srcset="https://via.placeholder.com/253x360.jpg 1x,https://via.placeholder.com/506x720.jpg 2x">
+    srcset="{{portrait_path}}253x360.jpg 1x, {{portrait_path}}506x720.jpg 2x">
   <source
     media="(min-width: 541px)"
-    srcset="https://via.placeholder.com/253x360.jpg 1x,https://via.placeholder.com/506x720.jpg 2x">
+    srcset="{{portrait_path}}253x360.jpg 1x, {{portrait_path}}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">
+    srcset="{{portrait_path}}211x300.jpg 1x, {{portrait_path}}422x600.jpg 2x">
+  <img src="{{portrait_path}}506x720.jpg" class="img-fluid" alt="ALT">
 </picture>

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

@@ -1,18 +1,19 @@
+{% set img_question = img_question|default("./images/styleguide/homepage/7-science-question/science-question-") %}
 <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">
+    srcset="{{img_question}}540x304.jpg 1x, {{img_question}}1080x608.jpg 2x">
   <source
     media="(min-width: 960px)"
-    srcset="https://via.placeholder.com/475x267.jpg 1x,https://via.placeholder.com/950x534.jpg 2x">
+    srcset="{{img_question}}960x540.jpg 1x, {{img_question}}1440x810.jpg 2x">
   <source
     media="(min-width: 720px)"
-    srcset="https://via.placeholder.com/400x225.jpg 1x,https://via.placeholder.com/800x450.jpg 2x">
+    srcset="{{img_question}}720x405.jpg 1x, {{img_question}}1080x608.jpg 2x">
   <source
     media="(min-width: 541px)"
-    srcset="https://via.placeholder.com/720x405.jpg 1x,https://via.placeholder.com/1440x810.jpg 2x">
+    srcset="{{img_question}}540x304.jpg 1x, {{img_question}}1080x608.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">
+    srcset="{{img_question}}540x304.jpg 1x, {{img_question}}1080x608.jpg 2x">
+  <img src="{{img_question}}720x405.jpg" class="img-fluid" alt="ALT">
 </picture>

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

@@ -1,8 +1,19 @@
+{% set thumb_path = thumb_path|default("./images/styleguide/news-thumbs/news_thumb-") %}
 <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">
+  <source
+    media="(min-width: 1140px)"
+    srcset="{{thumb_path}}120x120.jpg 1x, {{thumb_path}}240x240.jpg 2x">
+  <source
+    media="(min-width: 960px)"
+    srcset="{{thumb_path}}120x120.jpg 1x, {{thumb_path}}240x240.jpg 2x">
+  <source
+    media="(min-width: 720px)"
+    srcset="{{thumb_path}}80x80.jpg 1x, {{thumb_path}}160x160.jpg 2x">
+  <source
+    media="(min-width: 541px)"
+    srcset="{{thumb_path}}120x120.jpg 1x, {{thumb_path}}240x240.jpg 2x">
+  <source
+    media="(max-width: 540px)"
+    srcset="{{thumb_path}}540x540.jpg 1x, {{thumb_path}}1080x1080.jpg 2x">
+  <img src="{{thumb_path}}120x120.jpg" class="img-fluid" alt="ALT">
 </picture>

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

@@ -1,18 +1,19 @@
+{% set img_path = img_path|default("./images/styleguide/teaser/news-teaser-") %}
 <picture>
   <source
     media="(min-width: 1140px)"
-    srcset="https://via.placeholder.com/570x321.jpg 1x,https://via.placeholder.com/1140x641.jpg 2x">
+    srcset="{{img_path}}576x324.jpg 1x, {{img_path}}1140x641.jpg 2x">
   <source
     media="(min-width: 960px)"
-    srcset="https://via.placeholder.com/570x321.jpg 1x,https://via.placeholder.com/1140x641.jpg 2x">
+    srcset="{{img_path}}576x324.jpg 1x, {{img_path}}1140x641.jpg 2x">
   <source
     media="(min-width: 720px)"
-    srcset="https://via.placeholder.com/480x270.jpg 1x,https://via.placeholder.com/960x540.jpg 2x">
+    srcset="{{img_path}}508x286.jpg 1x, {{img_path}}928x520.jpg 2x">
   <source
     media="(min-width: 541px)"
-    srcset="https://via.placeholder.com/720x405.jpg 1x,https://via.placeholder.com/1440x810.jpg 2x">
+    srcset="{{img_path}}768x432.jpg 1x, {{img_path}}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">
+    srcset="{{img_path}}576x324.jpg 1x, {{img_path}}1080x608.jpg 2x">
+  <img src="{{img_path}}576x324.jpg" class="img-fluid" alt="image description">
 </picture>

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

@@ -12,7 +12,7 @@ variants:
       Picture used in 'Organism > Fullwidth teaser' and 'News > Highlighted'.
   - name: avatar
     title: Avatar
-    wrapper: col-sm-4 col-md-2 col-lg-1
+    wrapper: col-sm-4 col-md-2
     notes: |
       Avatar picture need an equal height and width in order to be displayed as a circle
   - name: portrait
@@ -25,6 +25,7 @@ variants:
     wrapper: col-md-4
   - name: one-third-square
     title: One third Square picture
+    wrapper: col-md-4
   - name: news-thumb
     title: News Listing Thumbnail
     wrapper: col-3 col-md-2
@@ -38,6 +39,6 @@ notes: |
 
   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/).
+  This page presents all image formats defined in Element and all their related sizes. **This implies implementing 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/social-icon/social-icon-group.twig

@@ -27,6 +27,9 @@
   <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: 'Bluesky', icon: 'icon-bluesky', 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>

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

@@ -12,12 +12,10 @@
   <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/' } %}
+    {% 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://social.epfl.ch/@epfl/' } %}
   </li>
-  {% endif %}
-    {%  if social_tiktok %}
+  {%  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>
@@ -25,7 +23,22 @@
   <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>
+  {%  if social_bluesky %}
+  <li>
+    {% include '@atoms/social-icon/social-icon-single-link.twig' with { pretty_name: 'Follow us on Bluesky', icon: 'icon-bluesky', round: round, discrete: discrete, negative: negative, url: 'https://bsky.app' } %}
+  </li>
+  {% endif %}
   <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>
+  {%  if social_github %}
+  <li>
+    {% include '@atoms/social-icon/social-icon-single-link.twig' with { pretty_name: 'Follow us on GitHub', icon: 'github', round: round, discrete: discrete, negative: negative, url: 'https://github.com/epfl-si' } %}
+  </li>
+  {% endif %}
+  {%  if social_gitlab %}
+  <li>
+    {% include '@atoms/social-icon/social-icon-single-link.twig' with { pretty_name: 'Follow us on GitLab', icon: 'gitlab', round: round, discrete: discrete, negative: negative, url: 'https://gitlab.epfl.ch' } %}
+  </li>
+  {% endif %}
 </ul>

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

@@ -30,4 +30,7 @@ notes: |
   * `tiktok`
   * `whatsapp`
   * `x`
-  * `youtube`
+  * `bluesky`
+  * `youtube`
+  * `github`
+  * `gitlab`

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

@@ -6,6 +6,7 @@
 <h5>Link</h5>
 <a href="#" class="tag tag-primary">Primary</a>
 <a href="#" class="tag tag-secondary">Secondary</a>
+<a href="#" class="tag tag-tertiary">Tertiary</a>
 <hr>
 <h5>removable</h5>
 <button class="btn tag tag-primary">
@@ -16,10 +17,15 @@
   Secondary
   <span class="btn btn-secondary remove" title="Remove">×</span>
 </button>
+<button class="btn tag tag-tertiary">
+  Tertiary
+  <span class="btn btn-tertiary 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-tertiary">Tertiary</span>
 <span class="tag tag-sm tag-light">Light</span>
 <hr>

package/dist/components/molecules/breadcrumb/breadcrumb-tagged.twig

@@ -6,7 +6,7 @@
       </a>
     </li>
     <li class="breadcrumb-item breadcrumb-tags-wrapper">
-      <a href="#" class="tag tag-primary">School</a>
+      <a href="#" class="tag tag-tertiary">School</a>
       <a href="#" class="tag tag-primary">Innovation</a>
       <a href="#" class="tag tag-primary">W3C</a>
     </li>

package/dist/components/molecules/carousel/carousel.yml

@@ -1,7 +1,7 @@
 name: carousel
 title: Carousel
 notes: |
-  Basic carousel using Bootstrap functionality: https://getbootstrap.com/docs/4.6/components/carousel/.
+  Basic carousel using Bootstrap's [Carousel](https://getbootstrap.com/docs/4.6/components/carousel/) functionality.
 
   Use the 'data-interval' attribute to change the automatic slide delay.
 

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

@@ -1,4 +1,3 @@
-{% set icon = icon|default("https://via.placeholder.com/") %}
 <a class="card link-trapeze-horizontal" href="#">
   <div class="card border-0 bg-white m-0 h-100">
     <div class="card-header border-0">

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

@@ -1,4 +1,3 @@
-{% set icon = icon|default("https://via.placeholder.com/") %}
 <div class="card">
   <div class="card border-0 bg-white m-0 h-100">
     <div class="card-header border-0">

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

@@ -1,4 +1,3 @@
-{% 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">

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

@@ -1,4 +1,3 @@
-{% 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">

package/dist/components/molecules/social/social-follow.twig

@@ -5,7 +5,7 @@
       <p class="social-share-text">
         Suivez nous sur <span class="sr-only">les réseaux sociaux</span>
       </p>
-      {% include '@atoms/social-icon/social-icon-link-group.twig' with { discrete: true, social_mastodon: true, social_tiktok: true } %}
+      {% include '@atoms/social-icon/social-icon-link-group.twig' with { discrete: true, social_mastodon: true, social_bluesky: true, social_tiktok: true, social_github: true, social_gitlab: true } %}
     </div>
 
   </div>

package/dist/components/molecules/social/social.twig

@@ -43,6 +43,15 @@
               url: '#'
             } %}
           </li>
+          <li>
+            {% include '@atoms/social-icon/social-icon-single-link.twig' with {
+              pretty_name: 'Share on Bluesky',
+              icon: 'icon-bluesky',
+              round: round,
+              discrete: true,
+              url: '#'
+            } %}
+          </li>
         </ul>
       </div>
 

package/dist/components/molecules/sponsor/sponsor-link.twig

@@ -0,0 +1,8 @@
+<figure>
+  <a href="#">
+    <img class="img-fluid d-block mx-auto" src="./images/styleguide/illustrations/brand-identity-teaser.png" alt="EPFL">
+  </a>
+  <hr>
+  <figcaption><a href="#">Lorem ipsum dolor sit amet.</a></figcaption>
+  <hr class="bold">
+</figure>

package/dist/components/molecules/sponsor/sponsor.twig

@@ -1,5 +1,5 @@
 <figure>
-  <img class="img-fluid d-block mx-auto" src="https://via.placeholder.com/300x150.jpg" alt="Sponsor">
+  <img class="img-fluid d-block mx-auto" src="./images/styleguide/illustrations/brand-identity-teaser.png" alt="EPFL">
   <hr>
   <figcaption>Lorem ipsum dolor sit amet.</figcaption>
   <hr class="bold">

package/dist/components/molecules/sponsor/sponsor.yml

@@ -1,2 +1,5 @@
 title: Sponsor
 name: sponsor
+variants:
+  - name: link
+    title: Sponsor with link

package/dist/components/organisms/footer/footer-legal.twig

@@ -11,7 +11,7 @@
     {% endif %}
   </div>
   <div>
-    <p>&copy; 2024 EPFL, tous droits réservés</p>
+    <p>&copy; 2025 EPFL, tous droits réservés</p>
   </div>
 </div>
 {% endif %}
@@ -26,7 +26,7 @@
     {% endif %}
   </div>
   <div>
-    <p>&copy; 2024 EPFL, all rights reserved</p>
+    <p>&copy; 2025 EPFL, all rights reserved</p>
   </div>
 </div>
 {% endif %}
@@ -41,7 +41,7 @@
       {% endif %}
     </div>
     <div>
-      <p>&copy; 2024 EPFL, alle Rechte vorbehalten</p>
+      <p>&copy; 2025 EPFL, alle Rechte vorbehalten</p>
     </div>
   </div>
 {% endif %}

package/dist/components/organisms/sponsor-list/sponsor-list-link.twig

@@ -0,0 +1,14 @@
+<div class="row justify-content-center">
+  <div class="col-md-3">
+    {% include '@molecules/sponsor/sponsor-link.twig' %}
+  </div>
+  <div class="col-md-3">
+    {% include '@molecules/sponsor/sponsor-link.twig' %}
+  </div>
+  <div class="col-md-3">
+    {% include '@molecules/sponsor/sponsor-link.twig' %}
+  </div>
+  <div class="col-md-3">
+    {% include '@molecules/sponsor/sponsor-link.twig' %}
+  </div>
+</div>

package/dist/components/organisms/sponsor-list/sponsor-list.twig

@@ -0,0 +1,14 @@
+<div class="row justify-content-center">
+  <div class="col-md-3">
+    {% include '@molecules/sponsor/sponsor.twig' %}
+  </div>
+  <div class="col-md-3">
+    {% include '@molecules/sponsor/sponsor.twig' %}
+  </div>
+  <div class="col-md-3">
+    {% include '@molecules/sponsor/sponsor.twig' %}
+  </div>
+  <div class="col-md-3">
+    {% include '@molecules/sponsor/sponsor.twig' %}
+  </div>
+</div>

package/dist/components/organisms/sponsor-list/sponsor-list.yml

@@ -0,0 +1,5 @@
+title: Sponsor List
+name: sponsor-list
+variants:
+  - name: link
+    title: Sponsor List with link

package/dist/components/pages/basic-page/basic-page.twig

@@ -1,3 +1,4 @@
+{% set isSpecial = false %}
 {% extends "@templates/base/base.twig" %}
 
 {% block header %}

package/dist/components/pages/campus/campus.twig

@@ -1,3 +1,4 @@
+{% set isSpecial = false %}
 {% extends "@templates/base/base.twig" %}
 
 {% block content %}

package/dist/components/pages/education/education.twig

@@ -1,3 +1,4 @@
+{% set isSpecial = false %}
 {% extends "@templates/base/base.twig" %}
 
 {% block content %}

package/dist/components/pages/facultes/facultes.twig

@@ -1,3 +1,4 @@
+{% set isSpecial = false %}
 {% extends "@templates/base/base.twig" %}
 
 {% set nav_aside_items = [{

package/dist/components/pages/innovation/innovation.twig

@@ -1,3 +1,4 @@
+{% set isSpecial = false %}
 {% extends "@templates/base/base.twig" %}
 
 {% block content %}