<div class="sds-digitalSignage d-flex flex-column -portraitLuxfunds">
<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-stackLg">
<ul class="list-unstyled sds-staticStackMd accordion" id="accordionDigitalSignage" data-delay="2500">
<li class="sds-box -insetLg -boxScaledFixed sds-shadowInteraction" data-js-collapse-element>
<button class="sds-digitalSignage__boxToggle" type="button" data-toggle="collapse" data-target="#box-0-collapse" aria-expanded="false" aria-controls="box-0-collapse"></button>
<div class="collapse fade " data-js-box-base-info>
<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-0-collapse" class="collapse fade show" data-parent="#accordionDigitalSignage">
<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>
</li>
<li class="sds-box -insetLg 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 show" data-js-box-base-info>
<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-1-collapse" class="collapse fade" data-parent="#accordionDigitalSignage">
<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>
</li>
<li 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 show" data-js-box-base-info>
<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-2-collapse" class="collapse fade" data-parent="#accordionDigitalSignage">
<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>
</li>
<li 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 show" data-js-box-base-info>
<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-3-collapse" class="collapse fade" data-parent="#accordionDigitalSignage">
<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>
</li>
<li 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 show" data-js-box-base-info>
<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-4-collapse" class="collapse fade" data-parent="#accordionDigitalSignage">
<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>
</li>
<li 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 show" data-js-box-base-info>
<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-5-collapse" class="collapse fade" data-parent="#accordionDigitalSignage">
<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>
</li>
<li 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 show" data-js-box-base-info>
<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-parent="#accordionDigitalSignage">
<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>
</li>
</ul>
</div>
</main>
<footer class="sds-digitalSignage__footer position-sticky sds-headingColor">
<div class="row justify-content-between flex-nowrap no-bottom-gutter">
<div class="sds-digitalSignage__footerUrl col sds-digitalSignage__text11xl5 d-flex">
<span class="sds-fontHeadingLight text-uppercase">SPUERKEESS.LU/</span>
<span class="sds-fontHeadingBold">extension</span>
</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 }}stackLg">
<ul class="list-unstyled {{ namespace }}staticStackMd accordion" id="accordionDigitalSignage" data-delay="2500">
{% for key, item in items %}
<li 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.index0 }}-collapse" aria-expanded="false" aria-controls="box-{{ loop.index0 }}-collapse"></button>
<div class="collapse fade {% if loop.first %} {% else %} show{% endif%}" data-js-box-base-info>
<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.index0 }}-collapse" class="collapse fade{% if loop.first %} show{% else %}{% endif%}" data-parent="#accordionDigitalSignage">
<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>
</li>
{% endfor %}
</ul>
</div>
{% endblock %}
export default class DigitalSignageLuxfunds {
constructor() {
this.carousel = document.querySelector("#accordionDigitalSignage");
this.delay = this.carousel.dataset.delay;
this.siblingCollapseToggle();
this.collapseIntervalReveal();
}
siblingCollapseToggle() {
$('[data-parent]').on({
'show.bs.collapse': function(event) {
const collapse = event.target; // L'élément collapse qui a été déclenché
const shadowInteraction = collapse.closest("[data-js-collapse-element]");
$(shadowInteraction).find("[data-js-box-base-info]").collapse("hide");
},
'hide.bs.collapse': function(event) {
const collapse = event.target; // L'élément collapse qui a été déclenché
const shadowInteraction = collapse.closest("[data-js-collapse-element]");
$(shadowInteraction).find("[data-js-box-base-info]").collapse("show")
},
'shown.bs.collapse': function(event) {
const collapse = event.target; // L'élément collapse qui a été déclenché
const shadowInteraction = collapse.closest("[data-js-collapse-element]");
if($(collapse).attr("id") === "box-0-collapse") {
window.scrollBy({
top: 0,
behavior: 'smooth'
});
}else {
window.scrollBy({
top: 205,
behavior: 'smooth'
});
}
if (shadowInteraction) {
shadowInteraction.classList.add("-boxScaledFixed");
}
},
'hidden.bs.collapse': function(event) {
const collapse = event.target; // L'élément collapse qui a été déclenché
const shadowInteraction = collapse.closest("[data-js-collapse-element]");
if (shadowInteraction) {
shadowInteraction.classList.remove("-boxScaledFixed");
}
}
});
}
collapseIntervalReveal() {
let i = 1;
let _scrollTop = 0;
let buttons = $('#accordionDigitalSignage [data-toggle="collapse"]');
let carousel = document.querySelector("#accordionDigitalSignage");
let delay = carousel.dataset.delay;
setInterval(function() {
let _this = buttons[i++];
$(_this).trigger("click");
if(i === buttons.length) {
i = 0;
setTimeout(() => {
window.scroll({
top: 0,
behavior: 'smooth'
});
}, delay)
}
}, delay);
}
}