The related articles component uses the inverted slider style.
<section class="sds-section -sectionSunken -sectionInverted -overflowHidden">
<div class="sds-section__innerWrapper">
<div class="sds-section__inner">
<div class="container">
<div class="sds-stack3xl">
<div class="row no-bottom-gutter justify-content-between">
<div class="col col-lg-8 col-xl-6">
<div class="sds-section__textColor sds-stack3xl">
<h2 class="h2">Le blog autour de vos finances</h2>
<p class="sds-textBodyLg">Est-ce que vous souhaitez rester informés en termes de gestion financière ou recevoir de nouvelles idées pour optimiser votre patrimoine ? Découvrez tous nos articles dédiés à l’univers financier !</p>
</div>
</div>
<div class="col-auto sds-relatedArticles__headerBtn">
<a href="" class="sds-btn -btnSecondary -btnInverse">
<span class="sds-btn__text">Découvrez tous nos articles</span>
<span class="sds-icon sds-icon-arrownext"></span>
</a>
</div>
</div>
<div class="sds-slider -inverted -overflowVisible">
<!-- adjust row class for spacing between slides here -->
<div class="row row-xs no-bottom-gutter align-items-start">
<div class="sds-slider__inner swiper" data-swiper>
<!-- Additional required wrapper -->
<!-- adjust row class for spacing between slides here -->
<ul class="swiper-wrapper row row-xs flex-nowrap align-items-stretch-immediate no-bottom-gutter list-unstyled">
<!-- Slides -->
<li class="swiper-slide col-11 col-sm-8 col-md-5 col-lg-5">
<article class="sds-blogArticle sds-box">
<a href="#" class="sds-blogArticle__inner d-flex flex-column flex-grow-1">
<header class="sds-blogArticle__header text-center">
<img class="sds-blogArticle__img" src="../../media/illustrations/images/myTax.jpg" alt="">
<div class="sds-blogArticle__icon">
<img class="img-fluid" src="https://design.spuerkeess.lu/media/illustrations/svg240x240/spot/sdsillu-rocketship.svg" alt="">
</div>
</header>
<div class="sds-blogArticle__content sds-stackMd text-center">
<div class="sds-stackSm">
<span class="sds-blogArticle__helper sds-textHelperSmall">Aujourd'hui</span>
<div class="sds-blogArticle__subTitle">Entrepreneuriat</div>
<div class="h4 sds-textEllipsisSm">Slide 1</div>
</div>
<p class="sds-blogArticle__text sds-textEllipsisLg">Certains d’entre vous ne se souviennent même pas qu’il existait un temps où il fallait planifier le retrait de devises avant un voyage. Depuis plus de deux décennies, la zone euro nous permet de voyager spontanément. Pour la plupart des destinations européennes, plus besoin de passer à la banque préalablement pour retirer des devises !</p>
</div>
</a>
</article>
</li>
<li class="swiper-slide col-11 col-sm-8 col-md-5 col-lg-5">
<article class="sds-blogArticle sds-box">
<a href="#" class="sds-blogArticle__inner d-flex flex-column flex-grow-1">
<header class="sds-blogArticle__header text-center">
<img class="sds-blogArticle__img" src="../../media/illustrations/images/myTax.jpg" alt="">
<div class="sds-blogArticle__icon">
<img class="img-fluid" src="https://design.spuerkeess.lu/media/illustrations/svg240x240/spot/sdsillu-rocketship.svg" alt="">
</div>
</header>
<div class="sds-blogArticle__content sds-stackMd text-center">
<div class="sds-stackSm">
<span class="sds-blogArticle__helper sds-textHelperSmall">Aujourd'hui</span>
<div class="sds-blogArticle__subTitle">Entrepreneuriat</div>
<div class="h4 sds-textEllipsisSm">Slide 2</div>
</div>
<p class="sds-blogArticle__text sds-textEllipsisLg">Certains d’entre vous ne se souviennent même pas qu’il existait un temps où il fallait planifier le retrait de devises avant un voyage. Depuis plus de deux décennies, la zone euro nous permet de voyager spontanément. Pour la plupart des destinations européennes, plus besoin de passer à la banque préalablement pour retirer des devises !</p>
</div>
</a>
</article>
</li>
<li class="swiper-slide col-11 col-sm-8 col-md-5 col-lg-5">
<article class="sds-blogArticle sds-box">
<a href="#" class="sds-blogArticle__inner d-flex flex-column flex-grow-1">
<header class="sds-blogArticle__header text-center">
<img class="sds-blogArticle__img" src="../../media/illustrations/images/myTax.jpg" alt="">
<div class="sds-blogArticle__icon">
<img class="img-fluid" src="https://design.spuerkeess.lu/media/illustrations/svg240x240/spot/sdsillu-rocketship.svg" alt="">
</div>
</header>
<div class="sds-blogArticle__content sds-stackMd text-center">
<div class="sds-stackSm">
<span class="sds-blogArticle__helper sds-textHelperSmall">Aujourd'hui</span>
<div class="sds-blogArticle__subTitle">Entrepreneuriat</div>
<div class="h4 sds-textEllipsisSm">Slide 3</div>
</div>
<p class="sds-blogArticle__text sds-textEllipsisLg">Certains d’entre vous ne se souviennent même pas qu’il existait un temps où il fallait planifier le retrait de devises avant un voyage. Depuis plus de deux décennies, la zone euro nous permet de voyager spontanément. Pour la plupart des destinations européennes, plus besoin de passer à la banque préalablement pour retirer des devises !</p>
</div>
</a>
</article>
</li>
<li class="swiper-slide col-11 col-sm-8 col-md-5 col-lg-5">
<article class="sds-blogArticle sds-box">
<a href="#" class="sds-blogArticle__inner d-flex flex-column flex-grow-1">
<header class="sds-blogArticle__header text-center">
<img class="sds-blogArticle__img" src="../../media/illustrations/images/myTax.jpg" alt="">
<div class="sds-blogArticle__icon">
<img class="img-fluid" src="https://design.spuerkeess.lu/media/illustrations/svg240x240/spot/sdsillu-rocketship.svg" alt="">
</div>
</header>
<div class="sds-blogArticle__content sds-stackMd text-center">
<div class="sds-stackSm">
<span class="sds-blogArticle__helper sds-textHelperSmall">Aujourd'hui</span>
<div class="sds-blogArticle__subTitle">Entrepreneuriat</div>
<div class="h4 sds-textEllipsisSm">Slide 4</div>
</div>
<p class="sds-blogArticle__text sds-textEllipsisLg">Certains d’entre vous ne se souviennent même pas qu’il existait un temps où il fallait planifier le retrait de devises avant un voyage. Depuis plus de deux décennies, la zone euro nous permet de voyager spontanément. Pour la plupart des destinations européennes, plus besoin de passer à la banque préalablement pour retirer des devises !</p>
</div>
</a>
</article>
</li>
<li class="swiper-slide col-11 col-sm-8 col-md-5 col-lg-5">
<article class="sds-blogArticle sds-box">
<a href="#" class="sds-blogArticle__inner d-flex flex-column flex-grow-1">
<header class="sds-blogArticle__header text-center">
<img class="sds-blogArticle__img" src="../../media/illustrations/images/myTax.jpg" alt="">
<div class="sds-blogArticle__icon">
<img class="img-fluid" src="https://design.spuerkeess.lu/media/illustrations/svg240x240/spot/sdsillu-rocketship.svg" alt="">
</div>
</header>
<div class="sds-blogArticle__content sds-stackMd text-center">
<div class="sds-stackSm">
<span class="sds-blogArticle__helper sds-textHelperSmall">Aujourd'hui</span>
<div class="sds-blogArticle__subTitle">Entrepreneuriat</div>
<div class="h4 sds-textEllipsisSm">Slide 5</div>
</div>
<p class="sds-blogArticle__text sds-textEllipsisLg">Certains d’entre vous ne se souviennent même pas qu’il existait un temps où il fallait planifier le retrait de devises avant un voyage. Depuis plus de deux décennies, la zone euro nous permet de voyager spontanément. Pour la plupart des destinations européennes, plus besoin de passer à la banque préalablement pour retirer des devises !</p>
</div>
</a>
</article>
</li>
<li class="swiper-slide col-11 col-sm-8 col-md-5 col-lg-5">
<article class="sds-blogArticle sds-box">
<a href="#" class="sds-blogArticle__inner d-flex flex-column flex-grow-1">
<header class="sds-blogArticle__header text-center">
<img class="sds-blogArticle__img" src="../../media/illustrations/images/myTax.jpg" alt="">
<div class="sds-blogArticle__icon">
<img class="img-fluid" src="https://design.spuerkeess.lu/media/illustrations/svg240x240/spot/sdsillu-rocketship.svg" alt="">
</div>
</header>
<div class="sds-blogArticle__content sds-stackMd text-center">
<div class="sds-stackSm">
<span class="sds-blogArticle__helper sds-textHelperSmall">Aujourd'hui</span>
<div class="sds-blogArticle__subTitle">Entrepreneuriat</div>
<div class="h4 sds-textEllipsisSm">Slide 6</div>
</div>
<p class="sds-blogArticle__text sds-textEllipsisLg">Certains d’entre vous ne se souviennent même pas qu’il existait un temps où il fallait planifier le retrait de devises avant un voyage. Depuis plus de deux décennies, la zone euro nous permet de voyager spontanément. Pour la plupart des destinations européennes, plus besoin de passer à la banque préalablement pour retirer des devises !</p>
</div>
</a>
</article>
</li>
<li class="swiper-slide col-11 col-sm-8 col-md-5 col-lg-5">
<article class="sds-blogArticle sds-box">
<a href="#" class="sds-blogArticle__inner d-flex flex-column flex-grow-1">
<header class="sds-blogArticle__header text-center">
<img class="sds-blogArticle__img" src="../../media/illustrations/images/myTax.jpg" alt="">
<div class="sds-blogArticle__icon">
<img class="img-fluid" src="https://design.spuerkeess.lu/media/illustrations/svg240x240/spot/sdsillu-rocketship.svg" alt="">
</div>
</header>
<div class="sds-blogArticle__content sds-stackMd text-center">
<div class="sds-stackSm">
<span class="sds-blogArticle__helper sds-textHelperSmall">Aujourd'hui</span>
<div class="sds-blogArticle__subTitle">Entrepreneuriat</div>
<div class="h4 sds-textEllipsisSm">Slide 7</div>
</div>
<p class="sds-blogArticle__text sds-textEllipsisLg">Certains d’entre vous ne se souviennent même pas qu’il existait un temps où il fallait planifier le retrait de devises avant un voyage. Depuis plus de deux décennies, la zone euro nous permet de voyager spontanément. Pour la plupart des destinations européennes, plus besoin de passer à la banque préalablement pour retirer des devises !</p>
</div>
</a>
</article>
</li>
<li class="swiper-slide col-11 col-sm-8 col-md-5 col-lg-5">
<article class="sds-blogArticle sds-box">
<a href="#" class="sds-blogArticle__inner d-flex flex-column flex-grow-1">
<header class="sds-blogArticle__header text-center">
<img class="sds-blogArticle__img" src="../../media/illustrations/images/myTax.jpg" alt="">
<div class="sds-blogArticle__icon">
<img class="img-fluid" src="https://design.spuerkeess.lu/media/illustrations/svg240x240/spot/sdsillu-rocketship.svg" alt="">
</div>
</header>
<div class="sds-blogArticle__content sds-stackMd text-center">
<div class="sds-stackSm">
<span class="sds-blogArticle__helper sds-textHelperSmall">Aujourd'hui</span>
<div class="sds-blogArticle__subTitle">Entrepreneuriat</div>
<div class="h4 sds-textEllipsisSm">Slide 8</div>
</div>
<p class="sds-blogArticle__text sds-textEllipsisLg">Certains d’entre vous ne se souviennent même pas qu’il existait un temps où il fallait planifier le retrait de devises avant un voyage. Depuis plus de deux décennies, la zone euro nous permet de voyager spontanément. Pour la plupart des destinations européennes, plus besoin de passer à la banque préalablement pour retirer des devises !</p>
</div>
</a>
</article>
</li>
<li class="swiper-slide col-11 col-sm-8 col-md-5 col-lg-5">
<article class="sds-blogArticle sds-box">
<a href="#" class="sds-blogArticle__inner d-flex flex-column flex-grow-1">
<header class="sds-blogArticle__header text-center">
<img class="sds-blogArticle__img" src="../../media/illustrations/images/myTax.jpg" alt="">
<div class="sds-blogArticle__icon">
<img class="img-fluid" src="https://design.spuerkeess.lu/media/illustrations/svg240x240/spot/sdsillu-rocketship.svg" alt="">
</div>
</header>
<div class="sds-blogArticle__content sds-stackMd text-center">
<div class="sds-stackSm">
<span class="sds-blogArticle__helper sds-textHelperSmall">Aujourd'hui</span>
<div class="sds-blogArticle__subTitle">Entrepreneuriat</div>
<div class="h4 sds-textEllipsisSm">Slide 9</div>
</div>
<p class="sds-blogArticle__text sds-textEllipsisLg">Certains d’entre vous ne se souviennent même pas qu’il existait un temps où il fallait planifier le retrait de devises avant un voyage. Depuis plus de deux décennies, la zone euro nous permet de voyager spontanément. Pour la plupart des destinations européennes, plus besoin de passer à la banque préalablement pour retirer des devises !</p>
</div>
</a>
</article>
</li>
<li class="swiper-slide col-11 col-sm-8 col-md-5 col-lg-5">
<article class="sds-blogArticle sds-box">
<a href="#" class="sds-blogArticle__inner d-flex flex-column flex-grow-1">
<header class="sds-blogArticle__header text-center">
<img class="sds-blogArticle__img" src="../../media/illustrations/images/myTax.jpg" alt="">
<div class="sds-blogArticle__icon">
<img class="img-fluid" src="https://design.spuerkeess.lu/media/illustrations/svg240x240/spot/sdsillu-rocketship.svg" alt="">
</div>
</header>
<div class="sds-blogArticle__content sds-stackMd text-center">
<div class="sds-stackSm">
<span class="sds-blogArticle__helper sds-textHelperSmall">Aujourd'hui</span>
<div class="sds-blogArticle__subTitle">Entrepreneuriat</div>
<div class="h4 sds-textEllipsisSm">Slide 10</div>
</div>
<p class="sds-blogArticle__text sds-textEllipsisLg">Certains d’entre vous ne se souviennent même pas qu’il existait un temps où il fallait planifier le retrait de devises avant un voyage. Depuis plus de deux décennies, la zone euro nous permet de voyager spontanément. Pour la plupart des destinations européennes, plus besoin de passer à la banque préalablement pour retirer des devises !</p>
</div>
</a>
</article>
</li>
<li class="swiper-slide col-11 col-sm-8 col-md-5 col-lg-5">
<article class="sds-blogArticle sds-box">
<a href="#" class="sds-blogArticle__inner d-flex flex-column flex-grow-1">
<header class="sds-blogArticle__header text-center">
<img class="sds-blogArticle__img" src="../../media/illustrations/images/myTax.jpg" alt="">
<div class="sds-blogArticle__icon">
<img class="img-fluid" src="https://design.spuerkeess.lu/media/illustrations/svg240x240/spot/sdsillu-rocketship.svg" alt="">
</div>
</header>
<div class="sds-blogArticle__content sds-stackMd text-center">
<div class="sds-stackSm">
<span class="sds-blogArticle__helper sds-textHelperSmall">Aujourd'hui</span>
<div class="sds-blogArticle__subTitle">Entrepreneuriat</div>
<div class="h4 sds-textEllipsisSm">Slide 11</div>
</div>
<p class="sds-blogArticle__text sds-textEllipsisLg">Certains d’entre vous ne se souviennent même pas qu’il existait un temps où il fallait planifier le retrait de devises avant un voyage. Depuis plus de deux décennies, la zone euro nous permet de voyager spontanément. Pour la plupart des destinations européennes, plus besoin de passer à la banque préalablement pour retirer des devises !</p>
</div>
</a>
</article>
</li>
<li class="swiper-slide col-11 col-sm-8 col-md-5 col-lg-5">
<article class="sds-blogArticle sds-box">
<a href="#" class="sds-blogArticle__inner d-flex flex-column flex-grow-1">
<header class="sds-blogArticle__header text-center">
<img class="sds-blogArticle__img" src="../../media/illustrations/images/myTax.jpg" alt="">
<div class="sds-blogArticle__icon">
<img class="img-fluid" src="https://design.spuerkeess.lu/media/illustrations/svg240x240/spot/sdsillu-rocketship.svg" alt="">
</div>
</header>
<div class="sds-blogArticle__content sds-stackMd text-center">
<div class="sds-stackSm">
<span class="sds-blogArticle__helper sds-textHelperSmall">Aujourd'hui</span>
<div class="sds-blogArticle__subTitle">Entrepreneuriat</div>
<div class="h4 sds-textEllipsisSm">Slide 12</div>
</div>
<p class="sds-blogArticle__text sds-textEllipsisLg">Certains d’entre vous ne se souviennent même pas qu’il existait un temps où il fallait planifier le retrait de devises avant un voyage. Depuis plus de deux décennies, la zone euro nous permet de voyager spontanément. Pour la plupart des destinations européennes, plus besoin de passer à la banque préalablement pour retirer des devises !</p>
</div>
</a>
</article>
</li>
</ul>
<!-- adjust row class for spacing between slides here -->
<nav class="sds-slider__navigation row row-xs">
<div class="col">
<div class="sds-slider__pagination swiper-pagination"></div>
</div>
<div class="col-auto">
<div class="sds-btnGroup">
<button type="button" class="sds-slider__prev swiper-button-prev">
<span class="sds-icon sds-icon-arrowprevious"></span>
</button>
<button type="button" class="sds-slider__next swiper-button-next">
<span class="sds-icon sds-icon-arrownext"></span>
</button>
</div>
</div>
</nav>
</div>
</div>
</div>
<div class="sds-relatedArticles__footerBtn sds-exceptionStackXxl">
<a href="" class="sds-btn -btnSecondary -btnInverse">
<span class="sds-btn__text">Découvrez tous nos articles</span>
<span class="sds-icon sds-icon-arrownext"></span>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="{{ namespace }}section -sectionSunken -sectionInverted -overflowHidden">
<div class="{{ namespace }}section__innerWrapper">
<div class="{{ namespace }}section__inner">
<div class="container">
<div class="{{ namespace }}stack3xl{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
<div class="row no-bottom-gutter justify-content-between">
<div class="col col-lg-8 col-xl-6">
<div class="{{ namespace }}section__textColor {{ namespace }}stack3xl">
<h2 class="h2">Le blog autour de vos finances</h2>
<p class="{{ namespace }}textBodyLg">Est-ce que vous souhaitez rester informés en termes de gestion financière ou recevoir de nouvelles idées pour optimiser votre patrimoine ? Découvrez tous nos articles dédiés à l’univers financier !</p>
</div>
</div>
<div class="col-auto {{ namespace }}relatedArticles__headerBtn">
{% render "@btn-secondary-inverse--icon-right",{
eltType: "a",
text: "Découvrez tous nos articles",
icon: "icon-arrownext"
},true %}
</div>
</div>
{% render "@spk-slider--inverted",{
classes: ["-overflowVisible"]
},true %}
<div class="{{ namespace }}relatedArticles__footerBtn {{ namespace }}exceptionStackXxl">
{% render "@btn-secondary-inverse--icon-right",{
eltType: "a",
text: "Découvrez tous nos articles",
icon: "icon-arrownext"
},true %}
</div>
</div>
</div>
</div>
</div>
</section>
// core version + navigation, pagination modules:
import Swiper from 'swiper/bundle';
export default class RelatedArticles {
constructor() {
this.fireSwiper();
}
fireSwiper(){
const swiper = new Swiper('.swiper', {
// Optional parameters
direction: 'horizontal',
keyboard: true,
slidesPerGroup: 0,
// If we need pagination
pagination: {
el: '.swiper-pagination',
dynamicBullets: true
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}
});
}
}
/* variables specific to current element */
$element-specific-variables: "";
.#{$namespace}relatedArticles {
/* Save root element context for easy access if nesting is needed */
$self: &;
/* properties of current element + media queries */
/* Pseudo Elements */
&::before {
}
&::after {
}
/*
Include elements that are linked to the current element but have to reside at the root level of the stylesheet
(e.g: keyframes)
*/
@at-root {
}
/* children - write selector in full in comments in order to facilitate search */
// relatedArticles__heading
&__headerBtn {
display: none;
@include media-breakpoint-up(lg) {
display: block;
}
}
&__footerBtn {
@include media-breakpoint-up(lg) {
display: none;
}
}
/* modifiers */
// relatedArticles -altStyle
&.-altStyle {
// follows same logic as base element
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* Pseudo Classes */
&:hover {
@media (hover: hover) {
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}