To toggle card positions on click/touch you should:
<div class="sds-snetFrame">
<nav role="navigation">
<ul class="list-unstyled">
<li>
<a href="#sidebarNav" class="sds-skipNavigation sds-box -insetMd sds-scaleInteraction text-underline">
Skip to sidebar navigation
</a>
</li>
<li>
<a href="#frameMain" class="sds-skipNavigation sds-box -insetMd sds-scaleInteraction text-underline">
Skip to content
</a>
</li>
</ul>
</nav>
<header role="banner" class="sds-navTopbar sds-snetFrame__header">
<div class="sds-navTopbar__container">
<nav role="navigation" class="sds-navTopbar__inner navbar navbar-expand">
<div class="sds-navTopbar__alignToMainContent">
<a class="sds-navTopbar__logo navbar-brand" href="#">
<span class="sr-only">Accueil S-Net</span>
<img src="../../media/logos/logo-bcee.svg" class="img-fluid" alt="Logo Spuerkeess">
</a>
</div>
<div class="sds-navTopbar__meta sds-textHelper">
<span>S-Net Privé</span>
<span class="sds-navTopbar__metaTime">Mercredi, 23. Octobre・10:54</span>
</div>
<div class="sds-navTopbar__collapse navbar-collapse" id="sds-navTopbar__collapse">
<ul class="sds-navTopbar__content navbar-nav">
<li class="sds-navTopbar__item dropdown">
<button type="button" class="sds-btn -iconBtn -secondary100 sds-navTopbar__icon dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span aria-hidden="true" class="sds-icon sds-icon-bell"></span>
</button>
</li>
<li class="sds-navTopbar__item">
<button type="button" class="sds-btn -iconBtn -secondary100 sds-navTopbar__icon">
<span aria-hidden="true" class="sds-icon sds-icon-speechbubble"></span>
</button>
<span class="sds-navTopbar__itemLabel sds-textHelper">Aide</span>
</li>
<li class="sds-navTopbar__item dropdown">
<button type="button" class="sds-navTopbar__dropdownToggle -avatar dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<div class="sds-avatar centeredBgi sds-navTopbar__userDropdownAvatar">
<img class="img-fluid" src="../../media/snet/avatars/nopic/avatarNoPicWoman.svg" alt="">
</div>
<span class="sds-navTopbar__userDropdownLabel sds-textHelper">Label With Name</span>
<span class="sds-iconCircle" aria-hidden="true">
<span class="sds-icon sds-icon-chevrondown"></span>
</span>
</button>
<div class="sds-userMenu sds-navTopbar__userMenu dropdown-menu dropdown-menu-right">
<div class="sds-userMenu__header d-flex align-items-center">
<div class="sds-avatar centeredBgi -avatarXl sds-userMenu__avatar">
<img class="img-fluid" src="../../media/snet/avatars/nopic/avatarNoPicWoman.svg" alt="">
</div>
<div class="sds-userMenu__headerText">
<div class="h3">Jil Schmit Longname</div>
<div class="sds-userMenu__headerMeta sds-textHelper">Espace privé</div>
</div>
</div>
<ul class="sds-userMenu__content list-unstyled">
<li class="sds-userMenu__item">
<a href="" class="sds-userMenu__link d-flex align-items-center justify-content-between">
<span class="font-weight-semibold">Mes données personnelles</span>
<div class="sds-userMenu__itemMeta d-flex align-items-center">
<span class="sds-iconCircle -secondary10" aria-hidden="true">
<span class="sds-icon sds-icon-client"></span>
</span>
</div>
</a>
</li>
<li class="sds-userMenu__item">
<a href="" class="sds-userMenu__link d-flex align-items-center justify-content-between">
<span class="font-weight-semibold">Mes commandes</span>
<div class="sds-userMenu__itemMeta d-flex align-items-center">
<span class="sds-countBadge -primary">
01
<span class="sr-only">Notifications non lues</span>
</span>
<span class="sds-iconCircle -secondary10" aria-hidden="true">
<span class="sds-icon sds-icon-shoppingbag"></span>
</span>
</div>
</a>
</li>
<li class="sds-userMenu__item">
<a href="" class="sds-userMenu__link d-flex align-items-center justify-content-between">
<span class="font-weight-semibold">Mes documents</span>
<div class="sds-userMenu__itemMeta d-flex align-items-center">
<span class="sds-iconCircle -secondary10" aria-hidden="true">
<span class="sds-icon sds-icon-document"></span>
</span>
</div>
</a>
</li>
<li class="sds-userMenu__item">
<a href="" class="sds-userMenu__link d-flex align-items-center justify-content-between">
<span class="font-weight-semibold">Paramètres</span>
<div class="sds-userMenu__itemMeta d-flex align-items-center">
<span class="sds-iconCircle -secondary10" aria-hidden="true">
<span class="sds-icon sds-icon-gear"></span>
</span>
</div>
</a>
</li>
<li class="sds-userMenu__item -borderTop">
<button type="button" class="sds-userMenu__link d-flex align-items-center justify-content-between" data-toggle="modal" data-target="#modalConventions">
<span class="font-weight-semibold">Changer compte</span>
<div class="sds-userMenu__itemMeta d-flex align-items-center">
<span class="sds-iconCircle -secondary10" aria-hidden="true">
<span class="sds-icon sds-icon-switch"></span>
</span>
</div>
</button>
</li>
</ul>
<div class="sds-userMenu__footer">
<div class="h4">Votre conseiller</div>
<div class="sds-userMenu__footerRow">
<div class="sds-avatar centeredBgi -avatarXl">
<img class="img-fluid" src="../../media/snet/avatars/avatarBankerMain.png" alt="">
</div>
<div class="sds-userMenu__footerContent">
<div class="font-weight-semibold">Admir SKRIJELJ</div>
<div class="sds-userMenu__footerHelperText sds-textHelperSmall">
Personal Banker • Centre Financier Place de Metz
</div>
<div class="sds-userMenu__footerContactInfo">
<a class="d-block" href="tel:+35240158302">+352 4015-8302</a>
<a class="d-block" href="mailto:a.skrijelj@spuerkeess.lu">adresse.longue.skrijelj@spuerkeess.lu</a>
</div>
</div>
<div class="sds-userMenu__footerRowButtons">
<a href="tel:+35240158302" class="sds-btn -iconBtn -secondary10">
<span aria-hidden="true" class="sds-icon sds-icon-phone"></span>
</a>
<a href="mailto:a.skrijelj@spuerkeess.lu" class="sds-btn -iconBtn -secondary10">
<span aria-hidden="true" class="sds-icon sds-icon-paperplane"></span>
</a>
</div>
</div>
</div>
</div>
</li>
<li class="sds-navTopbar__item">
<button type="button" class="sds-btn -iconBtn -secondary100 sds-navTopbar__icon">
<span aria-hidden="true" class="sds-icon sds-icon-logout"></span>
</button>
</li>
</ul>
</div>
</nav>
</div>
</header>
<div class="sds-snetFrame__inner">
<div class="sds-snetFrame__fader" aria-hidden="true"></div>
<div class="sds-snetFrame__menuContainer">
<nav role="navigation" class="sds-snetFrame__menu" id="sidebarNav">
<div class="sds-snetFrame__menuList" tabindex="0">
<ul class="sds-snetFrame__menuListInner list-unstyled">
<li class="sds-snetFrame__menuItem -isActive">
<a href="" class="sds-snetFrame__menuLink" aria-current="page">
<span data-toggle="tooltip" data-title="Situation financière" data-placement="right" data-boundary="window">
<span class="sds-iconCircle -secondary60 sds-snetFrame__menuLinkBubble" aria-hidden="true">
<span class="sds-icon sds-icon-graph"></span>
</span>
</span>
<span class="sds-snetFrame__menuItemText">Situation financière</span>
</a>
</li>
<li class="sds-snetFrame__menuItem -isOpen">
<a href="" class="sds-snetFrame__menuLink">
<span data-toggle="tooltip" data-title="Paiements" data-placement="right" data-boundary="window">
<span class="sds-iconCircle -secondary60 sds-snetFrame__menuLinkBubble" aria-hidden="true">
<span class="sds-icon sds-icon-plus"></span>
</span>
</span>
<span class="sds-snetFrame__menuItemText">Paiements</span>
</a>
</li>
<li class="sds-snetFrame__menuItem">
<a href="" class="sds-snetFrame__menuLink">
<span data-toggle="tooltip" data-title="My Intelligent Assistant" data-placement="right" data-boundary="window">
<span class="sds-iconCircle -secondary60 sds-snetFrame__menuLinkBubble" aria-hidden="true">
<span class="sds-icon sds-icon-mia"></span>
</span>
</span>
<span class="sds-snetFrame__menuItemText">My Intelligent Assistant</span>
</a>
</li>
<li class="sds-snetFrame__menuItem">
<a href="" class="sds-snetFrame__menuLink">
<span data-toggle="tooltip" data-title="Instruments financiers" data-placement="right" data-boundary="window">
<span class="sds-iconCircle -secondary60 sds-snetFrame__menuLinkBubble" aria-hidden="true">
<span class="sds-icon sds-icon-instrument"></span>
</span>
</span>
<span class="sds-snetFrame__menuItemText">Instruments financiers</span>
</a>
</li>
<li class="sds-snetFrame__menuItem -hasNotifs">
<a href="" class="sds-snetFrame__menuLink">
<span data-toggle="tooltip" data-title="Mailbox" data-placement="right" data-boundary="window">
<span class="sds-snetFrame__menuLinkNotif"> 01</span>
<span class="sds-iconCircle -secondary60 sds-snetFrame__menuLinkBubble" aria-hidden="true">
<span class="sds-icon sds-icon-message"></span>
</span>
</span>
<span class="sds-snetFrame__menuItemText">Mailbox</span>
</a>
</li>
<li class="sds-snetFrame__menuItem">
<a href="" class="sds-snetFrame__menuLink">
<span data-toggle="tooltip" data-title="Store" data-placement="right" data-boundary="window">
<span class="sds-iconCircle -secondary60 sds-snetFrame__menuLinkBubble" aria-hidden="true">
<span class="sds-icon sds-icon-shoppingbag"></span>
</span>
</span>
<span class="sds-snetFrame__menuItemText">Store</span>
</a>
</li>
<li class="sds-snetFrame__menuItem">
<a href="" class="sds-snetFrame__menuLink">
<span data-toggle="tooltip" data-title="Espace fiscal" data-placement="right" data-boundary="window">
<span class="sds-iconCircle -secondary60 sds-snetFrame__menuLinkBubble" aria-hidden="true">
<span class="sds-icon sds-icon-percentage"></span>
</span>
</span>
<span class="sds-snetFrame__menuItemText">Espace fiscal</span>
</a>
</li>
</ul>
<ul class="sds-snetFrame__settings list-unstyled">
<li class="sds-snetFrame__settingsItem sds-snetFrame__settingsOpenMenu">
<button type="button" class="sds-snetFrame__settingsButton">
<span class="sds-snetFrame__settingsButtonIcon sds-icon sds-icon-chevronrightdouble" data-toggle="tooltip" data-title="Toggle Menu" data-placement="right" data-boundary="window"></span>
<span class="sr-only">Déployer le menu</span>
</button>
</li>
</ul>
</div>
</nav>
</div>
<main role="main" class="sds-snetFrame__main" id="frameMain">
<!-- panel header content start -->
<div class="sds-snetFrame__mainHeader -headroom">
<div class="sds-panelHeader -headroom">
<div class="sds-panelHeader__actionGroup">
<nav role="navigation" class="sds-linkTabs">
<ul class="sds-linkTabs__inner nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="">Mes comptes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Autres comptes</a>
</li>
</ul>
</nav>
</div>
<div class="sds-panelHeader__alignEnd">
<div class="sds-panelHeader__actionGroup">
<div class="dropdown">
<button type="button" class="sds-btn -iconBtn -btnSecondary" data-toggle="dropdown">
<span aria-hidden="true" class="sds-icon sds-icon-more"></span>
</button>
<div aria-labelledby="" class="sds-actionMenu dropdown-menu dropdown-menu-right">
<ul class="list-unstyled">
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 1
</a>
</li>
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 2
</a>
</li>
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 3
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- panel header content end -->
<div class="sds-snetFrame__mainContent">
<!-- main content start -->
<div class="flex-grow-1 overflow-hidden sds-stackLg">
<div class="sds-sitfinBlock -hasAction">
<div class="sds-sitfinBlock__header">
<div class="sds-sitfinBlock__heading d-flex align-items-center">
<button type="button" class="sds-btn -iconBtn -btnSecondary -btnSmall sds-sitfinBlock__collapseTrigger" data-toggle="collapse" data-target="#sitfin-collapse-1" aria-expanded="false">
<span aria-hidden="true" class="sds-icon sds-icon-plus"></span>
</button>
<div class="h3">Comptes & cartes</div>
</div>
<div class="sds-sitfinBlock__meta sds-textHelper">
3 comptes <br> 3 cartes
</div>
<div class="sds-amount -amountPositive -amountXl">
<div class="sds-amount__body">
<span class="sds-amount__value">{+#.###,##}</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
</div>
<div class="sds-sitfinBlock__collapse collapse" id="sitfin-collapse-1">
<div class="sds-sitfinBlock__collapseInner">
<div class="sds-sitfinBlock__row">
<div class="sds-sitfinBlock__rowAvatar">
<div class="sds-avatar centeredBgi -avatarSm -bank">
<img class="img-fluid" src="../../media/logos/logo-spuerkeess.png" alt="">
</div>
</div>
<div class="sds-sitfinBlock__rowInner">
<div class="sds-sitfinBlock__cardWrapper">
<div class="sds-sitfinCard sds-sitfinBlock__card">
<div class="sds-sitfinCard__header">
<div class="sds-accountInfo">
<div class="sds-accountInfo__content">
<p class="sds-accountInfo__title">
<span class="text-truncate">
{Account Number}
</span>
</p>
<p class="sds-accountInfo__meta">LU## #### #### #### ####</p>
</div>
</div>
<div class="dropdown">
<button type="button" class="sds-btn -iconBtn -btnSecondary -ghost sds-sitfinCard__action" data-reference="parent" data-boundary="window" data-toggle="dropdown">
<span aria-hidden="true" class="sds-icon sds-icon-more"></span>
</button>
<div aria-labelledby="" class="sds-actionMenu dropdown-menu dropdown-menu-right">
<ul class="list-unstyled">
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 1
</a>
</li>
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 2
</a>
</li>
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 3
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="sds-sitfinCard__middle">
<div class="sds-sitfinCard__middleIcon">
<img class="img-fluid" src="https:/design.spuerkeess.lu/media/illustrative-icons/svg80x/product/sdsillustrativeicon-account-p.svg" alt="">
</div>
</div>
<div class="sds-sitfinCard__footer">
<div class="sds-sitfinCard__footerBlockStart">
<div class="text-truncate">
<div class="sds-amount -amountPositive -amountLg">
<div class="sds-amount__body">
<span class="sds-amount__value">{+#.###,##}</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
</div>
</div>
</div>
<span class="sds-dot sds-sitfinCard__dotBefore">
</span>
<span class="sds-dot sds-sitfinCard__dotAfter">
</span>
</div>
</div>
<div class="sds-sitfinBlock__rowMoreCards">
<div class="sds-sitfinBlock__cardWrapper">
<div class="sds-sitfinCard -rounded sds-sitfinBlock__card">
<div class="sds-sitfinCard__header">
<div class="sds-accountInfo">
<div class="sds-accountInfo__content">
<p class="sds-accountInfo__title">
<span class="text-truncate">
{Card Name}
</span>
</p>
<p class="sds-accountInfo__meta">LU## #### #### #### ####</p>
</div>
</div>
<div class="dropdown">
<button type="button" class="sds-btn -iconBtn -btnSecondary -ghost sds-sitfinCard__action" data-reference="parent" data-boundary="window" data-toggle="dropdown">
<span aria-hidden="true" class="sds-icon sds-icon-more"></span>
</button>
<div aria-labelledby="" class="sds-actionMenu dropdown-menu dropdown-menu-right">
<ul class="list-unstyled">
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 1
</a>
</li>
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 2
</a>
</li>
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 3
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="sds-sitfinCard__middle -hasSeparator">
<div class="sds-sitfinCard__middleIcon" data-toggle="tooltip" data-placement="bottom" title="Visa Debit">
<img class="img-fluid" src="../../media/snet/components/sitfin/visaclassic-small.png" alt="">
</div>
</div>
<div class="sds-sitfinCard__footer">
<div class="sds-sitfinCard__footerBlockStart">
<div class="text-truncate">
<span class="sds-sitfinCard__alert sds-icon sds-icon-alert"></span>
<div class="sds-amount -amountNegative -amountLg">
<div class="sds-amount__body">
<span class="sds-amount__value">{-#.###,##}</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
<span class="sds-sitfinCard__helper sds-textHelper">/ {#.###} €</span>
</div>
</div>
</div>
<span class="sds-dot sds-sitfinCard__dotBefore">
</span>
<span class="sds-dot sds-sitfinCard__dotAfter">
</span>
</div>
</div>
<div class="sds-sitfinBlock__cardWrapper">
<div class="sds-sitfinCard -rounded -dashed sds-sitfinBlock__card">
<div class="sds-sitfinCard__header">
<div class="sds-accountInfo">
<div class="sds-accountInfo__content">
<p class="sds-accountInfo__title">
<span class="text-truncate">
{Card Name}
</span>
</p>
<p class="sds-accountInfo__meta">#### • • • • • • • • ####</p>
</div>
</div>
<button type="button" class="sds-btn -iconBtn -btnSecondary -ghost sds-sitfinCard__action">
<span aria-hidden="true" class="sds-icon sds-icon-cross"></span>
</button>
</div>
<div class="sds-sitfinCard__middle -hasSeparator">
<div class="sds-sitfinCard__middleIcon" data-toggle="tooltip" data-placement="bottom" title="Visa Debit">
<img class="img-fluid" src="../../media/snet/components/sitfin/visaclassic-small.png" alt="">
</div>
</div>
<div class="sds-sitfinCard__footer">
<div class="sds-sitfinCard__footerBlockStart">
<button type="button" class="sds-btn -btnSecondary -btnSmall">
<span class="sds-btn__text">
Afficher
</span>
</button>
</div>
</div>
<span class="sds-dot sds-sitfinCard__dotBefore">
</span>
<span class="sds-dot sds-sitfinCard__dotAfter">
</span>
</div>
</div>
</div>
</div>
</div>
<div class="sds-sitfinBlock__row">
<div class="sds-sitfinBlock__rowAvatar">
<div class="sds-avatar centeredBgi -avatarSm -bank">
<img class="img-fluid" src="../../media/logos/logo-spuerkeess.png" alt="">
</div>
</div>
<div class="sds-sitfinBlock__rowInner -stacked">
<div class="sds-sitfinCard sds-sitfinBlock__card">
<div class="sds-sitfinCard__header">
<div class="sds-accountInfo">
<div class="sds-accountInfo__content">
<p class="sds-accountInfo__title">
<span class="text-truncate">
{Account Number}
</span>
</p>
<p class="sds-accountInfo__meta">LU## #### #### #### ####</p>
</div>
</div>
<div class="dropdown">
<button type="button" class="sds-btn -iconBtn -btnSecondary -ghost sds-sitfinCard__action" data-reference="parent" data-boundary="window" data-toggle="dropdown">
<span aria-hidden="true" class="sds-icon sds-icon-more"></span>
</button>
<div aria-labelledby="" class="sds-actionMenu dropdown-menu dropdown-menu-right">
<ul class="list-unstyled">
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 1
</a>
</li>
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 2
</a>
</li>
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 3
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="sds-sitfinCard__middle">
<div class="sds-sitfinCard__middleIcon">
<img class="img-fluid" src="https:/design.spuerkeess.lu/media/illustrative-icons/svg80x/product/sdsillustrativeicon-account-p.svg" alt="">
</div>
</div>
<div class="sds-sitfinCard__footer">
<div class="sds-sitfinCard__footerBlockStart">
<div class="text-truncate">
<div class="sds-amount -amountPositive -amountLg">
<div class="sds-amount__body">
<span class="sds-amount__value">{+#.###,##}</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
</div>
</div>
</div>
<span class="sds-dot sds-sitfinCard__dotBefore">
</span>
<span class="sds-dot sds-sitfinCard__dotAfter">
</span>
</div>
<div class="sds-sitfinBlock__rowMoreCards">
<div class="sds-sitfinBlock__cardWrapper -isSelected">
<div class="sds-sitfinCard -rounded sds-sitfinBlock__card">
<div class="sds-sitfinCard__header">
<div class="sds-accountInfo">
<div class="sds-accountInfo__content">
<p class="sds-accountInfo__title">
<span class="text-truncate">
{Card Name}
</span>
</p>
<p class="sds-accountInfo__meta">LU## #### #### #### ####</p>
</div>
</div>
<div class="dropdown">
<button type="button" class="sds-btn -iconBtn -btnSecondary -ghost sds-sitfinCard__action" data-reference="parent" data-boundary="window" data-toggle="dropdown">
<span aria-hidden="true" class="sds-icon sds-icon-more"></span>
</button>
<div aria-labelledby="" class="sds-actionMenu dropdown-menu dropdown-menu-right">
<ul class="list-unstyled">
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 1
</a>
</li>
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 2
</a>
</li>
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 3
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="sds-sitfinCard__footer">
<div class="sds-sitfinCard__footerBlockStart">
<div class="sds-sitfinCard__loader"></div>
</div>
</div>
<span class="sds-dot sds-sitfinCard__dotBefore">
</span>
<span class="sds-dot sds-sitfinCard__dotAfter">
</span>
</div>
</div>
<div class="sds-sitfinBlock__cardWrapper -stacked1">
<div class="sds-sitfinCard -rounded sds-sitfinBlock__card -stacked1">
<div class="sds-sitfinCard__header">
<div class="sds-accountInfo">
<div class="sds-accountInfo__content">
<p class="sds-accountInfo__title">
<span class="text-truncate">
{Card Name}
</span>
</p>
<p class="sds-accountInfo__meta">LU## #### #### #### ####</p>
</div>
</div>
<div class="dropdown">
<button type="button" class="sds-btn -iconBtn -btnSecondary -ghost sds-sitfinCard__action" data-reference="parent" data-boundary="window" data-toggle="dropdown">
<span aria-hidden="true" class="sds-icon sds-icon-more"></span>
</button>
<div aria-labelledby="" class="sds-actionMenu dropdown-menu dropdown-menu-right">
<ul class="list-unstyled">
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 1
</a>
</li>
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 2
</a>
</li>
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 3
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="sds-sitfinCard__middle -hasSeparator">
<div class="sds-sitfinCard__middleIcon" data-toggle="tooltip" data-placement="bottom" title="Visa Debit">
<img class="img-fluid" src="../../media/snet/components/sitfin/visaclassic-small.png" alt="">
</div>
</div>
<div class="sds-sitfinCard__footer">
<div class="sds-sitfinCard__footerBlockStart">
<div class="text-truncate">
<span class="sds-sitfinCard__alert sds-icon sds-icon-alert"></span>
<div class="sds-amount -amountNegative -amountLg">
<div class="sds-amount__body">
<span class="sds-amount__value">{-#.###,##}</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
<span class="sds-sitfinCard__helper sds-textHelper">/ {#.###} €</span>
</div>
</div>
</div>
<span class="sds-dot sds-sitfinCard__dotBefore">
</span>
<span class="sds-dot sds-sitfinCard__dotAfter">
</span>
</div>
</div>
<div class="sds-sitfinBlock__cardWrapper -stacked2">
<div class="sds-sitfinCard -rounded sds-sitfinBlock__card -stacked2">
<div class="sds-sitfinCard__header">
<div class="sds-accountInfo">
<div class="sds-accountInfo__content">
<p class="sds-accountInfo__title">
<span class="text-truncate">
{Card Name}
</span>
</p>
<p class="sds-accountInfo__meta">LU## #### #### #### ####</p>
</div>
</div>
<div class="dropdown">
<button type="button" class="sds-btn -iconBtn -btnSecondary -ghost sds-sitfinCard__action" data-reference="parent" data-boundary="window" data-toggle="dropdown">
<span aria-hidden="true" class="sds-icon sds-icon-more"></span>
</button>
<div aria-labelledby="" class="sds-actionMenu dropdown-menu dropdown-menu-right">
<ul class="list-unstyled">
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 1
</a>
</li>
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 2
</a>
</li>
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 3
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="sds-sitfinCard__middle -hasSeparator">
<div class="sds-sitfinCard__middleIcon" data-toggle="tooltip" data-placement="bottom" title="Visa Debit">
<img class="img-fluid" src="../../media/snet/components/sitfin/visaclassic-small.png" alt="">
</div>
</div>
<div class="sds-sitfinCard__footer">
<div class="sds-sitfinCard__footerBlockStart">
<div class="text-truncate">
<span class="sds-sitfinCard__alert sds-icon sds-icon-alert"></span>
<div class="sds-amount -amountNegative -amountLg">
<div class="sds-amount__body">
<span class="sds-amount__value">{-#.###,##}</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
<span class="sds-sitfinCard__helper sds-textHelper">/ {#.###} €</span>
</div>
</div>
</div>
<span class="sds-dot sds-sitfinCard__dotBefore">
</span>
<span class="sds-dot sds-sitfinCard__dotAfter">
</span>
</div>
</div>
<div class="sds-sitfinBlock__cardWrapper -stacked3">
<div class="sds-sitfinCard -rounded sds-sitfinBlock__card -stacked3">
<div class="sds-sitfinCard__header">
<div class="sds-accountInfo">
<div class="sds-accountInfo__content">
<p class="sds-accountInfo__title">
<span class="text-truncate">
{Card Name}
</span>
</p>
<p class="sds-accountInfo__meta">LU## #### #### #### ####</p>
</div>
</div>
<div class="dropdown">
<button type="button" class="sds-btn -iconBtn -btnSecondary -ghost sds-sitfinCard__action" data-reference="parent" data-boundary="window" data-toggle="dropdown">
<span aria-hidden="true" class="sds-icon sds-icon-more"></span>
</button>
<div aria-labelledby="" class="sds-actionMenu dropdown-menu dropdown-menu-right">
<ul class="list-unstyled">
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 1
</a>
</li>
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 2
</a>
</li>
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 3
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="sds-sitfinCard__middle -hasSeparator">
<div class="sds-sitfinCard__middleIcon" data-toggle="tooltip" data-placement="bottom" title="Visa Debit">
<img class="img-fluid" src="../../media/snet/components/sitfin/visaclassic-small.png" alt="">
</div>
</div>
<div class="sds-sitfinCard__footer">
<div class="sds-sitfinCard__footerBlockStart">
<div class="text-truncate">
<span class="sds-sitfinCard__alert sds-icon sds-icon-alert"></span>
<div class="sds-amount -amountNegative -amountLg">
<div class="sds-amount__body">
<span class="sds-amount__value">{-#.###,##}</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
<span class="sds-sitfinCard__helper sds-textHelper">/ {#.###} €</span>
</div>
</div>
</div>
<span class="sds-dot sds-sitfinCard__dotBefore">
</span>
<span class="sds-dot sds-sitfinCard__dotAfter">
</span>
</div>
</div>
</div>
<a href="" class="sds-btn -iconBtn -btnSecondary sds-sitfinBlock__seeMore">
<span aria-hidden="true" class="sds-icon sds-icon-arrownext"></span>
</a>
</div>
</div>
<div class="sds-sitfinBlock__row">
<div class="sds-sitfinBlock__rowAvatar">
<div class="sds-avatar centeredBgi -avatarSm -bank">
<img class="img-fluid" src="../../media/logos/logo-spuerkeess.png" alt="">
</div>
</div>
<div class="sds-sitfinBlock__rowInner -stacked">
<div class="sds-sitfinCard sds-sitfinBlock__card">
<div class="sds-sitfinCard__header">
<div class="sds-accountInfo">
<div class="sds-accountInfo__content">
<p class="sds-accountInfo__title">
<span class="text-truncate">
{Account Number}
</span>
</p>
<p class="sds-accountInfo__meta">LU## #### #### #### ####</p>
</div>
</div>
<div class="dropdown">
<button type="button" class="sds-btn -iconBtn -btnSecondary -ghost sds-sitfinCard__action" data-reference="parent" data-boundary="window" data-toggle="dropdown">
<span aria-hidden="true" class="sds-icon sds-icon-more"></span>
</button>
<div aria-labelledby="" class="sds-actionMenu dropdown-menu dropdown-menu-right">
<ul class="list-unstyled">
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 1
</a>
</li>
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 2
</a>
</li>
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 3
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="sds-sitfinCard__middle">
<div class="sds-sitfinCard__middleIcon">
<img class="img-fluid" src="https:/design.spuerkeess.lu/media/illustrative-icons/svg80x/product/sdsillustrativeicon-account-p.svg" alt="">
</div>
</div>
<div class="sds-sitfinCard__footer">
<div class="sds-sitfinCard__footerBlockStart">
<div class="text-truncate">
<div class="sds-amount -amountPositive -amountLg">
<div class="sds-amount__body">
<span class="sds-amount__value">{+#.###,##}</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
</div>
</div>
</div>
<span class="sds-dot sds-sitfinCard__dotBefore">
</span>
<span class="sds-dot sds-sitfinCard__dotAfter">
</span>
</div>
<div class="sds-sitfinBlock__rowMoreCards">
<div class="sds-sitfinBlock__cardWrapper">
<div class="sds-sitfinCard -rounded sds-sitfinBlock__card -stacked1">
<div class="sds-sitfinCard__header">
<div class="sds-accountInfo">
<div class="sds-accountInfo__content">
<p class="sds-accountInfo__title">
<span class="text-truncate">
{Card Name}
</span>
</p>
<p class="sds-accountInfo__meta">LU## #### #### #### ####</p>
</div>
</div>
<div class="dropdown">
<button type="button" class="sds-btn -iconBtn -btnSecondary -ghost sds-sitfinCard__action" data-reference="parent" data-boundary="window" data-toggle="dropdown">
<span aria-hidden="true" class="sds-icon sds-icon-more"></span>
</button>
<div aria-labelledby="" class="sds-actionMenu dropdown-menu dropdown-menu-right">
<ul class="list-unstyled">
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 1
</a>
</li>
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 2
</a>
</li>
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 3
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="sds-sitfinCard__footer">
<div class="sds-sitfinCard__footerBlockStart">
<div class="sds-sitfinCard__loader"></div>
</div>
</div>
<span class="sds-dot sds-sitfinCard__dotBefore">
</span>
<span class="sds-dot sds-sitfinCard__dotAfter">
</span>
</div>
</div>
<div class="sds-sitfinBlock__cardWrapper -stacked1 -isSelected">
<div class="sds-sitfinCard -rounded sds-sitfinBlock__card">
<div class="sds-sitfinCard__header">
<div class="sds-accountInfo">
<div class="sds-accountInfo__content">
<p class="sds-accountInfo__title">
<span class="text-truncate">
{Card Name}
</span>
</p>
<p class="sds-accountInfo__meta">LU## #### #### #### ####</p>
</div>
</div>
<div class="dropdown">
<button type="button" class="sds-btn -iconBtn -btnSecondary -ghost sds-sitfinCard__action" data-reference="parent" data-boundary="window" data-toggle="dropdown">
<span aria-hidden="true" class="sds-icon sds-icon-more"></span>
</button>
<div aria-labelledby="" class="sds-actionMenu dropdown-menu dropdown-menu-right">
<ul class="list-unstyled">
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 1
</a>
</li>
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 2
</a>
</li>
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 3
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="sds-sitfinCard__middle -hasSeparator">
<div class="sds-sitfinCard__middleIcon" data-toggle="tooltip" data-placement="bottom" title="Visa Debit">
<img class="img-fluid" src="../../media/snet/components/sitfin/visaclassic-small.png" alt="">
</div>
</div>
<div class="sds-sitfinCard__footer">
<div class="sds-sitfinCard__footerBlockStart">
<div class="text-truncate">
<span class="sds-sitfinCard__alert sds-icon sds-icon-alert"></span>
<div class="sds-amount -amountNegative -amountLg">
<div class="sds-amount__body">
<span class="sds-amount__value">{-#.###,##}</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
<span class="sds-sitfinCard__helper sds-textHelper">/ {#.###} €</span>
</div>
</div>
</div>
<span class="sds-dot sds-sitfinCard__dotBefore">
</span>
<span class="sds-dot sds-sitfinCard__dotAfter">
</span>
</div>
</div>
<div class="sds-sitfinBlock__cardWrapper -stacked2">
<div class="sds-sitfinCard -rounded sds-sitfinBlock__card -stacked2">
<div class="sds-sitfinCard__header">
<div class="sds-accountInfo">
<div class="sds-accountInfo__content">
<p class="sds-accountInfo__title">
<span class="text-truncate">
{Card Name}
</span>
</p>
<p class="sds-accountInfo__meta">LU## #### #### #### ####</p>
</div>
</div>
<div class="dropdown">
<button type="button" class="sds-btn -iconBtn -btnSecondary -ghost sds-sitfinCard__action" data-reference="parent" data-boundary="window" data-toggle="dropdown">
<span aria-hidden="true" class="sds-icon sds-icon-more"></span>
</button>
<div aria-labelledby="" class="sds-actionMenu dropdown-menu dropdown-menu-right">
<ul class="list-unstyled">
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 1
</a>
</li>
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 2
</a>
</li>
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 3
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="sds-sitfinCard__middle -hasSeparator">
<div class="sds-sitfinCard__middleIcon" data-toggle="tooltip" data-placement="bottom" title="Visa Debit">
<img class="img-fluid" src="../../media/snet/components/sitfin/visaclassic-small.png" alt="">
</div>
</div>
<div class="sds-sitfinCard__footer">
<div class="sds-sitfinCard__footerBlockStart">
<div class="text-truncate">
<span class="sds-sitfinCard__alert sds-icon sds-icon-alert"></span>
<div class="sds-amount -amountNegative -amountLg">
<div class="sds-amount__body">
<span class="sds-amount__value">{-#.###,##}</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
<span class="sds-sitfinCard__helper sds-textHelper">/ {#.###} €</span>
</div>
</div>
</div>
<span class="sds-dot sds-sitfinCard__dotBefore">
</span>
<span class="sds-dot sds-sitfinCard__dotAfter">
</span>
</div>
</div>
<div class="sds-sitfinBlock__cardWrapper -stacked3">
<div class="sds-sitfinCard -rounded sds-sitfinBlock__card -stacked3">
<div class="sds-sitfinCard__header">
<div class="sds-accountInfo">
<div class="sds-accountInfo__content">
<p class="sds-accountInfo__title">
<span class="text-truncate">
{Card Name}
</span>
</p>
<p class="sds-accountInfo__meta">LU## #### #### #### ####</p>
</div>
</div>
<div class="dropdown">
<button type="button" class="sds-btn -iconBtn -btnSecondary -ghost sds-sitfinCard__action" data-reference="parent" data-boundary="window" data-toggle="dropdown">
<span aria-hidden="true" class="sds-icon sds-icon-more"></span>
</button>
<div aria-labelledby="" class="sds-actionMenu dropdown-menu dropdown-menu-right">
<ul class="list-unstyled">
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 1
</a>
</li>
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 2
</a>
</li>
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 3
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="sds-sitfinCard__middle -hasSeparator">
<div class="sds-sitfinCard__middleIcon" data-toggle="tooltip" data-placement="bottom" title="Visa Debit">
<img class="img-fluid" src="../../media/snet/components/sitfin/visaclassic-small.png" alt="">
</div>
</div>
<div class="sds-sitfinCard__footer">
<div class="sds-sitfinCard__footerBlockStart">
<div class="text-truncate">
<span class="sds-sitfinCard__alert sds-icon sds-icon-alert"></span>
<div class="sds-amount -amountNegative -amountLg">
<div class="sds-amount__body">
<span class="sds-amount__value">{-#.###,##}</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
<span class="sds-sitfinCard__helper sds-textHelper">/ {#.###} €</span>
</div>
</div>
</div>
<span class="sds-dot sds-sitfinCard__dotBefore">
</span>
<span class="sds-dot sds-sitfinCard__dotAfter">
</span>
</div>
</div>
</div>
<a href="" class="sds-btn -iconBtn -btnSecondary sds-sitfinBlock__seeMore">
<span aria-hidden="true" class="sds-icon sds-icon-arrownext"></span>
</a>
</div>
</div>
<div class="sds-sitfinBlock__row">
<div class="sds-sitfinBlock__rowAvatar">
<div class="sds-avatar centeredBgi -avatarSm -bank">
<img class="img-fluid" src="../../media/logos/logo-spuerkeess.png" alt="">
</div>
</div>
<div class="sds-sitfinBlock__rowInner -stacked">
<div class="sds-sitfinCard sds-sitfinBlock__card">
<div class="sds-sitfinCard__header">
<div class="sds-accountInfo">
<div class="sds-accountInfo__content">
<p class="sds-accountInfo__title">
<span class="text-truncate">
{Account Number}
</span>
</p>
<p class="sds-accountInfo__meta">LU## #### #### #### ####</p>
</div>
</div>
<div class="dropdown">
<button type="button" class="sds-btn -iconBtn -btnSecondary -ghost sds-sitfinCard__action" data-reference="parent" data-boundary="window" data-toggle="dropdown">
<span aria-hidden="true" class="sds-icon sds-icon-more"></span>
</button>
<div aria-labelledby="" class="sds-actionMenu dropdown-menu dropdown-menu-right">
<ul class="list-unstyled">
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 1
</a>
</li>
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 2
</a>
</li>
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 3
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="sds-sitfinCard__middle">
<div class="sds-sitfinCard__middleIcon">
<img class="img-fluid" src="https:/design.spuerkeess.lu/media/illustrative-icons/svg80x/product/sdsillustrativeicon-account-p.svg" alt="">
</div>
</div>
<div class="sds-sitfinCard__footer">
<div class="sds-sitfinCard__footerBlockStart">
<div class="text-truncate">
<div class="sds-amount -amountPositive -amountLg">
<div class="sds-amount__body">
<span class="sds-amount__value">{+#.###,##}</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
</div>
</div>
</div>
<span class="sds-dot sds-sitfinCard__dotBefore">
</span>
<span class="sds-dot sds-sitfinCard__dotAfter">
</span>
</div>
<div class="sds-sitfinBlock__rowMoreCards">
<div class="sds-sitfinBlock__cardWrapper">
<div class="sds-sitfinCard -rounded sds-sitfinBlock__card -stacked2">
<div class="sds-sitfinCard__header">
<div class="sds-accountInfo">
<div class="sds-accountInfo__content">
<p class="sds-accountInfo__title">
<span class="text-truncate">
{Card Name}
</span>
</p>
<p class="sds-accountInfo__meta">LU## #### #### #### ####</p>
</div>
</div>
<div class="dropdown">
<button type="button" class="sds-btn -iconBtn -btnSecondary -ghost sds-sitfinCard__action" data-reference="parent" data-boundary="window" data-toggle="dropdown">
<span aria-hidden="true" class="sds-icon sds-icon-more"></span>
</button>
<div aria-labelledby="" class="sds-actionMenu dropdown-menu dropdown-menu-right">
<ul class="list-unstyled">
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 1
</a>
</li>
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 2
</a>
</li>
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 3
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="sds-sitfinCard__footer">
<div class="sds-sitfinCard__footerBlockStart">
<div class="sds-sitfinCard__loader"></div>
</div>
</div>
<span class="sds-dot sds-sitfinCard__dotBefore">
</span>
<span class="sds-dot sds-sitfinCard__dotAfter">
</span>
</div>
</div>
<div class="sds-sitfinBlock__cardWrapper -stacked1">
<div class="sds-sitfinCard -rounded sds-sitfinBlock__card -stacked1">
<div class="sds-sitfinCard__header">
<div class="sds-accountInfo">
<div class="sds-accountInfo__content">
<p class="sds-accountInfo__title">
<span class="text-truncate">
{Card Name}
</span>
</p>
<p class="sds-accountInfo__meta">LU## #### #### #### ####</p>
</div>
</div>
<div class="dropdown">
<button type="button" class="sds-btn -iconBtn -btnSecondary -ghost sds-sitfinCard__action" data-reference="parent" data-boundary="window" data-toggle="dropdown">
<span aria-hidden="true" class="sds-icon sds-icon-more"></span>
</button>
<div aria-labelledby="" class="sds-actionMenu dropdown-menu dropdown-menu-right">
<ul class="list-unstyled">
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 1
</a>
</li>
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 2
</a>
</li>
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 3
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="sds-sitfinCard__middle -hasSeparator">
<div class="sds-sitfinCard__middleIcon" data-toggle="tooltip" data-placement="bottom" title="Visa Debit">
<img class="img-fluid" src="../../media/snet/components/sitfin/visaclassic-small.png" alt="">
</div>
</div>
<div class="sds-sitfinCard__footer">
<div class="sds-sitfinCard__footerBlockStart">
<div class="text-truncate">
<span class="sds-sitfinCard__alert sds-icon sds-icon-alert"></span>
<div class="sds-amount -amountNegative -amountLg">
<div class="sds-amount__body">
<span class="sds-amount__value">{-#.###,##}</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
<span class="sds-sitfinCard__helper sds-textHelper">/ {#.###} €</span>
</div>
</div>
</div>
<span class="sds-dot sds-sitfinCard__dotBefore">
</span>
<span class="sds-dot sds-sitfinCard__dotAfter">
</span>
</div>
</div>
<div class="sds-sitfinBlock__cardWrapper -stacked2 -isSelected">
<div class="sds-sitfinCard -rounded sds-sitfinBlock__card">
<div class="sds-sitfinCard__header">
<div class="sds-accountInfo">
<div class="sds-accountInfo__content">
<p class="sds-accountInfo__title">
<span class="text-truncate">
{Card Name}
</span>
</p>
<p class="sds-accountInfo__meta">LU## #### #### #### ####</p>
</div>
</div>
<div class="dropdown">
<button type="button" class="sds-btn -iconBtn -btnSecondary -ghost sds-sitfinCard__action" data-reference="parent" data-boundary="window" data-toggle="dropdown">
<span aria-hidden="true" class="sds-icon sds-icon-more"></span>
</button>
<div aria-labelledby="" class="sds-actionMenu dropdown-menu dropdown-menu-right">
<ul class="list-unstyled">
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 1
</a>
</li>
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 2
</a>
</li>
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 3
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="sds-sitfinCard__middle -hasSeparator">
<div class="sds-sitfinCard__middleIcon" data-toggle="tooltip" data-placement="bottom" title="Visa Debit">
<img class="img-fluid" src="../../media/snet/components/sitfin/visaclassic-small.png" alt="">
</div>
</div>
<div class="sds-sitfinCard__footer">
<div class="sds-sitfinCard__footerBlockStart">
<div class="text-truncate">
<span class="sds-sitfinCard__alert sds-icon sds-icon-alert"></span>
<div class="sds-amount -amountNegative -amountLg">
<div class="sds-amount__body">
<span class="sds-amount__value">{-#.###,##}</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
<span class="sds-sitfinCard__helper sds-textHelper">/ {#.###} €</span>
</div>
</div>
</div>
<span class="sds-dot sds-sitfinCard__dotBefore">
</span>
<span class="sds-dot sds-sitfinCard__dotAfter">
</span>
</div>
</div>
<div class="sds-sitfinBlock__cardWrapper -stacked3">
<div class="sds-sitfinCard -rounded sds-sitfinBlock__card -stacked3">
<div class="sds-sitfinCard__header">
<div class="sds-accountInfo">
<div class="sds-accountInfo__content">
<p class="sds-accountInfo__title">
<span class="text-truncate">
{Card Name}
</span>
</p>
<p class="sds-accountInfo__meta">LU## #### #### #### ####</p>
</div>
</div>
<div class="dropdown">
<button type="button" class="sds-btn -iconBtn -btnSecondary -ghost sds-sitfinCard__action" data-reference="parent" data-boundary="window" data-toggle="dropdown">
<span aria-hidden="true" class="sds-icon sds-icon-more"></span>
</button>
<div aria-labelledby="" class="sds-actionMenu dropdown-menu dropdown-menu-right">
<ul class="list-unstyled">
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 1
</a>
</li>
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 2
</a>
</li>
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 3
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="sds-sitfinCard__middle -hasSeparator">
<div class="sds-sitfinCard__middleIcon" data-toggle="tooltip" data-placement="bottom" title="Visa Debit">
<img class="img-fluid" src="../../media/snet/components/sitfin/visaclassic-small.png" alt="">
</div>
</div>
<div class="sds-sitfinCard__footer">
<div class="sds-sitfinCard__footerBlockStart">
<div class="text-truncate">
<span class="sds-sitfinCard__alert sds-icon sds-icon-alert"></span>
<div class="sds-amount -amountNegative -amountLg">
<div class="sds-amount__body">
<span class="sds-amount__value">{-#.###,##}</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
<span class="sds-sitfinCard__helper sds-textHelper">/ {#.###} €</span>
</div>
</div>
</div>
<span class="sds-dot sds-sitfinCard__dotBefore">
</span>
<span class="sds-dot sds-sitfinCard__dotAfter">
</span>
</div>
</div>
</div>
<a href="" class="sds-btn -iconBtn -btnSecondary sds-sitfinBlock__seeMore">
<span aria-hidden="true" class="sds-icon sds-icon-arrownext"></span>
</a>
</div>
</div>
<div class="sds-sitfinBlock__row">
<div class="sds-sitfinBlock__rowAvatar">
<div class="sds-avatar centeredBgi -avatarSm -bank">
<img class="img-fluid" src="../../media/logos/logo-spuerkeess.png" alt="">
</div>
</div>
<div class="sds-sitfinBlock__rowInner -stacked">
<div class="sds-sitfinCard sds-sitfinBlock__card">
<div class="sds-sitfinCard__header">
<div class="sds-accountInfo">
<div class="sds-accountInfo__content">
<p class="sds-accountInfo__title">
<span class="text-truncate">
{Account Number}
</span>
</p>
<p class="sds-accountInfo__meta">LU## #### #### #### ####</p>
</div>
</div>
<div class="dropdown">
<button type="button" class="sds-btn -iconBtn -btnSecondary -ghost sds-sitfinCard__action" data-reference="parent" data-boundary="window" data-toggle="dropdown">
<span aria-hidden="true" class="sds-icon sds-icon-more"></span>
</button>
<div aria-labelledby="" class="sds-actionMenu dropdown-menu dropdown-menu-right">
<ul class="list-unstyled">
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 1
</a>
</li>
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 2
</a>
</li>
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 3
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="sds-sitfinCard__middle">
<div class="sds-sitfinCard__middleIcon">
<img class="img-fluid" src="https:/design.spuerkeess.lu/media/illustrative-icons/svg80x/product/sdsillustrativeicon-account-p.svg" alt="">
</div>
</div>
<div class="sds-sitfinCard__footer">
<div class="sds-sitfinCard__footerBlockStart">
<div class="text-truncate">
<div class="sds-amount -amountPositive -amountLg">
<div class="sds-amount__body">
<span class="sds-amount__value">{+#.###,##}</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
</div>
</div>
</div>
<span class="sds-dot sds-sitfinCard__dotBefore">
</span>
<span class="sds-dot sds-sitfinCard__dotAfter">
</span>
</div>
<div class="sds-sitfinBlock__rowMoreCards">
<div class="sds-sitfinBlock__cardWrapper">
<div class="sds-sitfinCard -rounded sds-sitfinBlock__card -stacked3">
<div class="sds-sitfinCard__header">
<div class="sds-accountInfo">
<div class="sds-accountInfo__content">
<p class="sds-accountInfo__title">
<span class="text-truncate">
{Card Name}
</span>
</p>
<p class="sds-accountInfo__meta">LU## #### #### #### ####</p>
</div>
</div>
<div class="dropdown">
<button type="button" class="sds-btn -iconBtn -btnSecondary -ghost sds-sitfinCard__action" data-reference="parent" data-boundary="window" data-toggle="dropdown">
<span aria-hidden="true" class="sds-icon sds-icon-more"></span>
</button>
<div aria-labelledby="" class="sds-actionMenu dropdown-menu dropdown-menu-right">
<ul class="list-unstyled">
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 1
</a>
</li>
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 2
</a>
</li>
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 3
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="sds-sitfinCard__footer">
<div class="sds-sitfinCard__footerBlockStart">
<div class="sds-sitfinCard__loader"></div>
</div>
</div>
<span class="sds-dot sds-sitfinCard__dotBefore">
</span>
<span class="sds-dot sds-sitfinCard__dotAfter">
</span>
</div>
</div>
<div class="sds-sitfinBlock__cardWrapper -stacked1">
<div class="sds-sitfinCard -rounded sds-sitfinBlock__card -stacked1">
<div class="sds-sitfinCard__header">
<div class="sds-accountInfo">
<div class="sds-accountInfo__content">
<p class="sds-accountInfo__title">
<span class="text-truncate">
{Card Name}
</span>
</p>
<p class="sds-accountInfo__meta">LU## #### #### #### ####</p>
</div>
</div>
<div class="dropdown">
<button type="button" class="sds-btn -iconBtn -btnSecondary -ghost sds-sitfinCard__action" data-reference="parent" data-boundary="window" data-toggle="dropdown">
<span aria-hidden="true" class="sds-icon sds-icon-more"></span>
</button>
<div aria-labelledby="" class="sds-actionMenu dropdown-menu dropdown-menu-right">
<ul class="list-unstyled">
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 1
</a>
</li>
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 2
</a>
</li>
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 3
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="sds-sitfinCard__middle -hasSeparator">
<div class="sds-sitfinCard__middleIcon" data-toggle="tooltip" data-placement="bottom" title="Visa Debit">
<img class="img-fluid" src="../../media/snet/components/sitfin/visaclassic-small.png" alt="">
</div>
</div>
<div class="sds-sitfinCard__footer">
<div class="sds-sitfinCard__footerBlockStart">
<div class="text-truncate">
<span class="sds-sitfinCard__alert sds-icon sds-icon-alert"></span>
<div class="sds-amount -amountNegative -amountLg">
<div class="sds-amount__body">
<span class="sds-amount__value">{-#.###,##}</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
<span class="sds-sitfinCard__helper sds-textHelper">/ {#.###} €</span>
</div>
</div>
</div>
<span class="sds-dot sds-sitfinCard__dotBefore">
</span>
<span class="sds-dot sds-sitfinCard__dotAfter">
</span>
</div>
</div>
<div class="sds-sitfinBlock__cardWrapper -stacked2">
<div class="sds-sitfinCard -rounded sds-sitfinBlock__card -stacked2">
<div class="sds-sitfinCard__header">
<div class="sds-accountInfo">
<div class="sds-accountInfo__content">
<p class="sds-accountInfo__title">
<span class="text-truncate">
{Card Name}
</span>
</p>
<p class="sds-accountInfo__meta">LU## #### #### #### ####</p>
</div>
</div>
<div class="dropdown">
<button type="button" class="sds-btn -iconBtn -btnSecondary -ghost sds-sitfinCard__action" data-reference="parent" data-boundary="window" data-toggle="dropdown">
<span aria-hidden="true" class="sds-icon sds-icon-more"></span>
</button>
<div aria-labelledby="" class="sds-actionMenu dropdown-menu dropdown-menu-right">
<ul class="list-unstyled">
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 1
</a>
</li>
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 2
</a>
</li>
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 3
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="sds-sitfinCard__middle -hasSeparator">
<div class="sds-sitfinCard__middleIcon" data-toggle="tooltip" data-placement="bottom" title="Visa Debit">
<img class="img-fluid" src="../../media/snet/components/sitfin/visaclassic-small.png" alt="">
</div>
</div>
<div class="sds-sitfinCard__footer">
<div class="sds-sitfinCard__footerBlockStart">
<div class="text-truncate">
<span class="sds-sitfinCard__alert sds-icon sds-icon-alert"></span>
<div class="sds-amount -amountNegative -amountLg">
<div class="sds-amount__body">
<span class="sds-amount__value">{-#.###,##}</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
<span class="sds-sitfinCard__helper sds-textHelper">/ {#.###} €</span>
</div>
</div>
</div>
<span class="sds-dot sds-sitfinCard__dotBefore">
</span>
<span class="sds-dot sds-sitfinCard__dotAfter">
</span>
</div>
</div>
<div class="sds-sitfinBlock__cardWrapper -stacked3 -isSelected">
<div class="sds-sitfinCard -rounded sds-sitfinBlock__card">
<div class="sds-sitfinCard__header">
<div class="sds-accountInfo">
<div class="sds-accountInfo__content">
<p class="sds-accountInfo__title">
<span class="text-truncate">
{Card Name}
</span>
</p>
<p class="sds-accountInfo__meta">LU## #### #### #### ####</p>
</div>
</div>
<div class="dropdown">
<button type="button" class="sds-btn -iconBtn -btnSecondary -ghost sds-sitfinCard__action" data-reference="parent" data-boundary="window" data-toggle="dropdown">
<span aria-hidden="true" class="sds-icon sds-icon-more"></span>
</button>
<div aria-labelledby="" class="sds-actionMenu dropdown-menu dropdown-menu-right">
<ul class="list-unstyled">
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 1
</a>
</li>
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 2
</a>
</li>
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 3
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="sds-sitfinCard__middle -hasSeparator">
<div class="sds-sitfinCard__middleIcon" data-toggle="tooltip" data-placement="bottom" title="Visa Debit">
<img class="img-fluid" src="../../media/snet/components/sitfin/visaclassic-small.png" alt="">
</div>
</div>
<div class="sds-sitfinCard__footer">
<div class="sds-sitfinCard__footerBlockStart">
<div class="text-truncate">
<span class="sds-sitfinCard__alert sds-icon sds-icon-alert"></span>
<div class="sds-amount -amountNegative -amountLg">
<div class="sds-amount__body">
<span class="sds-amount__value">{-#.###,##}</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
<span class="sds-sitfinCard__helper sds-textHelper">/ {#.###} €</span>
</div>
</div>
</div>
<span class="sds-dot sds-sitfinCard__dotBefore">
</span>
<span class="sds-dot sds-sitfinCard__dotAfter">
</span>
</div>
</div>
</div>
<a href="" class="sds-btn -iconBtn -btnSecondary sds-sitfinBlock__seeMore">
<span aria-hidden="true" class="sds-icon sds-icon-arrownext"></span>
</a>
</div>
</div>
<div class="sds-sitfinBlock__row">
<div class="sds-sitfinBlock__rowAvatar">
<div class="sds-avatar centeredBgi -avatarSm -bank">
<img class="img-fluid" src="../../media/snet/components/sitfin/revolut.png" alt="">
</div>
</div>
<div class="sds-sitfinBlock__rowInner">
<div class="sds-sitfinCard sds-sitfinBlock__card">
<div class="sds-sitfinCard__header">
<div class="sds-accountInfo">
<div class="sds-accountInfo__content">
<p class="sds-accountInfo__title">
<span class="text-truncate">
</span>
</p>
<p class="sds-accountInfo__meta">LU## #### #### #### ####</p>
</div>
</div>
<div class="dropdown">
<button type="button" class="sds-btn -iconBtn -btnSecondary -ghost sds-sitfinCard__action" data-reference="parent" data-boundary="window" data-toggle="dropdown">
<span aria-hidden="true" class="sds-icon sds-icon-more"></span>
</button>
<div aria-labelledby="" class="sds-actionMenu dropdown-menu dropdown-menu-right">
<ul class="list-unstyled">
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 1
</a>
</li>
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 2
</a>
</li>
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 3
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="sds-sitfinCard__middle">
<div class="sds-sitfinCard__middleIcon">
<img class="img-fluid" src="https:/design.spuerkeess.lu/media/illustrative-icons/svg80x/product/sdsillustrativeicon-account-p.svg" alt="">
</div>
</div>
<div class="sds-sitfinCard__footer">
<div class="sds-sitfinCard__footerBlockStart">
<div class="sds-sitfinCard__loader"></div>
</div>
</div>
<span class="sds-dot sds-sitfinCard__dotBefore">
</span>
<span class="sds-dot sds-sitfinCard__dotAfter">
</span>
</div>
</div>
</div>
<div class="sds-sitfinBlock__row sds-sitfinBlock__btnRow">
<button type="button" class="sds-btn -btnSecondary">
<span class="sds-icon sds-icon-plus"></span>
<span class="sds-btn__text">
Ajouter compte
</span>
</button>
<div class="sds-sitfinBlock__overlapAvatars">
<a href="" class="sds-avatar centeredBgi">
<img class="img-fluid" src="../../media/snet/components/sitfin/n26.png" alt="">
</a>
<a href="" class="sds-avatar centeredBgi">
<img class="img-fluid" src="../../media/snet/components/sitfin/revolut.png" alt="">
</a>
<a href="" class="sds-avatar centeredBgi">
<img class="img-fluid" src="../../media/snet/components/sitfin/post.png" alt="">
</a>
<a href="" class="sds-avatar centeredBgi">
<img class="img-fluid" src="../../media/snet/components/sitfin/bnp.png" alt="">
</a>
<a href="" class="sds-avatar centeredBgi">
<img class="img-fluid" src="../../media/snet/components/sitfin/bil.png" alt="">
</a>
</div>
</div>
</div>
</div>
</div>
<div class="sds-sitfinBlock">
<div class="sds-sitfinBlock__header">
<div class="sds-sitfinBlock__heading d-flex align-items-center">
<button type="button" class="sds-btn -iconBtn -btnSecondary -btnSmall sds-sitfinBlock__collapseTrigger" data-toggle="collapse" data-target="#sitfin-collapse-2" aria-expanded="false">
<span aria-hidden="true" class="sds-icon sds-icon-plus"></span>
</button>
<div class="h3">Épargne</div>
</div>
<div class="sds-sitfinBlock__meta sds-textHelper">
2 comptes
</div>
<div class="sds-amount -amountPositive -amountXl">
<div class="sds-amount__body">
<span class="sds-amount__value">{+#.###,##}</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
</div>
<div class="sds-sitfinBlock__collapse collapse" id="sitfin-collapse-2">
<div class="sds-sitfinBlock__collapseInner">
<div class="sds-sitfinBlock__row">
<div class="sds-sitfinBlock__rowAvatar">
<div class="sds-avatar centeredBgi -avatarSm -bank">
<img class="img-fluid" src="../../media/logos/logo-spuerkeess.png" alt="">
</div>
</div>
<div class="sds-sitfinBlock__rowInner">
<div class="sds-sitfinCard sds-sitfinBlock__card">
<div class="sds-sitfinCard__header">
<div class="sds-accountInfo">
<div class="sds-accountInfo__content">
<p class="sds-accountInfo__title">
<span class="text-truncate">
{Account Number}
</span>
</p>
<p class="sds-accountInfo__meta">LU## #### #### #### ####</p>
</div>
</div>
<div class="dropdown">
<button type="button" class="sds-btn -iconBtn -btnSecondary -ghost sds-sitfinCard__action" data-reference="parent" data-boundary="window" data-toggle="dropdown">
<span aria-hidden="true" class="sds-icon sds-icon-more"></span>
</button>
<div aria-labelledby="" class="sds-actionMenu dropdown-menu dropdown-menu-right">
<ul class="list-unstyled">
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 1
</a>
</li>
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 2
</a>
</li>
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 3
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="sds-sitfinCard__middle">
<div class="sds-sitfinCard__middleIcon">
<img class="img-fluid" src="https://design.spuerkeess.lu/media/illustrative-icons/svg80x/product/sdsillustrativeicon-pig-p.svg" alt="">
</div>
</div>
<div class="sds-sitfinCard__footer">
<div class="sds-sitfinCard__footerBlockStart">
<div class="text-truncate">
<div class="sds-amount -amountPositive -amountLg">
<div class="sds-amount__body">
<span class="sds-amount__value">{+#.###,##}</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
</div>
</div>
</div>
<span class="sds-dot sds-sitfinCard__dotBefore">
</span>
<span class="sds-dot sds-sitfinCard__dotAfter">
</span>
</div>
<div class="sds-sitfinBlock__rowMoreCards">
<div class="sds-sitfinBlock__rowItem">
<span class="sds-dot sds-sitfinBlock__rowItemDot -dotBefore">
</span>
<div class="sds-circularCompletion -dashed">
<a class="sds-circularCompletion__link d-flex flex-column align-items-center justify-content-center" href="#!">
<span class="sds-iconCircle -primaryG -smaller" aria-hidden="true">
<span class="sds-icon sds-icon-plus"></span>
</span>
<span class="sds-circularCompletion__more sds-textHelper sds-textSemiBold">Nouveau Projet</span>
</a>
</div>
<span class="sds-dot sds-sitfinBlock__rowItemDot -dotAfter">
</span>
</div>
</div>
</div>
</div>
<div class="sds-sitfinBlock__row">
<div class="sds-sitfinBlock__rowAvatar">
<div class="sds-avatar centeredBgi -avatarSm -bank">
<img class="img-fluid" src="../../media/logos/logo-spuerkeess.png" alt="">
</div>
</div>
<div class="sds-sitfinBlock__rowInner -stacked">
<div class="sds-sitfinCard sds-sitfinBlock__card">
<div class="sds-sitfinCard__header">
<div class="sds-accountInfo">
<div class="sds-accountInfo__content">
<p class="sds-accountInfo__title">
<span class="text-truncate">
{Account Number}
</span>
</p>
<p class="sds-accountInfo__meta">LU## #### #### #### ####</p>
</div>
</div>
<div class="dropdown">
<button type="button" class="sds-btn -iconBtn -btnSecondary -ghost sds-sitfinCard__action" data-reference="parent" data-boundary="window" data-toggle="dropdown">
<span aria-hidden="true" class="sds-icon sds-icon-more"></span>
</button>
<div aria-labelledby="" class="sds-actionMenu dropdown-menu dropdown-menu-right">
<ul class="list-unstyled">
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 1
</a>
</li>
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 2
</a>
</li>
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 3
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="sds-sitfinCard__middle">
<div class="sds-sitfinCard__middleIcon">
<img class="img-fluid" src="https://design.spuerkeess.lu/media/illustrative-icons/svg80x/product/sdsillustrativeicon-pig-p.svg" alt="">
</div>
</div>
<div class="sds-sitfinCard__footer">
<div class="sds-sitfinCard__footerBlockStart">
<div class="text-truncate">
<div class="sds-amount -amountPositive -amountLg">
<div class="sds-amount__body">
<span class="sds-amount__value">{+#.###,##}</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
</div>
</div>
</div>
<span class="sds-dot sds-sitfinCard__dotBefore">
</span>
<span class="sds-dot sds-sitfinCard__dotAfter">
</span>
</div>
<div class="sds-sitfinBlock__rowMoreCards">
<div class="sds-sitfinBlock__rowItem">
<span class="sds-dot sds-sitfinBlock__rowItemDot -dotBefore">
</span>
<div class="sds-circularCompletion sds-servicesColor">
<svg class="sds-circularCompletion__circleWrapper" viewBox="0 0 118 118" preserveAspectRatio="none" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle fill="none" class="sds-circularCompletion__circle" r="55" cx="59" cy="59" stroke-dasharray="346"></circle>
<circle fill="none" class="sds-circularCompletion__circle sds-circularCompletion__progress" r="55" cx="59" cy="59" stroke-dasharray="86.5 346"></circle>
</svg>
<img class="sds-circularCompletion__img" src="https:/design.spuerkeess.lu/media/illustrations/svg240x240/spot/sdsillu-constructiontoolsb.svg" alt="img alt">
<div class="sds-circularCompletion__dropdown dropdown">
<button type="button" class="sds-btn -iconBtn -btnSecondary" data-reference="parent" data-boundary="window" data-toggle="dropdown">
<span aria-hidden="true" class="sds-icon sds-icon-more"></span>
</button>
<div aria-labelledby="" class="sds-actionMenu dropdown-menu dropdown-menu-right">
<ul class="list-unstyled">
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 1
</a>
</li>
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 2
</a>
</li>
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 3
</a>
</li>
</ul>
</div>
</div>
</div>
<span class="sds-dot sds-sitfinBlock__rowItemDot -dotAfter">
</span>
</div>
<div class="sds-sitfinBlock__rowItem">
<span class="sds-dot sds-sitfinBlock__rowItemDot -dotBefore">
</span>
<div class="sds-circularCompletion sds-mobiliteColor">
<svg class="sds-circularCompletion__circleWrapper" viewBox="0 0 118 118" preserveAspectRatio="none" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle fill="none" class="sds-circularCompletion__circle" r="55" cx="59" cy="59" stroke-dasharray="346"></circle>
<circle fill="none" class="sds-circularCompletion__circle sds-circularCompletion__progress" r="55" cx="59" cy="59" stroke-dasharray="346 346"></circle>
</svg>
<img class="sds-circularCompletion__img" src="https:/design.spuerkeess.lu/media/illustrations/svg240x240/spot/sdsillu-electriccarb.svg" alt="img alt">
<span class="sds-iconCircle -success100 -small sds-circularCompletion__complete" aria-hidden="true">
<span class="sds-icon sds-icon-check"></span>
<span class="sr-only">Project Complete</span>
</span>
<div class="sds-circularCompletion__dropdown dropdown">
<button type="button" class="sds-btn -iconBtn -btnSecondary" data-reference="parent" data-boundary="window" data-toggle="dropdown">
<span aria-hidden="true" class="sds-icon sds-icon-more"></span>
</button>
<div aria-labelledby="" class="sds-actionMenu dropdown-menu dropdown-menu-right">
<ul class="list-unstyled">
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 1
</a>
</li>
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 2
</a>
</li>
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 3
</a>
</li>
</ul>
</div>
</div>
</div>
<span class="sds-dot sds-sitfinBlock__rowItemDot -dotAfter">
</span>
</div>
<div class="sds-sitfinBlock__rowItem">
<span class="sds-dot sds-sitfinBlock__rowItemDot -dotBefore">
</span>
<div class="sds-circularCompletion sds-loisirsColor">
<svg class="sds-circularCompletion__circleWrapper" viewBox="0 0 118 118" preserveAspectRatio="none" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle fill="none" class="sds-circularCompletion__circle" r="55" cx="59" cy="59" stroke-dasharray="346"></circle>
<circle fill="none" class="sds-circularCompletion__circle sds-circularCompletion__progress" r="55" cx="59" cy="59" stroke-dasharray="346 346"></circle>
</svg>
<img class="sds-circularCompletion__img" src="../../media/snet/components/circular-completion/holidays.jpg" alt="img alt">
<span class="sds-iconCircle -success100 -small sds-circularCompletion__complete" aria-hidden="true">
<span class="sds-icon sds-icon-check"></span>
<span class="sr-only">Project Complete</span>
</span>
<div class="sds-circularCompletion__dropdown dropdown">
<button type="button" class="sds-btn -iconBtn -btnSecondary" data-reference="parent" data-boundary="window" data-toggle="dropdown">
<span aria-hidden="true" class="sds-icon sds-icon-more"></span>
</button>
<div aria-labelledby="" class="sds-actionMenu dropdown-menu dropdown-menu-right">
<ul class="list-unstyled">
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 1
</a>
</li>
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 2
</a>
</li>
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 3
</a>
</li>
</ul>
</div>
</div>
</div>
<span class="sds-dot sds-sitfinBlock__rowItemDot -dotAfter">
</span>
</div>
<div class="sds-sitfinBlock__rowItem">
<span class="sds-dot sds-sitfinBlock__rowItemDot -dotBefore">
</span>
<div class="sds-circularCompletion -dashed">
<a class="sds-circularCompletion__link d-flex flex-column align-items-center justify-content-center" href="#!">
<span class="sds-iconCircle -primaryG -smaller" aria-hidden="true">
<span class="sds-icon sds-icon-plus"></span>
</span>
<span class="sds-circularCompletion__more sds-textHelper sds-textSemiBold">Nouveau Projet</span>
</a>
</div>
<span class="sds-dot sds-sitfinBlock__rowItemDot -dotAfter">
</span>
</div>
</div>
<a href="" class="sds-btn -iconBtn -btnSecondary sds-sitfinBlock__seeMore">
<span aria-hidden="true" class="sds-icon sds-icon-arrownext"></span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="sds-sitfinBlock -hasAction -noAccount">
<div class="sds-sitfinBlock__header">
<div class="sds-sitfinBlock__heading d-flex align-items-center">
<button type="button" class="sds-btn -iconBtn -btnSecondary -btnSmall sds-sitfinBlock__collapseTrigger" data-toggle="collapse" data-target="#sitfin-collapse-3-1" aria-expanded="true">
<span aria-hidden="true" class="sds-icon sds-icon-plus"></span>
</button>
<div class="h3">Investissement</div>
</div>
</div>
<div class="sds-sitfinBlock__collapse collapse show" id="sitfin-collapse-3-1">
<div class="sds-sitfinBlock__collapseInner">
<div class="sds-sitfinBlock__row sds-sitfinBlock__btnRow">
<button type="button" class="sds-btn -btnSecondary">
<span class="sds-icon sds-icon-plus"></span>
<span class="sds-btn__text">
Ouvrir un portefeuille-titres
</span>
</button>
<div class="sds-sitfinBlock__overlapAvatars">
<a href="" class="sds-avatar centeredBgi">
<img class="img-fluid" src="../../media/snet/components/sitfin/n26.png" alt="">
</a>
<a href="" class="sds-avatar centeredBgi">
<img class="img-fluid" src="../../media/snet/components/sitfin/revolut.png" alt="">
</a>
<a href="" class="sds-avatar centeredBgi">
<img class="img-fluid" src="../../media/snet/components/sitfin/post.png" alt="">
</a>
</div>
</div>
</div>
</div>
</div>
<div class="sds-sitfinBlock -hasAction">
<div class="sds-sitfinBlock__header">
<div class="sds-sitfinBlock__heading d-flex align-items-center">
<button type="button" class="sds-btn -iconBtn -btnSecondary -btnSmall sds-sitfinBlock__collapseTrigger" data-toggle="collapse" data-target="#sitfin-collapse-4" aria-expanded="false">
<span aria-hidden="true" class="sds-icon sds-icon-plus"></span>
</button>
<div class="h3">Prêt</div>
</div>
<div class="sds-sitfinBlock__meta sds-textHelper">
1 compte
</div>
<div class="sds-amount -amountNegative -amountXl">
<div class="sds-amount__body">
<span class="sds-amount__value">{-#.###,##}</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
</div>
<div class="sds-sitfinBlock__collapse collapse" id="sitfin-collapse-4">
<div class="sds-sitfinBlock__collapseInner">
<div class="sds-sitfinBlock__row">
<div class="sds-sitfinBlock__rowAvatar">
<div class="sds-avatar centeredBgi -avatarSm -bank">
<img class="img-fluid" src="../../media/logos/logo-spuerkeess.png" alt="">
</div>
</div>
<div class="sds-sitfinBlock__rowInner">
<div class="sds-sitfinCard sds-sitfinBlock__card">
<div class="sds-sitfinCard__header">
<div class="sds-accountInfo">
<div class="sds-accountInfo__content">
<p class="sds-accountInfo__title">
<span class="text-truncate">
{Account Number}
</span>
</p>
<p class="sds-accountInfo__meta">LU## #### #### #### ####</p>
</div>
</div>
<div class="dropdown">
<button type="button" class="sds-btn -iconBtn -btnSecondary -ghost sds-sitfinCard__action" data-reference="parent" data-boundary="window" data-toggle="dropdown">
<span aria-hidden="true" class="sds-icon sds-icon-more"></span>
</button>
<div aria-labelledby="" class="sds-actionMenu dropdown-menu dropdown-menu-right">
<ul class="list-unstyled">
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 1
</a>
</li>
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 2
</a>
</li>
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 3
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="sds-sitfinCard__middle">
<div class="sds-sitfinCard__middleIcon">
<img class="img-fluid" src="https://design.spuerkeess.lu/media/illustrative-icons/svg80x/product/sdsillustrativeicon-house-p.svg" alt="">
</div>
</div>
<div class="sds-sitfinCard__footer">
<div class="sds-sitfinCard__footerBlockStart">
<div class="text-truncate">
<div class="sds-amount -amountNegative -amountLg">
<div class="sds-amount__body">
<span class="sds-amount__value">{-#.###,##}</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
</div>
</div>
</div>
<span class="sds-dot sds-sitfinCard__dotBefore">
</span>
<span class="sds-dot sds-sitfinCard__dotAfter">
</span>
</div>
</div>
</div>
<div class="sds-sitfinBlock__row sds-sitfinBlock__btnRow">
<button type="button" class="sds-btn -btnSecondary">
<span class="sds-icon sds-icon-plus"></span>
<span class="sds-btn__text">
Demander un prêt
</span>
</button>
</div>
</div>
</div>
</div>
<div class="sds-exceptionStackXl">
<p class="sds-disclaimer -disclaimerSm">
<b>Information</b><br> Le présent relevé vous est fourni à titre indicatif, afin de vous permettre un suivi régulier de l’évolution des comptes que vous avec sélectionnés pour l’affichage dans S-Net. Vous pouvez modifier à tout moment cette sélection dans le menu Paramètres/Affichage des comptes. Ce relevé ne reflète donc pas forcément votre situation financière complète. Spuerkeess ne peut être tenue responsable de la sélection des comptes que vous avez choisie. Il importe de préciser que ce relevé ne remplace pas les extraits de comptes Spuerkeess qui font foi en cas de divergence. En tout état de cause, nous vous invitons à nous signaler instamment toute erreur ou omission que vous seriez amené à relever.
</p>
</div>
</div>
<!-- main content end -->
</div>
</main>
</div>
</div>
<!-- content such as modals, tooltips, popovers etc should be included here -->
{% extends "@snet-page-frame" %}
{% block panelHeaderContent %}
<div class="{{ namespace }}panelHeader -headroom">
<div class="{{ namespace }}panelHeader__actionGroup">
{% render "@snet-link-tabs",navLinkTabsOptions,true%}
</div>
<div class="{{ namespace }}panelHeader__alignEnd">
<div class="{{ namespace }}panelHeader__actionGroup">
<div class="dropdown">
{% render "@icon-btn-secondary",{
icon: "icon-more",
attrs: {
"data-toggle": "dropdown"
}
},true %}
{% render "@snet-action-menu",{
classes: ["dropdown-menu-right"]
},true %}
</div>
</div>
</div>
</div>
{% endblock %}
{% block panelMainContent %}
<div class="flex-grow-1 overflow-hidden {{ namespace }}stackLg">
{% render "@snet-sitfin-block",{expanded: expanded},true %}
{% render "@snet-sitfin-block--epargne",{expanded: expanded},true %}
{% if noAccount %}
{% render "@snet-sitfin-block--investissement-no-account",{expanded: true},true %}
{% else %}
{% render "@snet-sitfin-block--investissement",{expanded: expanded},true %}
{% endif %}
{% render "@snet-sitfin-block--pret",{expanded: expanded},true %}
<div class="{{ namespace }}exceptionStackXl">
{% render "@disclaimer--small",{
text: disclaimerText
},true %}
</div>
</div>
{% endblock %}