<div class="sds-digitalSignage d-flex flex-column">
<header class="sds-digitalSignage__header">
<div class="row align-items-center justify-content-between">
<div class="col">
<svg width="90" height="90" viewBox="0 0 90 90" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1072_101)">
<path d="M90 0H0V90H90V0Z" fill="#DE0000" />
<path d="M61.38 35.6399V22.4099L54.72 9.17993L48.06 22.4099V35.6399H51.48V23.2199L54.72 16.5599L58.05 23.2199V35.6399H61.38Z" fill="white" />
<path d="M72.09 39.8699H18.09V43.3799H72.09V39.8699Z" fill="white" />
<path d="M71.91 50.3099C66.06 50.3099 61.38 54.9899 61.38 60.8399V81.8099C60.3 80.1899 59.13 78.4799 57.87 76.9499V60.8399C57.87 53.0999 64.08 46.7999 71.91 46.7999V50.3099Z" fill="white" />
<path d="M52.11 53.8199C52.11 49.9499 48.96 46.7999 45 46.7999C41.04 46.7999 37.98 49.9499 37.98 53.8199V61.1999C39.15 61.6499 40.32 62.1899 41.49 62.8199V53.8199C41.49 51.9299 43.02 50.3099 45 50.3099C46.89 50.3099 48.51 51.8399 48.51 53.8199V67.0499L52.02 69.7499L52.11 53.8199Z" fill="white" />
<path d="M25.02 46.7999C28.98 46.7999 32.13 49.9499 32.13 53.8199H32.04V59.8499C30.87 59.4899 29.7 59.1299 28.53 58.8599V53.8199C28.53 51.8399 26.91 50.3099 25.02 50.3099C23.04 50.3099 21.51 51.9299 21.51 53.8199V57.5999L18 57.3299V53.8199C18 49.9499 21.06 46.7999 25.02 46.7999Z" fill="white" />
</g>
<defs>
<clipPath id="clip0_1072_101">
<rect width="90" height="90" fill="white" />
</clipPath>
</defs>
</svg>
</div>
<div class="col-auto">
<div class="sds-headingColor sds-digitalSignage__text11xl5">
29.07
</div>
</div>
</div>
<div class="sds-digitalSignage__headerBottom">
<div>
<h1 class="h-pageCover">Les fonds</h1>
<h2 class="sds-headingLight h1">lux|funds</h2>
</div>
</div>
</header>
<main class="sds-digitalSignage__main flex-grow-1">
<div class="sds-slider w-100">
<div class="sds-slider__inner swiper" id="swiperDigitalSignageLuxfunds" data-visible-slides="3" data-delay="1000" data-speed="1000">
<ul class="swiper-wrapper list-unstyled" id="accordionDigitalSignageLuxfunds">
<li class="swiper-slide">
<div class="sds-box -insetLg -boxScaledFixed sds-shadowInteraction" data-js-collapse-element>
<button class="sds-digitalSignage__boxToggle" type="button" data-toggle="collapse" data-target="#box-1-collapse" aria-expanded="false" aria-controls="box-1-collapse"></button>
<div class="collapse fade" data-js-box-base-info data-active="false">
<div class="row align-items-end no-bottom-gutter">
<div class="col-7">
<div class="sds-stackXl">
<div class="sds-staticStackXs">
<div class="sds-textSemiBold" style="color: var(--comp-digital-signage-luxfunds-cat-a-text-color);">Sicav Monétaires</div>
<div class="h2">Luxfunds-Cash Us-Dollars</div>
</div>
<ul class="row col-separator row-double-gutter list-unstyled no-bottom-gutter">
<li class="col-12 col-sm-4">
<div class="sds-staticGapMd d-flex flex-sm-column">
<div>
<div class="sds-label">
Niv. risque*
</div>
<p class="sds-exceptionStackXs sds-textSemiBold sds-textBodyLg">
1
</p>
</div>
</div>
</li>
<li class="col-12 col-sm-4">
<div class="sds-staticGapMd d-flex flex-sm-column">
<div>
<div class="sds-label">
VNI
</div>
<p class="sds-exceptionStackXs sds-textSemiBold sds-textBodyLg">
225.96€
</p>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="col-2">
<img class="img-fluid" src="../../media/spuerkeess-site/components/digital-signage/small-graph.svg" alt="">
</div>
<div class="col-3">
<div class="sds-box -success -insetLg text-center">
<div class="sds-textSemiBold sds-bodyXl">
Perf. 5 years
</div>
<div class="h1 sds-colorInherit">+7,27 %</div>
</div>
</div>
</div>
</div>
<div id="box-1-collapse" class="collapse fade" data-detail data-active="true">
<div class="sds-stackXl">
<div class="sds-staticStackXs">
<div style="color: var(--comp-digital-signage-luxfunds-cat-a-text-color);">Sicav Monétaires</div>
<div class="h1">Luxfunds-Cash Us-Dollars</div>
</div>
<div class="sds-digitalSignage__innerCollapse row no-bottom-gutter align-items-end">
<div class="sds-digitalSignage__graphWrapper">
<img src="../../media/spuerkeess-site/components/digital-signage/graph.svg" alt="">
</div>
<div class="col-3">
<div class="sds-box -insetLg text-center">
<div class="sds-textSemiBold sds-bodyLg">
Niv. risque*
</div>
<div class="h1 sds-colorInherit">1</div>
</div>
</div>
<div class="col-3">
<div class="sds-box -insetLg text-center">
<div class="sds-textSemiBold sds-bodyLg">
VNI
</div>
<div class="h1 sds-colorInherit">225.96€</div>
</div>
</div>
<div class="col-3 ml-auto">
<div class="sds-box -success -insetLg text-center">
<div class="sds-textSemiBold sds-bodyXl">
Perf. 5 years
</div>
<div class="h1 sds-colorInherit">+7,27 %</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="swiper-slide">
<div class="sds-box -insetLg sds-shadowInteraction" data-js-collapse-element>
<button class="sds-digitalSignage__boxToggle" type="button" data-toggle="collapse" data-target="#box-2-collapse" aria-expanded="false" aria-controls="box-2-collapse"></button>
<div class="collapse fade" data-js-box-base-info data-active="true">
<div class="row align-items-end no-bottom-gutter">
<div class="col-7">
<div class="sds-stackXl">
<div class="sds-staticStackXs">
<div class="sds-textSemiBold" style="color: var(--comp-digital-signage-luxfunds-cat-b-text-color);">Sicav Obligataires</div>
<div class="h2">Luxfunds-Bond EUR</div>
</div>
<ul class="row col-separator row-double-gutter list-unstyled no-bottom-gutter">
<li class="col-12 col-sm-4">
<div class="sds-staticGapMd d-flex flex-sm-column">
<div>
<div class="sds-label">
Niv. risque*
</div>
<p class="sds-exceptionStackXs sds-textSemiBold sds-textBodyLg">
2
</p>
</div>
</div>
</li>
<li class="col-12 col-sm-4">
<div class="sds-staticGapMd d-flex flex-sm-column">
<div>
<div class="sds-label">
VNI
</div>
<p class="sds-exceptionStackXs sds-textSemiBold sds-textBodyLg">
253.97€
</p>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="col-2">
<img class="img-fluid" src="../../media/spuerkeess-site/components/digital-signage/small-graph.svg" alt="">
</div>
<div class="col-3">
<div class="sds-box -danger -insetLg text-center">
<div class="sds-textSemiBold sds-bodyXl">
Perf. 5 years
</div>
<div class="h1 sds-colorInherit">+12,51 %</div>
</div>
</div>
</div>
</div>
<div id="box-2-collapse" class="collapse fade" data-detail data-active="false">
<div class="sds-stackXl">
<div class="sds-staticStackXs">
<div style="color: var(--comp-digital-signage-luxfunds-cat-b-text-color);">Sicav Obligataires</div>
<div class="h1">Luxfunds-Bond EUR</div>
</div>
<div class="sds-digitalSignage__innerCollapse row no-bottom-gutter align-items-end">
<div class="sds-digitalSignage__graphWrapper">
<img src="../../media/spuerkeess-site/components/digital-signage/graph.svg" alt="">
</div>
<div class="col-3">
<div class="sds-box -insetLg text-center">
<div class="sds-textSemiBold sds-bodyLg">
Niv. risque*
</div>
<div class="h1 sds-colorInherit">2</div>
</div>
</div>
<div class="col-3">
<div class="sds-box -insetLg text-center">
<div class="sds-textSemiBold sds-bodyLg">
VNI
</div>
<div class="h1 sds-colorInherit">253.97€</div>
</div>
</div>
<div class="col-3 ml-auto">
<div class="sds-box -danger -insetLg text-center">
<div class="sds-textSemiBold sds-bodyXl">
Perf. 5 years
</div>
<div class="h1 sds-colorInherit">+12,51 %</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="swiper-slide">
<div class="sds-box -insetLg sds-shadowInteraction" data-js-collapse-element>
<button class="sds-digitalSignage__boxToggle" type="button" data-toggle="collapse" data-target="#box-3-collapse" aria-expanded="false" aria-controls="box-3-collapse"></button>
<div class="collapse fade" data-js-box-base-info data-active="true">
<div class="row align-items-end no-bottom-gutter">
<div class="col-7">
<div class="sds-stackXl">
<div class="sds-staticStackXs">
<div class="sds-textSemiBold" style="color: var(--comp-digital-signage-luxfunds-cat-d-text-color);">Sicav Mixtes</div>
<div class="h2">Luxfunds-Portfolio Defensive</div>
</div>
<ul class="row col-separator row-double-gutter list-unstyled no-bottom-gutter">
<li class="col-12 col-sm-4">
<div class="sds-staticGapMd d-flex flex-sm-column">
<div>
<div class="sds-label">
Niv. risque*
</div>
<p class="sds-exceptionStackXs sds-textSemiBold sds-textBodyLg">
2
</p>
</div>
</div>
</li>
<li class="col-12 col-sm-4">
<div class="sds-staticGapMd d-flex flex-sm-column">
<div>
<div class="sds-label">
VNI
</div>
<p class="sds-exceptionStackXs sds-textSemiBold sds-textBodyLg">
177.11€
</p>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="col-2">
<img class="img-fluid" src="../../media/spuerkeess-site/components/digital-signage/small-graph.svg" alt="">
</div>
<div class="col-3">
<div class="sds-box -danger -insetLg text-center">
<div class="sds-textSemiBold sds-bodyXl">
Perf. 5 years
</div>
<div class="h1 sds-colorInherit">-7,27 %</div>
</div>
</div>
</div>
</div>
<div id="box-3-collapse" class="collapse fade" data-detail data-active="false">
<div class="sds-stackXl">
<div class="sds-staticStackXs">
<div style="color: var(--comp-digital-signage-luxfunds-cat-d-text-color);">Sicav Mixtes</div>
<div class="h1">Luxfunds-Portfolio Defensive</div>
</div>
<div class="sds-digitalSignage__innerCollapse row no-bottom-gutter align-items-end">
<div class="sds-digitalSignage__graphWrapper">
<img src="../../media/spuerkeess-site/components/digital-signage/graph.svg" alt="">
</div>
<div class="col-3">
<div class="sds-box -insetLg text-center">
<div class="sds-textSemiBold sds-bodyLg">
Niv. risque*
</div>
<div class="h1 sds-colorInherit">2</div>
</div>
</div>
<div class="col-3">
<div class="sds-box -insetLg text-center">
<div class="sds-textSemiBold sds-bodyLg">
VNI
</div>
<div class="h1 sds-colorInherit">177.11€</div>
</div>
</div>
<div class="col-3 ml-auto">
<div class="sds-box -danger -insetLg text-center">
<div class="sds-textSemiBold sds-bodyXl">
Perf. 5 years
</div>
<div class="h1 sds-colorInherit">-7,27 %</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="swiper-slide">
<div class="sds-box -insetLg sds-shadowInteraction" data-js-collapse-element>
<button class="sds-digitalSignage__boxToggle" type="button" data-toggle="collapse" data-target="#box-4-collapse" aria-expanded="false" aria-controls="box-4-collapse"></button>
<div class="collapse fade" data-js-box-base-info data-active="false">
<div class="row align-items-end no-bottom-gutter">
<div class="col-7">
<div class="sds-stackXl">
<div class="sds-staticStackXs">
<div class="sds-textSemiBold" style="color: var(--comp-digital-signage-luxfunds-cat-e-text-color);">Sicav Mixtes</div>
<div class="h2">Luxfunds-Portfolio Defensive</div>
</div>
<ul class="row col-separator row-double-gutter list-unstyled no-bottom-gutter">
<li class="col-12 col-sm-4">
<div class="sds-staticGapMd d-flex flex-sm-column">
<div>
<div class="sds-label">
Niv. risque*
</div>
<p class="sds-exceptionStackXs sds-textSemiBold sds-textBodyLg">
2
</p>
</div>
</div>
</li>
<li class="col-12 col-sm-4">
<div class="sds-staticGapMd d-flex flex-sm-column">
<div>
<div class="sds-label">
VNI
</div>
<p class="sds-exceptionStackXs sds-textSemiBold sds-textBodyLg">
177.11€
</p>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="col-2">
<img class="img-fluid" src="../../media/spuerkeess-site/components/digital-signage/small-graph.svg" alt="">
</div>
<div class="col-3">
<div class="sds-box -success -insetLg text-center">
<div class="sds-textSemiBold sds-bodyXl">
Perf. 5 years
</div>
<div class="h1 sds-colorInherit">+7,27 %</div>
</div>
</div>
</div>
</div>
<div id="box-4-collapse" class="collapse fade" data-detail data-active="true">
<div class="sds-stackXl">
<div class="sds-staticStackXs">
<div style="color: var(--comp-digital-signage-luxfunds-cat-e-text-color);">Sicav Mixtes</div>
<div class="h1">Luxfunds-Portfolio Defensive</div>
</div>
<div class="sds-digitalSignage__innerCollapse row no-bottom-gutter align-items-end">
<div class="sds-digitalSignage__graphWrapper">
<img src="../../media/spuerkeess-site/components/digital-signage/graph.svg" alt="">
</div>
<div class="col-3">
<div class="sds-box -insetLg text-center">
<div class="sds-textSemiBold sds-bodyLg">
Niv. risque*
</div>
<div class="h1 sds-colorInherit">2</div>
</div>
</div>
<div class="col-3">
<div class="sds-box -insetLg text-center">
<div class="sds-textSemiBold sds-bodyLg">
VNI
</div>
<div class="h1 sds-colorInherit">177.11€</div>
</div>
</div>
<div class="col-3 ml-auto">
<div class="sds-box -success -insetLg text-center">
<div class="sds-textSemiBold sds-bodyXl">
Perf. 5 years
</div>
<div class="h1 sds-colorInherit">+7,27 %</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="swiper-slide">
<div class="sds-box -insetLg sds-shadowInteraction" data-js-collapse-element>
<button class="sds-digitalSignage__boxToggle" type="button" data-toggle="collapse" data-target="#box-5-collapse" aria-expanded="false" aria-controls="box-5-collapse"></button>
<div class="collapse fade" data-js-box-base-info data-active="true">
<div class="row align-items-end no-bottom-gutter">
<div class="col-7">
<div class="sds-stackXl">
<div class="sds-staticStackXs">
<div class="sds-textSemiBold" style="color: var(--comp-digital-signage-luxfunds-cat-e-text-color);">Sicav Mixtes</div>
<div class="h2">Luxfunds-Portfolio Defensive</div>
</div>
<ul class="row col-separator row-double-gutter list-unstyled no-bottom-gutter">
<li class="col-12 col-sm-4">
<div class="sds-staticGapMd d-flex flex-sm-column">
<div>
<div class="sds-label">
Niv. risque*
</div>
<p class="sds-exceptionStackXs sds-textSemiBold sds-textBodyLg">
2
</p>
</div>
</div>
</li>
<li class="col-12 col-sm-4">
<div class="sds-staticGapMd d-flex flex-sm-column">
<div>
<div class="sds-label">
VNI
</div>
<p class="sds-exceptionStackXs sds-textSemiBold sds-textBodyLg">
177.11€
</p>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="col-2">
<img class="img-fluid" src="../../media/spuerkeess-site/components/digital-signage/small-graph.svg" alt="">
</div>
<div class="col-3">
<div class="sds-box -danger -insetLg text-center">
<div class="sds-textSemiBold sds-bodyXl">
Perf. 5 years
</div>
<div class="h1 sds-colorInherit">-7,27 %</div>
</div>
</div>
</div>
</div>
<div id="box-5-collapse" class="collapse fade" data-detail data-active="false">
<div class="sds-stackXl">
<div class="sds-staticStackXs">
<div style="color: var(--comp-digital-signage-luxfunds-cat-e-text-color);">Sicav Mixtes</div>
<div class="h1">Luxfunds-Portfolio Defensive</div>
</div>
<div class="sds-digitalSignage__innerCollapse row no-bottom-gutter align-items-end">
<div class="sds-digitalSignage__graphWrapper">
<img src="../../media/spuerkeess-site/components/digital-signage/graph.svg" alt="">
</div>
<div class="col-3">
<div class="sds-box -insetLg text-center">
<div class="sds-textSemiBold sds-bodyLg">
Niv. risque*
</div>
<div class="h1 sds-colorInherit">2</div>
</div>
</div>
<div class="col-3">
<div class="sds-box -insetLg text-center">
<div class="sds-textSemiBold sds-bodyLg">
VNI
</div>
<div class="h1 sds-colorInherit">177.11€</div>
</div>
</div>
<div class="col-3 ml-auto">
<div class="sds-box -danger -insetLg text-center">
<div class="sds-textSemiBold sds-bodyXl">
Perf. 5 years
</div>
<div class="h1 sds-colorInherit">-7,27 %</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="swiper-slide">
<div class="sds-box -insetLg sds-shadowInteraction" data-js-collapse-element>
<button class="sds-digitalSignage__boxToggle" type="button" data-toggle="collapse" data-target="#box-6-collapse" aria-expanded="false" aria-controls="box-6-collapse"></button>
<div class="collapse fade" data-js-box-base-info data-active="true">
<div class="row align-items-end no-bottom-gutter">
<div class="col-7">
<div class="sds-stackXl">
<div class="sds-staticStackXs">
<div class="sds-textSemiBold" style="color: var(--comp-digital-signage-luxfunds-cat-e-text-color);">Sicav Mixtes</div>
<div class="h2">Luxfunds-Portfolio Defensive</div>
</div>
<ul class="row col-separator row-double-gutter list-unstyled no-bottom-gutter">
<li class="col-12 col-sm-4">
<div class="sds-staticGapMd d-flex flex-sm-column">
<div>
<div class="sds-label">
Niv. risque*
</div>
<p class="sds-exceptionStackXs sds-textSemiBold sds-textBodyLg">
2
</p>
</div>
</div>
</li>
<li class="col-12 col-sm-4">
<div class="sds-staticGapMd d-flex flex-sm-column">
<div>
<div class="sds-label">
VNI
</div>
<p class="sds-exceptionStackXs sds-textSemiBold sds-textBodyLg">
177.11€
</p>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="col-2">
<img class="img-fluid" src="../../media/spuerkeess-site/components/digital-signage/small-graph.svg" alt="">
</div>
<div class="col-3">
<div class="sds-box -success -insetLg text-center">
<div class="sds-textSemiBold sds-bodyXl">
Perf. 5 years
</div>
<div class="h1 sds-colorInherit">+7,27 %</div>
</div>
</div>
</div>
</div>
<div id="box-6-collapse" class="collapse fade" data-detail data-active="false">
<div class="sds-stackXl">
<div class="sds-staticStackXs">
<div style="color: var(--comp-digital-signage-luxfunds-cat-e-text-color);">Sicav Mixtes</div>
<div class="h1">Luxfunds-Portfolio Defensive</div>
</div>
<div class="sds-digitalSignage__innerCollapse row no-bottom-gutter align-items-end">
<div class="sds-digitalSignage__graphWrapper">
<img src="../../media/spuerkeess-site/components/digital-signage/graph.svg" alt="">
</div>
<div class="col-3">
<div class="sds-box -insetLg text-center">
<div class="sds-textSemiBold sds-bodyLg">
Niv. risque*
</div>
<div class="h1 sds-colorInherit">2</div>
</div>
</div>
<div class="col-3">
<div class="sds-box -insetLg text-center">
<div class="sds-textSemiBold sds-bodyLg">
VNI
</div>
<div class="h1 sds-colorInherit">177.11€</div>
</div>
</div>
<div class="col-3 ml-auto">
<div class="sds-box -success -insetLg text-center">
<div class="sds-textSemiBold sds-bodyXl">
Perf. 5 years
</div>
<div class="h1 sds-colorInherit">+7,27 %</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="swiper-slide">
<div class="sds-box -insetLg sds-shadowInteraction" data-js-collapse-element>
<button class="sds-digitalSignage__boxToggle" type="button" data-toggle="collapse" data-target="#box-7-collapse" aria-expanded="false" aria-controls="box-7-collapse"></button>
<div class="collapse fade" data-js-box-base-info data-active="true">
<div class="row align-items-end no-bottom-gutter">
<div class="col-7">
<div class="sds-stackXl">
<div class="sds-staticStackXs">
<div class="sds-textSemiBold" style="color: var(--comp-digital-signage-luxfunds-cat-e-text-color);">Sicav Mixtes</div>
<div class="h2">Luxfunds-Portfolio Defensive</div>
</div>
<ul class="row col-separator row-double-gutter list-unstyled no-bottom-gutter">
<li class="col-12 col-sm-4">
<div class="sds-staticGapMd d-flex flex-sm-column">
<div>
<div class="sds-label">
Niv. risque*
</div>
<p class="sds-exceptionStackXs sds-textSemiBold sds-textBodyLg">
2
</p>
</div>
</div>
</li>
<li class="col-12 col-sm-4">
<div class="sds-staticGapMd d-flex flex-sm-column">
<div>
<div class="sds-label">
VNI
</div>
<p class="sds-exceptionStackXs sds-textSemiBold sds-textBodyLg">
177.11€
</p>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="col-2">
<img class="img-fluid" src="../../media/spuerkeess-site/components/digital-signage/small-graph.svg" alt="">
</div>
<div class="col-3">
<div class="sds-box -success -insetLg text-center">
<div class="sds-textSemiBold sds-bodyXl">
Perf. 5 years
</div>
<div class="h1 sds-colorInherit">+7,27 %</div>
</div>
</div>
</div>
</div>
<div id="box-7-collapse" class="collapse fade" data-detail data-active="false">
<div class="sds-stackXl">
<div class="sds-staticStackXs">
<div style="color: var(--comp-digital-signage-luxfunds-cat-e-text-color);">Sicav Mixtes</div>
<div class="h1">Luxfunds-Portfolio Defensive</div>
</div>
<div class="sds-digitalSignage__innerCollapse row no-bottom-gutter align-items-end">
<div class="sds-digitalSignage__graphWrapper">
<img src="../../media/spuerkeess-site/components/digital-signage/graph.svg" alt="">
</div>
<div class="col-3">
<div class="sds-box -insetLg text-center">
<div class="sds-textSemiBold sds-bodyLg">
Niv. risque*
</div>
<div class="h1 sds-colorInherit">2</div>
</div>
</div>
<div class="col-3">
<div class="sds-box -insetLg text-center">
<div class="sds-textSemiBold sds-bodyLg">
VNI
</div>
<div class="h1 sds-colorInherit">177.11€</div>
</div>
</div>
<div class="col-3 ml-auto">
<div class="sds-box -success -insetLg text-center">
<div class="sds-textSemiBold sds-bodyXl">
Perf. 5 years
</div>
<div class="h1 sds-colorInherit">+7,27 %</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</main>
<footer class="sds-digitalSignage__footer position-sticky sds-headingColor">
<div class="row align-items-center justify-content-between flex-nowrap">
<div class="col sds-digitalSignage__text11xl5">
SPUERKEESS.LU
</div>
<div class="col d-flex justify-content-end">
<p class="sds-formDisclaimer">
*: Niv. risque = l'indicateur du risque a été déterminé sur base de la performance historique des 5 dernières années et ne saurait être considéré comme un indicateur fiable du profil de risque futur du compartiment. L'indicateur se présente sous forme d'échelle numérique graduée de 1 pour un risque faible à 7 pour un risque élevé.
</p>
</div>
</div>
</footer>
</div>
{% extends "@spk-digital-signage-portrait-layout" %}
{% set headerBottom = true %}
{% block headerBottom %}
<div>
<h1 class="h-pageCover">Les fonds</h1>
<h2 class="{{ namespace }}headingLight h1">lux|funds</h2>
</div>
{% endblock %}
{% block main %}
<div class="{{ namespace }}slider w-100">
<div class="{{ namespace }}slider__inner swiper" id="swiperDigitalSignageLuxfunds" data-visible-slides="3" data-delay="1000" data-speed="1000">
<ul class="swiper-wrapper list-unstyled" id="accordionDigitalSignageLuxfunds">
{% for key, item in items %}
<li class="swiper-slide">
<div class="{{ namespace }}box -insetLg {% if loop.first %} -boxScaledFixed{% else %}{% endif%} {{ namespace }}shadowInteraction" data-js-collapse-element>
<button class="{{ namespace }}digitalSignage__boxToggle" type="button" data-toggle="collapse" data-target="#box-{{ loop.index }}-collapse" aria-expanded="false" aria-controls="box-{{ loop.index }}-collapse"></button>
<div class="collapse fade" data-js-box-base-info data-active="{% if item.active %}false{% else %}true{% endif%}">
<div class="row align-items-end no-bottom-gutter">
<div class="col-7">
<div class="{{ namespace }}stackXl">
<div class="{{ namespace }}staticStackXs">
<div class="{{ namespace }}textSemiBold" style="color: {{ item.labelColor }};">{{ item.label }}</div>
<div class="h2">{{ item.title }}</div>
</div>
{% render '@spk-content-block-list',{
listItem: item.infoLabels,
classes: ["no-bottom-gutter"]
}, true %}
</div>
</div>
<div class="col-2">
{% if item.positive %}
{% set trendImg = "/spuerkeess-site/components/digital-signage/small-graph.svg" %}
{% else %}
{% set trendImg = "/spuerkeess-site/components/digital-signage/small-graph.svg" %}
{% endif %}
<img class="img-fluid" src="{{ (mediaPath + trendImg) | path }}" alt="">
</div>
<div class="col-3">
<div class="{{ namespace }}box{% if item.positive %} -success{% elseif item.negative %} -danger{% endif%} -insetLg text-center">
<div class="{{ namespace }}textSemiBold {{ namespace }}bodyXl">
{{ item.statusBoxLabel }}
</div>
<div class="h1 {{ namespace }}colorInherit">{{ item.statusBoxValue }}</div>
</div>
</div>
</div>
</div>
<div id="box-{{ loop.index }}-collapse" class="collapse fade" data-detail data-active="{% if item.active %}true{% else %}false{% endif%}">
<div class="{{ namespace }}stackXl">
<div class="{{ namespace }}staticStackXs">
<div style="color: {{ item.labelColor }};">{{ item.label }}</div>
<div class="h1">{{ item.title }}</div>
</div>
<div class="{{ namespace }}digitalSignage__innerCollapse row no-bottom-gutter align-items-end">
<div class="{{ namespace }}digitalSignage__graphWrapper">
<img src="{{ graph | path }}" alt="">
</div>
{% for key, item in item.infoLabels %}
<div class="col-3">
<div class="{{ namespace }}box -insetLg text-center">
<div class="{{ namespace }}textSemiBold {{ namespace }}bodyLg">
{{ item.label }}
</div>
<div class="h1 {{ namespace }}colorInherit">{{ item.text }}</div>
</div>
</div>
{% endfor %}
<div class="col-3 ml-auto">
<div class="{{ namespace }}box{% if item.positive %} -success{% elseif item.negative %} -danger{% endif%} -insetLg text-center">
<div class="{{ namespace }}textSemiBold {{ namespace }}bodyXl">
{{ item.statusBoxLabel }}
</div>
<div class="h1 {{ namespace }}colorInherit">{{ item.statusBoxValue }}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
{% endfor %}
</ul>
</div>
</div>
{% endblock %}
import Swiper from "swiper";
export default class DigitalSignageLuxfunds {
constructor() {
this.index = 1;
this.currentgroup = 1;
this.swiperElt = document.querySelector("#swiperDigitalSignageLuxfunds");
this.delay = this.swiperElt.dataset.delay;
this.speed = this.swiperElt.dataset.speed;
this.spacing = window.getComputedStyle(document.body).getPropertyValue('--sys-space-stack-1000');
this.visibleSlides = this.swiperElt.dataset.visibleSlides;
this.isend = false;
this.initSlide();
this.initSwiper();
}
initSlide () {
document.querySelectorAll(".swiper-slide").forEach((elem) => {
elem.querySelector("[data-active='true']")?.classList.add("show");
elem.querySelector("[data-active='false']")?.classList.remove("show");
})
}
initSwiper() {
this.swiper = new Swiper(this.swiperElt, {
direction: 'vertical',
keyboard: false,
spaceBetween: parseInt(this.spacing, 10),
slidesPerView: parseInt(this.visibleSlides),
slidesPerGroup: parseInt(this.visibleSlides),
speed: this.speed,
on: {
init: (swiper) => {
// set swiper height: one active slide height + two regular inactive slides heights
swiper.el.style.height = swiper.slides[0].clientHeight + (swiper.slides[1].clientHeight*2) + "px";
// on init, fire default set interval
this.intervaltest = setInterval(() => this.defaultSlideHandling(), this.delay)
},
slideChange: (swiper) => {
// on slide change, swiper end event detected set isend to true else
swiper.isEnd ? this.isend = true : this.isend = false;
// if last slide is alone in group fire interval function that handles lone slide
if (this.isend && swiper.slides.length % parseInt(this.visibleSlides) === 1) {
console.log(swiper.slides.length)
console.log(swiper.realIndex)
console.log(this.index)
this.index = swiper.slides.length - (swiper.slides.length - this.index)
this.isend = true
this.intervaltest = setInterval(() => this.loneSlideOnSwiperEnd(), this.delay)
}
// fire regular slide interval function
else {
this.index = swiper.activeIndex + 1
++this.currentgroup
this.intervaltest = setInterval(() => this.defaultSlideHandling(), this.delay)
}
}
}
});
}
loneSlideOnSwiperEnd(){
console.log("custom end")
console.log(this.index)
let lastGroupIndex = this.currentgroup * parseInt(this.visibleSlides)
console.log(lastGroupIndex)
let previous = this.swiper.slides[this.index - 1]
if (previous) {
this.togglePreviousSlide(previous)
}
let current = this.swiper.slides[this.index++]
this.toggleActiveSlide(current)
this.resetSwiperPosition(current)
}
defaultSlideHandling() {
console.log("loop: "+ this.index)
console.log("isend: "+ this.isend)
let lastGroupIndex = this.currentgroup * parseInt(this.visibleSlides)
console.log("lastGroupIndex: "+ lastGroupIndex)
if (this.index <= lastGroupIndex) {
if (this.index >= 1) {
let previous = this.swiper.slides[this.index - 1]
if (previous) {
this.togglePreviousSlide(previous)
}
}
let current = this.swiper.slides[this.index++];
this.toggleActiveSlide(current)
}
if (this.isend && this.index >= lastGroupIndex) {
this.resetSwiperPosition()
} else {
if(this.index >= lastGroupIndex) {
clearInterval(this.intervaltest);
setTimeout(() => {
console.log("slide to"+ this.index)
this.swiper.slideTo(this.index)
}, this.delay)
}
}
}
resetSwiperPosition () {
clearInterval(this.intervaltest);
setTimeout(() => {
this.index = 1
this.currentgroup = 0
this.initSlide()
this.swiper.slideTo(1)
}, this.delay);
}
togglePreviousSlide (elt) {
$(elt).find("[data-js-box-base-info]").collapse("toggle");
$(elt).find("[data-detail]").collapse("toggle");
}
toggleActiveSlide (elt) {
$(elt).find("[data-js-box-base-info]").collapse("toggle");
$(elt).find("[data-detail]").collapse("toggle");
}
}