On primary CTA button click, add .-previous class to current, remove .-isActive on current element, remove .next class on next element and add .-isActive class to next element.
On secondary CTA button click, add .-next class to current element, remove .-isActive class on current element, and add .-isActive class to previous element, remove .-prev class on previous element.
<div class="sds-snetFrame -step">
<a href="#frameMain" class="sds-skipNavLink">
Skip to content
</a>
<header class="sds-navTopbar sds-snetFrame__header">
<div class="sds-navTopbar__container">
<nav class="sds-navTopbar__inner navbar navbar-expand">
<a href="#back" class="sds-navTopbar__back">
<span class="sds-iconCircle" aria-hidden="true">
<span class="sds-icon sds-icon-chevronleft"></span>
</span>
<span class="sds-textHelper sds-navTopbar__backText">Retour</span>
</a>
<a class="sds-navTopbar__logo navbar-brand" href="#">
<img src="../../media/logos/logo-bcee.svg" class="img-fluid" alt="">
</a>
<div class="sds-navTopbar__centeredContent sds-navTopbar__dropdownWrapper dropdown sds-textHelper">
<span>Prise de rendez-vous</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 sds-navTopbar__dropdownWrapper 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/avatarUser.png" alt="">
</div>
<span class="sds-navTopbar__userDropdownLabel sds-textHelper">Jil Schmit</span>
<span class="sds-iconCircle" aria-hidden="true">
<span class="sds-icon sds-icon-chevrondown"></span>
</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 class="sds-snetFrame__menu">
<div class="sds-snetFrame__menuList">
<img class="img-fluid" src="../../media/illustrative-icons/sdsillu-plugcable.svg" alt="">
<ul class="sds-snetFrame__menuListInner list-unstyled">
<li class="sds-snetFrame__menuItem -isChecked">
<a href="" class="sds-snetFrame__menuLink">
<span class="sds-snetFrame__menuItemStep" data-toggle="tooltip" data-title="Nature de votre besoin" data-placement="right" data-boundary="window">
<span class="sds-checkboxDot -isActive sds-snetFrame__menuItemCheckbox" aria-hidden="true"></span>
1
</span>
<span class="sds-snetFrame__menuItemText">Nature de votre besoin</span>
</a>
</li>
<li class="sds-snetFrame__menuItem -isActive">
<a href="" class="sds-snetFrame__menuLink">
<span class="sds-snetFrame__menuItemStep" data-toggle="tooltip" data-title="Votre rendez-vous" data-placement="right" data-boundary="window">
<div class="sds-snetFrame__menuItemProgress">
<div class="sds-circularProgress">
<svg viewBox="0 0 36 36" class="">
<path class="sds-circularProgress__shape" stroke-dasharray="50, 100" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831" />
</svg>
</div>
</div>
2
</span>
<span class="sds-snetFrame__menuItemText">Votre rendez-vous</span>
</a>
</li>
<li class="sds-snetFrame__menuItem">
<a href="" class="sds-snetFrame__menuLink">
<span class="sds-snetFrame__menuItemStep" data-toggle="tooltip" data-title="Confirmation" data-placement="right" data-boundary="window">
3
</span>
<span class="sds-snetFrame__menuItemText">Confirmation</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 class="sds-snetFrame__main" id="frameMain">
<!-- panel header content start -->
<!-- panel header content end -->
<div class="sds-snetFrame__mainContent">
<!-- main content start -->
<div class="row h-100 justify-content-center">
<form class="sds-sectionForm col-lg-10 col-xl-9">
<div class="sds-sectionForm__container -prev">
<div class="sds-sectionForm__item sds-box -insetLg sds-stackMd">
<div class="sds-sectionForm__itemHeading sds-stackXs">
<h2 class="h3">Pour quel motif souhaitez-vous prendre un rendez-vous ? </h2>
<p>Sélectionnez la catégorie correspondant à votre besoin.</p>
</div>
<div class="sds-sectionForm__itemBody sds-stackMd">
<div class="sds-spotSelectList">
<div class="sds-spotSelect sds-showCustomIndicatorHover ">
<input type="radio" id="spotRadio-1" class="sds-spotSelect__radioInput sr-only" value="" name="radio-name">
<div data-scope-wrapper="box" data-scope="flat" class="sds-spotSelect__body">
<div class="sds-spotSelect__content">
<span class="sds-radioDot sds-spotSelect__checkItem" aria-hidden="true"></span>
<img src="../../media/illustrative-icons/sdsillu-differentcardsb.svg" alt="">
<div class="sds-spotSelect__inner sds-stackMd">
<div class="sds-spotSelect__text">
<div class="sds-spotSelect__title">
<div class="sds-textSemiBold">
<label class="sds-spotSelect__checkItemLabel" for="spotRadio-1">Gérer le quotidien</label>
</div>
</div>
<p><label class="sds-spotSelect__checkItemLabel" for="spotRadio-1">Ouvrir un compte courant et epargne ou obtenir une nouvelle carte bancaire.</label></p>
</div>
</div>
</div>
<div class="sds-spotSelect__hiddenContent">
<div class="sds-spotSelect__hiddenContentInner">
<div class="sds-message sds-stackMd">
<div class="sds-message__header">
<div class="sds-message__iconAlign">
<p>Veuillez noter, le prêt logement n’est élligible que pour l’un des types de projet suivant :</p>
</div>
</div>
<ul class="sds-message__bulletOptions sds-stackMd list-unstyled">
<li class="sds-message__option">
Soit l’achat d’un bien immobilier,
</li>
<li class="sds-message__option">
La construction d’un bien immobilier,
</li>
<li class="sds-message__option">
Ou bien, la construction d’un terrain.
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="sds-spotSelect sds-showCustomIndicatorHover ">
<input type="radio" id="spotRadio-2" class="sds-spotSelect__radioInput sr-only" checked value="" name="radio-name">
<div data-scope-wrapper="box" data-scope="flat" class="sds-spotSelect__body">
<div class="sds-spotSelect__content">
<span class="sds-radioDot sds-spotSelect__checkItem" aria-hidden="true"></span>
<img src="../../media/illustrative-icons/sdsillu-financecalculator.svg" alt="">
<div class="sds-spotSelect__inner sds-stackMd">
<div class="sds-spotSelect__text">
<div class="sds-spotSelect__title">
<div class="sds-textSemiBold">
<label class="sds-spotSelect__checkItemLabel" for="spotRadio-2">Financer un projet</label>
</div>
</div>
<p><label class="sds-spotSelect__checkItemLabel" for="spotRadio-2">Souscrire un prêt logement, un prêt pour ses études ou bien un prêt à la consommation.</label></p>
</div>
</div>
</div>
</div>
</div>
<div class="sds-spotSelect sds-showCustomIndicatorHover ">
<input type="radio" id="spotRadio-3" class="sds-spotSelect__radioInput sr-only" value="" name="radio-name">
<div data-scope-wrapper="box" data-scope="flat" class="sds-spotSelect__body">
<div class="sds-spotSelect__content">
<span class="sds-radioDot sds-spotSelect__checkItem" aria-hidden="true"></span>
<img src="../../media/illustrative-icons/sdsillu-boxlightgear.svg" alt="">
<div class="sds-spotSelect__inner sds-stackMd">
<div class="sds-spotSelect__text">
<div class="sds-spotSelect__title">
<div class="sds-textSemiBold">
<label class="sds-spotSelect__checkItemLabel" for="spotRadio-3">Investir</label>
</div>
</div>
<p><label class="sds-spotSelect__checkItemLabel" for="spotRadio-3">Ouvrir un produit d’investissement comme Speedinvest.</label></p>
</div>
</div>
</div>
</div>
</div>
<div class="sds-spotSelect sds-showCustomIndicatorHover ">
<input type="radio" id="spotRadio-3" class="sds-spotSelect__radioInput sr-only" value="" name="radio-name">
<div data-scope-wrapper="box" data-scope="flat" class="sds-spotSelect__body">
<div class="sds-spotSelect__content">
<span class="sds-radioDot sds-spotSelect__checkItem" aria-hidden="true"></span>
<img src="../../media/illustrative-icons/sdsillu-differentcardsb.svg" alt="">
<div class="sds-spotSelect__inner sds-stackMd">
<div class="sds-spotSelect__text">
<div class="sds-spotSelect__title">
<div class="sds-textSemiBold">
<label class="sds-spotSelect__checkItemLabel" for="spotRadio-3">Gérer le quotidien</label>
</div>
</div>
<p><label class="sds-spotSelect__checkItemLabel" for="spotRadio-3">Ouvrir un compte courant et epargne ou obtenir une nouvelle carte bancaire.</label></p>
</div>
</div>
</div>
</div>
</div>
<div class="sds-spotSelect sds-showCustomIndicatorHover ">
<input type="radio" id="spotRadio-3" class="sds-spotSelect__radioInput sr-only" value="" name="radio-name">
<div data-scope-wrapper="box" data-scope="flat" class="sds-spotSelect__body">
<div class="sds-spotSelect__content">
<span class="sds-radioDot sds-spotSelect__checkItem" aria-hidden="true"></span>
<img src="../../media/illustrative-icons/sdsillu-differentcardsb.svg" alt="">
<div class="sds-spotSelect__inner sds-stackMd">
<div class="sds-spotSelect__text">
<div class="sds-spotSelect__title">
<div class="sds-textSemiBold">
<label class="sds-spotSelect__checkItemLabel" for="spotRadio-3">Gérer le quotidien</label>
</div>
</div>
<p><label class="sds-spotSelect__checkItemLabel" for="spotRadio-3">Ouvrir un compte courant et epargne ou obtenir une nouvelle carte bancaire.</label></p>
</div>
</div>
</div>
</div>
</div>
<div class="sds-spotSelect sds-showCustomIndicatorHover ">
<input type="radio" id="spotRadio-3" class="sds-spotSelect__radioInput sr-only" value="" name="radio-name">
<div data-scope-wrapper="box" data-scope="flat" class="sds-spotSelect__body">
<div class="sds-spotSelect__content">
<span class="sds-radioDot sds-spotSelect__checkItem" aria-hidden="true"></span>
<img src="../../media/illustrative-icons/sdsillu-differentcardsb.svg" alt="">
<div class="sds-spotSelect__inner sds-stackMd">
<div class="sds-spotSelect__text">
<div class="sds-spotSelect__title">
<div class="sds-textSemiBold">
<label class="sds-spotSelect__checkItemLabel" for="spotRadio-3">Gérer le quotidien</label>
</div>
</div>
<p><label class="sds-spotSelect__checkItemLabel" for="spotRadio-3">Ouvrir un compte courant et epargne ou obtenir une nouvelle carte bancaire.</label></p>
</div>
</div>
</div>
</div>
</div>
<div class="sds-spotSelect sds-showCustomIndicatorHover ">
<input type="radio" id="spotRadio-3" class="sds-spotSelect__radioInput sr-only" value="" name="radio-name">
<div data-scope-wrapper="box" data-scope="flat" class="sds-spotSelect__body">
<div class="sds-spotSelect__content">
<span class="sds-radioDot sds-spotSelect__checkItem" aria-hidden="true"></span>
<img src="../../media/illustrative-icons/sdsillu-differentcardsb.svg" alt="">
<div class="sds-spotSelect__inner sds-stackMd">
<div class="sds-spotSelect__text">
<div class="sds-spotSelect__title">
<div class="sds-textSemiBold">
<label class="sds-spotSelect__checkItemLabel" for="spotRadio-3">Gérer le quotidien</label>
</div>
</div>
<p><label class="sds-spotSelect__checkItemLabel" for="spotRadio-3">Ouvrir un compte courant et epargne ou obtenir une nouvelle carte bancaire.</label></p>
</div>
</div>
</div>
</div>
</div>
<div class="sds-spotSelect sds-showCustomIndicatorHover ">
<input type="radio" id="spotRadio-3" class="sds-spotSelect__radioInput sr-only" value="" name="radio-name">
<div data-scope-wrapper="box" data-scope="flat" class="sds-spotSelect__body">
<div class="sds-spotSelect__content">
<span class="sds-radioDot sds-spotSelect__checkItem" aria-hidden="true"></span>
<img src="../../media/illustrative-icons/sdsillu-differentcardsb.svg" alt="">
<div class="sds-spotSelect__inner sds-stackMd">
<div class="sds-spotSelect__text">
<div class="sds-spotSelect__title">
<div class="sds-textSemiBold">
<label class="sds-spotSelect__checkItemLabel" for="spotRadio-3">Gérer le quotidien</label>
</div>
</div>
<p><label class="sds-spotSelect__checkItemLabel" for="spotRadio-3">Ouvrir un compte courant et epargne ou obtenir une nouvelle carte bancaire.</label></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sds-sectionForm__itemFooter">
<div class="sds-btnGroup">
<button type="button" class="sds-btn -btnSecondary -btnInverse">
<span class="sds-btn__text">Retour</span>
</button>
<button type="button" class="sds-btn -btnPrimary">
<span class="sds-btn__text">Continuer</span>
</button>
</div>
</div>
</div>
</div>
<div class="sds-sectionForm__container -isActive">
<div class="sds-sectionForm__item sds-box -insetLg sds-stackMd">
<div class="sds-sectionForm__itemHeading sds-stackXs">
<h2 class="h3">Pour quel motif souhaitez-vous prendre un rendez-vous ? </h2>
<p>Sélectionnez la catégorie correspondant à votre besoin.</p>
</div>
<div class="sds-sectionForm__itemBody sds-stackMd">
<div class="sds-spotSelectList">
<div class="sds-spotSelect sds-showCustomIndicatorHover ">
<input type="radio" id="spotRadio-1" class="sds-spotSelect__radioInput sr-only" value="" name="radio-name">
<div data-scope-wrapper="box" data-scope="flat" class="sds-spotSelect__body">
<div class="sds-spotSelect__content">
<span class="sds-radioDot sds-spotSelect__checkItem" aria-hidden="true"></span>
<img src="../../media/illustrative-icons/sdsillu-differentcardsb.svg" alt="">
<div class="sds-spotSelect__inner sds-stackMd">
<div class="sds-spotSelect__text">
<div class="sds-spotSelect__title">
<div class="sds-textSemiBold">
<label class="sds-spotSelect__checkItemLabel" for="spotRadio-1">Gérer le quotidien</label>
</div>
</div>
<p><label class="sds-spotSelect__checkItemLabel" for="spotRadio-1">Ouvrir un compte courant et epargne ou obtenir une nouvelle carte bancaire.</label></p>
</div>
</div>
</div>
<div class="sds-spotSelect__hiddenContent">
<div class="sds-spotSelect__hiddenContentInner">
<div class="sds-message sds-stackMd">
<div class="sds-message__header">
<div class="sds-message__iconAlign">
<p>Veuillez noter, le prêt logement n’est élligible que pour l’un des types de projet suivant :</p>
</div>
</div>
<ul class="sds-message__bulletOptions sds-stackMd list-unstyled">
<li class="sds-message__option">
Soit l’achat d’un bien immobilier,
</li>
<li class="sds-message__option">
La construction d’un bien immobilier,
</li>
<li class="sds-message__option">
Ou bien, la construction d’un terrain.
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="sds-spotSelect sds-showCustomIndicatorHover ">
<input type="radio" id="spotRadio-2" class="sds-spotSelect__radioInput sr-only" checked value="" name="radio-name">
<div data-scope-wrapper="box" data-scope="flat" class="sds-spotSelect__body">
<div class="sds-spotSelect__content">
<span class="sds-radioDot sds-spotSelect__checkItem" aria-hidden="true"></span>
<img src="../../media/illustrative-icons/sdsillu-financecalculator.svg" alt="">
<div class="sds-spotSelect__inner sds-stackMd">
<div class="sds-spotSelect__text">
<div class="sds-spotSelect__title">
<div class="sds-textSemiBold">
<label class="sds-spotSelect__checkItemLabel" for="spotRadio-2">Financer un projet</label>
</div>
</div>
<p><label class="sds-spotSelect__checkItemLabel" for="spotRadio-2">Souscrire un prêt logement, un prêt pour ses études ou bien un prêt à la consommation.</label></p>
</div>
</div>
</div>
</div>
</div>
<div class="sds-spotSelect sds-showCustomIndicatorHover ">
<input type="radio" id="spotRadio-3" class="sds-spotSelect__radioInput sr-only" value="" name="radio-name">
<div data-scope-wrapper="box" data-scope="flat" class="sds-spotSelect__body">
<div class="sds-spotSelect__content">
<span class="sds-radioDot sds-spotSelect__checkItem" aria-hidden="true"></span>
<img src="../../media/illustrative-icons/sdsillu-boxlightgear.svg" alt="">
<div class="sds-spotSelect__inner sds-stackMd">
<div class="sds-spotSelect__text">
<div class="sds-spotSelect__title">
<div class="sds-textSemiBold">
<label class="sds-spotSelect__checkItemLabel" for="spotRadio-3">Investir</label>
</div>
</div>
<p><label class="sds-spotSelect__checkItemLabel" for="spotRadio-3">Ouvrir un produit d’investissement comme Speedinvest.</label></p>
</div>
</div>
</div>
</div>
</div>
<div class="sds-spotSelect sds-showCustomIndicatorHover ">
<input type="radio" id="spotRadio-3" class="sds-spotSelect__radioInput sr-only" value="" name="radio-name">
<div data-scope-wrapper="box" data-scope="flat" class="sds-spotSelect__body">
<div class="sds-spotSelect__content">
<span class="sds-radioDot sds-spotSelect__checkItem" aria-hidden="true"></span>
<img src="../../media/illustrative-icons/sdsillu-differentcardsb.svg" alt="">
<div class="sds-spotSelect__inner sds-stackMd">
<div class="sds-spotSelect__text">
<div class="sds-spotSelect__title">
<div class="sds-textSemiBold">
<label class="sds-spotSelect__checkItemLabel" for="spotRadio-3">Gérer le quotidien</label>
</div>
</div>
<p><label class="sds-spotSelect__checkItemLabel" for="spotRadio-3">Ouvrir un compte courant et epargne ou obtenir une nouvelle carte bancaire.</label></p>
</div>
</div>
</div>
</div>
</div>
<div class="sds-spotSelect sds-showCustomIndicatorHover ">
<input type="radio" id="spotRadio-3" class="sds-spotSelect__radioInput sr-only" value="" name="radio-name">
<div data-scope-wrapper="box" data-scope="flat" class="sds-spotSelect__body">
<div class="sds-spotSelect__content">
<span class="sds-radioDot sds-spotSelect__checkItem" aria-hidden="true"></span>
<img src="../../media/illustrative-icons/sdsillu-differentcardsb.svg" alt="">
<div class="sds-spotSelect__inner sds-stackMd">
<div class="sds-spotSelect__text">
<div class="sds-spotSelect__title">
<div class="sds-textSemiBold">
<label class="sds-spotSelect__checkItemLabel" for="spotRadio-3">Gérer le quotidien</label>
</div>
</div>
<p><label class="sds-spotSelect__checkItemLabel" for="spotRadio-3">Ouvrir un compte courant et epargne ou obtenir une nouvelle carte bancaire.</label></p>
</div>
</div>
</div>
</div>
</div>
<div class="sds-spotSelect sds-showCustomIndicatorHover ">
<input type="radio" id="spotRadio-3" class="sds-spotSelect__radioInput sr-only" value="" name="radio-name">
<div data-scope-wrapper="box" data-scope="flat" class="sds-spotSelect__body">
<div class="sds-spotSelect__content">
<span class="sds-radioDot sds-spotSelect__checkItem" aria-hidden="true"></span>
<img src="../../media/illustrative-icons/sdsillu-differentcardsb.svg" alt="">
<div class="sds-spotSelect__inner sds-stackMd">
<div class="sds-spotSelect__text">
<div class="sds-spotSelect__title">
<div class="sds-textSemiBold">
<label class="sds-spotSelect__checkItemLabel" for="spotRadio-3">Gérer le quotidien</label>
</div>
</div>
<p><label class="sds-spotSelect__checkItemLabel" for="spotRadio-3">Ouvrir un compte courant et epargne ou obtenir une nouvelle carte bancaire.</label></p>
</div>
</div>
</div>
</div>
</div>
<div class="sds-spotSelect sds-showCustomIndicatorHover ">
<input type="radio" id="spotRadio-3" class="sds-spotSelect__radioInput sr-only" value="" name="radio-name">
<div data-scope-wrapper="box" data-scope="flat" class="sds-spotSelect__body">
<div class="sds-spotSelect__content">
<span class="sds-radioDot sds-spotSelect__checkItem" aria-hidden="true"></span>
<img src="../../media/illustrative-icons/sdsillu-differentcardsb.svg" alt="">
<div class="sds-spotSelect__inner sds-stackMd">
<div class="sds-spotSelect__text">
<div class="sds-spotSelect__title">
<div class="sds-textSemiBold">
<label class="sds-spotSelect__checkItemLabel" for="spotRadio-3">Gérer le quotidien</label>
</div>
</div>
<p><label class="sds-spotSelect__checkItemLabel" for="spotRadio-3">Ouvrir un compte courant et epargne ou obtenir une nouvelle carte bancaire.</label></p>
</div>
</div>
</div>
</div>
</div>
<div class="sds-spotSelect sds-showCustomIndicatorHover ">
<input type="radio" id="spotRadio-3" class="sds-spotSelect__radioInput sr-only" value="" name="radio-name">
<div data-scope-wrapper="box" data-scope="flat" class="sds-spotSelect__body">
<div class="sds-spotSelect__content">
<span class="sds-radioDot sds-spotSelect__checkItem" aria-hidden="true"></span>
<img src="../../media/illustrative-icons/sdsillu-differentcardsb.svg" alt="">
<div class="sds-spotSelect__inner sds-stackMd">
<div class="sds-spotSelect__text">
<div class="sds-spotSelect__title">
<div class="sds-textSemiBold">
<label class="sds-spotSelect__checkItemLabel" for="spotRadio-3">Gérer le quotidien</label>
</div>
</div>
<p><label class="sds-spotSelect__checkItemLabel" for="spotRadio-3">Ouvrir un compte courant et epargne ou obtenir une nouvelle carte bancaire.</label></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sds-sectionForm__itemFooter">
<div class="sds-btnGroup">
<button type="button" class="sds-btn -btnSecondary -btnInverse">
<span class="sds-btn__text">Retour</span>
</button>
<button type="button" class="sds-btn -btnPrimary">
<span class="sds-btn__text">Continuer</span>
</button>
</div>
</div>
</div>
</div>
<div class="sds-sectionForm__container -next">
<div class="sds-sectionForm__item sds-box -insetLg sds-stackMd">
<div class="sds-sectionForm__itemHeading sds-stackXs">
<h2 class="h3">Pour quel motif souhaitez-vous prendre un rendez-vous ? </h2>
<p>Sélectionnez la catégorie correspondant à votre besoin.</p>
</div>
<div class="sds-sectionForm__itemBody sds-stackMd">
<div class="sds-spotSelectList">
<div class="sds-spotSelect sds-showCustomIndicatorHover ">
<input type="radio" id="1" class="sds-spotSelect__radioInput sr-only" value="" name="radio-name">
<div data-scope-wrapper="box" data-scope="flat" class="sds-spotSelect__body">
<div class="sds-spotSelect__content">
<span class="sds-radioDot sds-spotSelect__checkItem" aria-hidden="true"></span>
<img src="../../media/illustrative-icons/sdsillu-differentcardsb.svg" alt="">
<div class="sds-spotSelect__inner sds-stackMd">
<div class="sds-spotSelect__text">
<div class="sds-spotSelect__title">
<div class="sds-textSemiBold">
<label class="sds-spotSelect__checkItemLabel" for="1">Gérer le quotidien</label>
</div>
</div>
<p><label class="sds-spotSelect__checkItemLabel" for="1">Ouvrir un compte courant et epargne ou obtenir une nouvelle carte bancaire.</label></p>
</div>
</div>
</div>
</div>
</div>
<div class="sds-spotSelect sds-showCustomIndicatorHover ">
<input type="radio" id="2" class="sds-spotSelect__radioInput sr-only" checked value="" name="radio-name">
<div data-scope-wrapper="box" data-scope="flat" class="sds-spotSelect__body">
<div class="sds-spotSelect__content">
<span class="sds-radioDot sds-spotSelect__checkItem" aria-hidden="true"></span>
<img src="../../media/illustrative-icons/sdsillu-financecalculator.svg" alt="">
<div class="sds-spotSelect__inner sds-stackMd">
<div class="sds-spotSelect__text">
<div class="sds-spotSelect__title">
<div class="sds-textSemiBold">
<label class="sds-spotSelect__checkItemLabel" for="2">Financer un projet</label>
</div>
</div>
<p><label class="sds-spotSelect__checkItemLabel" for="2">Souscrire un prêt logement, un prêt pour ses études ou bien un prêt à la consommation.</label></p>
</div>
</div>
</div>
</div>
</div>
<div class="sds-spotSelect sds-showCustomIndicatorHover ">
<input type="radio" id="3" class="sds-spotSelect__radioInput sr-only" value="" name="radio-name">
<div data-scope-wrapper="box" data-scope="flat" class="sds-spotSelect__body">
<div class="sds-spotSelect__content">
<span class="sds-radioDot sds-spotSelect__checkItem" aria-hidden="true"></span>
<img src="../../media/illustrative-icons/sdsillu-boxlightgear.svg" alt="">
<div class="sds-spotSelect__inner sds-stackMd">
<div class="sds-spotSelect__text">
<div class="sds-spotSelect__title">
<div class="sds-textSemiBold">
<label class="sds-spotSelect__checkItemLabel" for="3">Investir</label>
</div>
</div>
<p><label class="sds-spotSelect__checkItemLabel" for="3">Ouvrir un produit d’investissement comme Speedinvest.</label></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sds-message sds-stackMd">
<div class="sds-message__header">
<span class="sds-icon sds-icon-infocirclefill"></span>
<div class="sds-message__iconAlign">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque culpa cumque debitis dicta ducimus fugiat fugit maiores modi molestiae officiis provident quis, quos ratione sapiente sunt tempora temporibus unde veniam!</p>
</div>
</div>
</div>
</div>
<div class="sds-sectionForm__itemFooter">
<div class="sds-btnGroup">
<button type="button" class="sds-btn -btnSecondary -btnInverse">
<span class="sds-btn__text">Retour</span>
</button>
<button type="button" class="sds-btn -btnPrimary">
<span class="sds-btn__text">Continuer</span>
</button>
</div>
</div>
</div>
</div>
</form>
</div>
<!-- main content end -->
</div>
</main>
</div>
</div>
<!-- content such as modals, tooltips, popovers etc should be included here -->
{% extends "@snet-page-frame--step" %}
{% block panelMainContent %}
<div class="row h-100 justify-content-center">
<form class="{{ namespace }}sectionForm col-lg-10 col-xl-9">
<div class="{{ namespace }}sectionForm__container -prev">
{% render '@snet-section-form--spot-message'%}
</div>
<div class="{{ namespace }}sectionForm__container -isActive">
{% if message %}
{% render '@snet-section-form--message'%}
{% elseif spotMessageShown %}
{% render '@snet-section-form--spot-message-shown'%}
{% elseif spotMessage %}
{% render '@snet-section-form--spot-message'%}
{% elseif agences %}
{% render '@snet-section-form--agences'%}
{% elseif confirmation %}
{% render '@snet-section-form--confirmation'%}
{% elseif recap %}
{% render '@snet-section-form--recap'%}
{% elseif timePicker %}
{% render '@snet-section-form--time-picker'%}
{% else %}
{% render '@snet-section-form--spot-message'%}
{% endif %}
</div>
<div class="{{ namespace }}sectionForm__container -next">
{% render '@snet-section-form--message'%}
</div>
</form>
</div>
{% endblock %}