No notes defined.
<div class="container">
<ul class="sds-timelineStory list-unstyled">
<li class="sds-timelineStory__row">
<div class="sds-timelineStory__indicator"></div>
<div class="sds-timelineStory__item">
<div class="sds-timelineStory__itemInner sds-stackXl">
<h2 class="h-pageCover sds-headingLight">1934</h2>
<img src="../../media/spuerkeess-site/components/timeline-story/timeline-story-img-1.png" alt="" class="img-fluid">
<div class="sds-stackLg">
<h4 class="h4">Image</h4>
<p class="sds-textBodyLg">Fidèle à sa mission sociale et dans l’esprit de solidarité qui caractérise son action RSE, Spuerkeess est fière d'annoncer son association avec Youth & Work à travers son projet d'accompagnement de jeunes gens motivés dans leurs démarches à la recherche d'un emploi ou d'une place d'apprentissage.</p>
<a href="" class="sds-btn -btnSecondary">
<span class="sds-btn__text">Plus d'infos</span>
</a>
</div>
</div>
</div>
</li>
<li class="sds-timelineStory__row">
<div class="sds-timelineStory__indicator"></div>
<div class="sds-timelineStory__item">
<div class="sds-timelineStory__itemInner sds-stackXl">
<h2 class="h-pageCover sds-headingLight">1934</h2>
<div class="sds-slider -navigationSmallVisible -navigationSmallSpacing">
<!-- 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-12">
<div>
<img src="../../media/spuerkeess-site/components/timeline-story/timeline-story-img.png" alt="" class="img-fluid">
</div>
</li>
<li class="swiper-slide col-12">
<div>
<img src="../../media/spuerkeess-site/components/timeline-story/timeline-story-img.png" alt="" class="img-fluid">
</div>
</li>
<li class="swiper-slide col-12">
<div>
<img src="../../media/spuerkeess-site/components/timeline-story/timeline-story-img.png" alt="" class="img-fluid">
</div>
</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-stackLg">
<h4 class="h4">Image Gallery</h4>
<p class="sds-textBodyLg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id aliquet arcu. Integer vehicula turpis magna, at dictum libero ullamcorper vel. Curabitur dignissim elit non sapien ornare congue.</p>
<a href="" class="sds-btn -btnPrimary">
<span class="sds-btn__text">Nice button</span>
</a>
</div>
</div>
</div>
</li>
<li class="sds-timelineStory__row">
<div class="sds-timelineStory__indicator"></div>
<div class="sds-timelineStory__item">
<div class="sds-timelineStory__itemInner sds-stackXl">
<img src="https://design.spuerkeess.lu/media/illustrations/svg240x240/spot/sdsillu-investgrowb.svg" alt="" class="img-fluid">
<div class="sds-stackLg">
<h4 class="h4">Image - SVG</h4>
<p class="sds-textBodyLg">Fidèle à sa mission sociale et dans l’esprit de solidarité qui caractérise son action RSE, Spuerkeess est fière d'annoncer son association avec Youth & Work à travers son projet d'accompagnement de jeunes gens motivés dans leurs démarches à la recherche d'un emploi ou d'une place d'apprentissage.</p>
<a href="" class="sds-btn -btnSecondary">
<span class="sds-btn__text">Plus d'infos</span>
</a>
</div>
</div>
</div>
</li>
<li class="sds-timelineStory__row">
<div class="sds-timelineStory__indicator"></div>
<div class="sds-timelineStory__item">
<div class="sds-timelineStory__itemInner sds-stackXl">
<div class="sds-videoPlayer -posterImg">
<img class="img-fluid" src="../../media/snet/videos/video-poster-img.jpeg" alt="">
<div class="sds-videoPlayer__fakePlayer">
<button type="button" class="sds-btn -iconBtn -btnPrimary -btnBig">
<span class="sds-icon sds-icon-play"></span>
</button>
</div>
</div>
<div class="sds-stackLg">
<h4 class="h4">Vidéo</h4>
<p class="sds-textBodyLg">Fidèle à sa mission sociale et dans l’esprit de solidarité qui caractérise son action RSE, Spuerkeess est fière d'annoncer son association avec Youth & Work à travers son projet d'accompagnement de jeunes gens motivés dans leurs démarches à la recherche d'un emploi ou d'une place d'apprentissage.</p>
</div>
</div>
</div>
</li>
<li class="sds-timelineStory__row">
<div class="sds-timelineStory__indicator"></div>
<div class="sds-timelineStory__item">
<div class="sds-timelineStory__itemInner sds-stackXl">
<h2 class="h-pageCover sds-headingLight">1934</h2>
<div class="sds-stackLg">
<h4 class="h4">1. Calculez votre budget</h4>
<p class="sds-textBodyLg">Fidèle à sa mission sociale et dans l’esprit de solidarité qui caractérise son action RSE, Spuerkeess est fière d'annoncer son association avec Youth & Work à travers son projet d'accompagnement de jeunes gens motivés dans leurs démarches à la recherche d'un emploi ou d'une place d'apprentissage.</p>
</div>
<div class="sds-quote -small">
<blockquote class="sds-quote__textContent">
<p class="sds-quote__text">Donc, avec mon client, il s’agit de bien analyser quelle partie de son capital il pourra investir sans qu’il se retrouve dans la situation de devoir y recourir aux moments d’imprévus.</p>
<cite class="sds-quote__author">Claude Folschette</cite>
</blockquote>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="container">
<ul class="{{ namespace }}timelineStory list-unstyled{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
{% for key, item in items %}
<li class="{{ namespace }}timelineStory__row">
<div class="{{ namespace }}timelineStory__indicator"></div>
<div class="{{ namespace }}timelineStory__item">
<div class="{{ namespace }}timelineStory__itemInner {{ namespace }}stackXl">
{% if item.title %}<h2 class="h-pageCover {{ namespace }}headingLight">{{ item.title }}</h2>{% endif %}
{% if item.img %}
<img src="{{ (mediaPath + item.img ) | path }}" alt="" class="img-fluid">
{% elseif item.spotIllu %}
<img src="https://design.spuerkeess.lu/media/illustrations/svg240x240/spot/sdsillu-investgrowb.svg" alt="" class="img-fluid">
{% elseif item.slider %}
{% render "@spk-slider--img-gallery",{
classes: ["-navigationSmallVisible","-navigationSmallSpacing"]
},true %}
{% elseif item.video %}
{% render "@snet-video-player--poster" %}
{% endif %}
<div class="{{ namespace }}stackLg">
<h4 class="h4">{{ item.subTitle }}</h4>
<p class="{{ namespace }}textBodyLg">{{ item.text }}</p>
{% if item.link %}
{% if item.link.cta %}
{% render "@btn-primary", {
eltType: "a",
text: "Nice button"
}, true %}
{% else %}
{% render "@btn-secondary", {
eltType: "a",
text: "Plus d'infos"
}, true %}
{% endif %}
{% endif %}
</div>
{% if item.quote %}
{% render "@spk-quote--small",{
link: false
},true %}
{% endif %}
</div>
</div>
</li>
{% endfor %}
</ul>
</div>
@use "sass:math";
/* variables specific to current element */
$grid-column-junction: 6;
$grid-column-start: math.div($grid-columns,$grid-columns);
$grid-column-end: $grid-columns + 1;
$timeline-story-col-padding: math.div(($grid-columns - (($grid-columns - ($grid-column-junction + 1)) * 2)) , $grid-columns) * 100%;
$timeline-gap: $grid-gutter-width;
$timeline-big-margin-top: 280px;
$timeline-row-spacer: map-deep-get($token-spacer-stack-max-map, "xxl");
.#{$namespace}timelineStory {
/* Save root element context for easy access if nesting is needed */
$self: &;
/* properties of current element + media queries */
@include media-breakpoint-up("md") {
display: grid;
grid-template-columns: repeat(#{$grid-columns}, 1fr);
grid-auto-flow: dense;
gap: $timeline-gap;
}
/* 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 */
// timelineStory__row
&__row {
position: relative;
z-index: z("zero");
margin-bottom: $timeline-row-spacer;
display: flex;
&::before {
content: "";
width: $border-width*2;
@include custom-prop-fallback("background-color", "sys-color-border-primary-subtle");
position: absolute;
top: 0 !important;
bottom: -$timeline-row-spacer !important;
left: map-deep-get($token-spacer-inline-map, "sm");
transform: translateX(-50%);
}
&:first-of-type {
&::before {
@include fluid-prop("top", $min_width, $max_width, $h1-page-cover-font-size-min*0.5, $h1-page-cover-font-size*0.5, true);
}
+ :last-of-type {
&::before {
@include media-breakpoint-up("md") {
margin-top: -$timeline-big-margin-top;
}
}
}
}
&:last-of-type {
margin-bottom: 0;
&:nth-of-type(odd) {
//background-color: lightblue;
&::before {
content: "";
@include fluid-prop("height", $min_width, $max_width, $h1-page-cover-font-size-min, $h1-page-cover-font-size, true);
top: -$timeline-gap*0.5 - $border-width*2 !important;
bottom: auto !important;
@include media-breakpoint-up("md") {
top: 0 !important;
transform: translateY(-50%);
left: -$timeline-gap*0.5 - $border-width;
}
}
}
&:nth-of-type(even) {
//background-color: lightgreen;
&::before {
@include media-breakpoint-up("md") {
content: "";
bottom: 0;
@include fluid-prop("top", $min_width, $max_width, $h1-page-cover-font-size-min*0.5, $h1-page-cover-font-size*0.5, true);
height: $timeline-big-margin-top;
}
}
}
&::before {
content: none;
}
}
&:nth-last-of-type(2) {
&::before {
bottom: -$timeline-row-spacer * 1.5 !important;
}
&:nth-of-type(odd) {
//background-color: pink;
&::before {
@include media-breakpoint-up("md") {
content: none;
}
}
}
&:nth-of-type(even) {
//background-color: gold;
&::before {
@include media-breakpoint-up("md") {
bottom: -$timeline-gap !important;
}
}
}
}
&:nth-last-of-type(3) {
&:nth-of-type(odd) {
//background-color: coral;
&::before {
bottom: -$timeline-row-spacer !important;
}
}
}
// follows same logic as parent
@include media-breakpoint-up("md") {
margin-bottom: 0;
grid-column-start: $grid-column-start;
grid-column-end: $grid-column-junction + 1;
position: relative;
&::before {
top: 0;
bottom: -$timeline-gap*2 !important;
left: -$timeline-gap*0.5;
transform: translateX(-50%);
}
&:nth-of-type(odd) {
grid-column-start: $grid-column-junction + 1;
grid-column-end: $grid-column-end;
padding-left: calc(#{($timeline-story-col-padding)} + #{$grid-gutter-width-xs*0.5});
&:first-of-type {
#{$self}__indicator {
top: 0;
left: -$timeline-gap*0.5 - $border-width;
}
}
}
&:nth-of-type(even) {
margin-top: $timeline-big-margin-top;
text-align: right;
padding-right: calc(#{($timeline-story-col-padding)} + #{$grid-gutter-width-xs*0.5});
#{$self}__indicator {
left: auto;
right: -$timeline-gap*0.5;
flex-direction: row-reverse;
}
&:nth-last-of-type(2) {
&::before {
bottom: -$timeline-gap*2;
}
}
&::before {
left: auto;
right: -$timeline-gap*0.5 - $border-width*2;
margin-top: -$timeline-big-margin-top;
}
}
&:nth-of-type(2) {
&::before {
margin-top: -$timeline-big-margin-top + $timeline-gap;
}
}
}
}
&__indicator {
display: flex;
align-items: center;
@include fluid-height($min_width, $max_width, $h1-page-cover-font-size-min, $h1-page-cover-font-size, true);
margin-right: map-deep-get($token-spacer-inline-map, "md");
@include media-breakpoint-up("md") {
position: absolute;
top: 0;
left: -$timeline-gap*0.5;
width: $timeline-story-col-padding;
margin-right: 0;
}
&::before {
@include media-breakpoint-up("md") {
content: "";
height: $border-width*2;
@include custom-prop-fallback("background-color", "sys-color-border-primary-subtle");
width: map-deep-get($token-sizes-unit-map, "32");
max-width: map-deep-get($token-sizes-unit-map, "32");
}
}
&::after {
content: "";
width: map-deep-get($token-sizes-unit-map, "16");
height: map-deep-get($token-sizes-unit-map, "16");
@include custom-prop-fallback("background-color", "sys-color-border-primary-subtle");
border-radius: map-deep-get($token-radius-map, "circle");
flex-shrink: 0;
transform: translateY(25%);
@include media-breakpoint-up("md") {
transform: none;
}
}
}
/* modifiers */
// timelineStory -altStyle
&.-altStyle {
// follows same logic as base element
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* Pseudo Classes */
&:hover {
@media (hover: hover) {
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}