Carousel variant for news items.

assets/components/molecules/carousel/carousel-news.twig

@@ -0,0 +1,49 @@
+<div id="carouselNewsExample" class="carousel carousel-news slide" data-ride="carousel">
+  <div class="carousel-inner">
+    <div class="carousel-item active">
+      {% include '@atoms/picture/picture-cover.twig' with {"cover_path": "./images/styleguide/teaser/news-teaser-3-"} %}
+
+      <div class="carousel-caption d-none d-md-block">
+        SNSF Scientific Image Competition - "Bees and chips", by Rafael Barmak, EPFL winner 2023. SNSF Scientific Image Competition - "Bees and chips", by Rafael Barmak, EPFL winner 2023
+      </div>
+    </div>
+    <div class="carousel-item">
+      {% include '@atoms/picture/picture-cover.twig' with {"cover_path": "./images/styleguide/teaser/news-teaser-2-"} %}
+
+      <div class="carousel-caption d-none d-md-block">
+        Le projet Double Deck en images
+      </div>
+    </div>
+    <div class="carousel-item">
+      {% include '@atoms/picture/picture-cover.twig' with {"cover_path": "./images/styleguide/teaser/news-teaser-3-"} %}
+
+      <div class="carousel-caption d-none d-md-block">
+        SNSF Scientific Image Competition - "Bees and chips", by Rafael Barmak, EPFL winner 2023
+      </div>
+    </div>
+    <div class="carousel-item">
+      {% include '@atoms/picture/picture-cover.twig' with {"cover_path": "./images/styleguide/teaser/news-teaser-2-"} %}
+
+      <div class="carousel-caption d-none d-md-block">
+        Le projet Double Deck en images
+      </div>
+    </div>
+  </div>
+
+  <div class="carousel-navigation">
+    <button class="carousel-control carousel-control-prev" type="button" data-slide="prev" data-target="#carouselNewsExample">
+      {% include "@atoms/icon/icon.twig" with { icon: 'icon-chevron-left' } %}
+      <span class="sr-only">Previous</span>
+    </button>
+    <button class="carousel-control carousel-control-next" type="button" data-slide="next" data-target="#carouselNewsExample">
+      {% include "@atoms/icon/icon.twig" with { icon: 'icon-chevron-right' } %}
+      <span class="sr-only">Next</span>
+    </button>
+    <ol class="carousel-indicators">
+      {% for i in 1..4 %}
+      <li data-target="#carouselNewsExample" data-slide-to="{{loop.index0}}" {% if loop.index0 == 0 %} class="active"{% endif %}></li>
+      {% endfor %}
+    </ol>
+  </div>
+</div>
+

assets/components/molecules/carousel/carousel.scss

@@ -112,3 +112,76 @@
     }
   }
 }
+
+.carousel-news {
+  .carousel-inner {
+    padding-bottom: 2.625rem;
+  }
+
+  .carousel-control {
+    width: 3rem;
+    height: 3rem;
+    padding: 0;
+    opacity: 1;
+
+    .icon {
+      background: transparent;
+      border: 1px solid $border-color;
+      color: $red;
+      border-radius: 0;
+    }
+  }
+
+  .carousel-indicators:before  {
+    background: transparent;
+  }
+
+  .carousel-caption {
+    bottom: auto;
+    left: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+    width: 100%;
+    text-align: left;
+    margin-top: 0.5rem;
+    margin-bottom: 0;
+    font-size: 1rem;
+    font-weight: $font-weight-bold;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: $gray-500;
+  }
+
+  .carousel-navigation {
+    display: flex;
+    gap: 0.5rem;
+
+    @include media-breakpoint-down(lg) {
+      justify-content: center;
+      padding-top: 1rem;
+    }
+
+    .carousel-control,
+    .carousel-indicators {
+      position: relative;
+      padding: 0;
+    }
+
+    .carousel-indicators {
+      display: flex;
+      align-items: center;
+
+      li {
+        background-color: $gray-200;
+        width: 2rem;
+        height: 0.375rem;
+        border-radius: 0;
+
+        &.active {
+          background-color: $red;
+        }
+      }
+    }
+  }
+}

assets/components/molecules/carousel/carousel.yml

@@ -1,5 +1,8 @@
 name: carousel
 title: Carousel
+variants:
+  - name: news
+    title: News carousel
 notes: |
   Basic carousel using Bootstrap's [Carousel](https://getbootstrap.com/docs/4.6/components/carousel/) functionality.