No notes defined.
<div class="sds-searchModal sds-modal -noBg modal fade" tabindex="-1" id="searchModal" aria-hidden="true" data-backdrop="" data-brand="retail">
<div class="h2 sr-only">Recherche</div>
<div class="sds-searchModal__close sds-pointerEventsNone">
<div class="d-flex justify-content-end w-100">
<button type="button" class="sds-btn -iconBtn -btnSecondary -btnInverse sds-pointerEventsAuto" data-dismiss="modal" aria-label="Close">
<span class="sds-icon sds-icon-close"></span>
</button>
</div>
</div>
<div class="sds-modal__dialog modal-dialog modal-w-auto">
<div class="sds-modal__content modal-content bg-transparent">
<!-- content start -->
<div class="row row-xs justify-content-center">
<div class="col-xl-10 col-xxl-8">
<div class="row row-xs align-items-baseline justify-content-between">
<div class="col">
<div class="sds-searchModal__header">
<div class="sds-search -clearActive">
<div class="sds-search__inner form-control">
<span class="sds-search__searchIcon sds-icon sds-icon-search" aria-hidden="true"></span>
<input id="" type="text" placeholder="{Placeholder}" value="{Search Query}" class="sds-search__input form-control" />
<div class="sds-search__actions">
<div class="sds-search__clear">
<button type="button" class="sds-btn -iconBtn -btnSecondary -ghost">
<span class="sds-icon sds-icon-cross"></span>
</button>
</div>
<div class="sds-languageSwitcher dropdown -searchModal -filtersActive">
<button type="button" class="sds-btn -btnSecondary" data-search-modal-search-filter-btn="" data-toggle="dropdown" data-display="static" aria-expanded="false">
<span class="sds-btn__text">Refine search</span>
<div class="sds-badge badge -badgePrimary -badgeTonal">
02
</div>
<span class="sds-icon sds-icon-chevrondown"></span>
</button>
<div class="sds-languageSwitcher__menu sds-actionMenu dropdown-menu dropdown-menu-right">
<div class="sds-stackMd">
<div class="row row-xs col-separator">
<div class="col-sm-6">
<fieldset>
<legend>
<span class="dropdown-header">Langue</span>
</legend>
<ul class="list-unstyled">
<li lang="fr">
<label class="sds-actionMenu__item dropdown-item sds-staticInlineSm" href="#">
<input value="radio-value" type="radio" name="radio-dropdown-search-modal" class="sr-only" id="search-modal-radio-lang-fr" checked><span class="sds-radioDot " aria-hidden="true"></span>
<div class="sds-avatar centeredBgi -avatarSm">
<img class="img-fluid" src="../../media/spuerkeess-site/components/service-point-list-map/fr.png" alt="">
</div>
<span>Français</span>
</label>
</li>
<li lang="de">
<label class="sds-actionMenu__item dropdown-item sds-staticInlineSm" href="#">
<input value="radio-value" type="radio" name="radio-dropdown-search-modal" class="sr-only" id="search-modal-radio-lang-fr"><span class="sds-radioDot " aria-hidden="true"></span>
<div class="sds-avatar centeredBgi -avatarSm">
<img class="img-fluid" src="../../media/spuerkeess-site/components/service-point-list-map/de.png" alt="">
</div>
<span>Deutsch</span>
</label>
</li>
<li lang="en">
<label class="sds-actionMenu__item dropdown-item sds-staticInlineSm" href="#">
<input value="radio-value" type="radio" name="radio-dropdown-search-modal" class="sr-only" id="search-modal-radio-lang-fr"><span class="sds-radioDot " aria-hidden="true"></span>
<div class="sds-avatar centeredBgi -avatarSm">
<img class="img-fluid" src="../../media/spuerkeess-site/components/service-point-list-map/uk.png" alt="">
</div>
<span>English</span>
</label>
</li>
</ul>
</fieldset>
</div>
<div class="col-sm-6">
<fieldset>
<legend>
<span class="dropdown-header">Par type</span>
</legend>
<ul class="list-unstyled">
<li>
<div class="dropdown-item">
<div class="sds-checkbox custom-control custom-checkbox">
<input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="search-modal-filter-checkbox-1"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
<label class="custom-control-label" for="search-modal-filter-checkbox-1">Tous</label>
<div class="sds-checkbox__error invalid-feedback">Error message</div>
</div>
</div>
</li>
<li>
<div class="dropdown-item">
<div class="sds-checkbox custom-control custom-checkbox">
<input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="search-modal-filter-checkbox-2"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
<label class="custom-control-label" for="search-modal-filter-checkbox-2">Page</label>
<div class="sds-checkbox__error invalid-feedback">Error message</div>
</div>
</div>
</li>
<li>
<div class="dropdown-item">
<div class="sds-checkbox custom-control custom-checkbox">
<input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="search-modal-filter-checkbox-3"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
<label class="custom-control-label" for="search-modal-filter-checkbox-3">Article Blog</label>
<div class="sds-checkbox__error invalid-feedback">Error message</div>
</div>
</div>
</li>
<li>
<div class="dropdown-item">
<div class="sds-checkbox custom-control custom-checkbox">
<input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="search-modal-filter-checkbox-3"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
<label class="custom-control-label" for="search-modal-filter-checkbox-3">Info</label>
<div class="sds-checkbox__error invalid-feedback">Error message</div>
</div>
</div>
</li>
<li>
<div class="dropdown-item">
<div class="sds-checkbox custom-control custom-checkbox">
<input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="search-modal-filter-checkbox-3"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
<label class="custom-control-label" for="search-modal-filter-checkbox-3">Guide</label>
<div class="sds-checkbox__error invalid-feedback">Error message</div>
</div>
</div>
</li>
<li>
<div class="dropdown-item">
<div class="sds-checkbox custom-control custom-checkbox">
<input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="search-modal-filter-checkbox-3"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
<label class="custom-control-label" for="search-modal-filter-checkbox-3">Document</label>
<div class="sds-checkbox__error invalid-feedback">Error message</div>
</div>
</div>
</li>
<li>
<div class="dropdown-item">
<div class="sds-checkbox custom-control custom-checkbox">
<input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="search-modal-filter-checkbox-3"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
<label class="custom-control-label" for="search-modal-filter-checkbox-3">Agence</label>
<div class="sds-checkbox__error invalid-feedback">Error message</div>
</div>
</div>
</li>
<li>
<div class="dropdown-item">
<div class="sds-checkbox custom-control custom-checkbox">
<input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="search-modal-filter-checkbox-3"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
<label class="custom-control-label" for="search-modal-filter-checkbox-3">Événement</label>
<div class="sds-checkbox__error invalid-feedback">Error message</div>
</div>
</div>
</li>
<li>
<div class="dropdown-item">
<div class="sds-checkbox custom-control custom-checkbox">
<input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="search-modal-filter-checkbox-3"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
<label class="custom-control-label" for="search-modal-filter-checkbox-3">Partenaire</label>
<div class="sds-checkbox__error invalid-feedback">Error message</div>
</div>
</div>
</li>
</ul>
</fieldset>
</div>
</div>
<button type="button" class="sds-btn -btnSecondary -block">
<span class="sds-btn__text">Appliquer</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="row row-xs no-bottom-gutter">
<div class="col-12">
<div class="sds-searchModal__tags sds-overflowScrollBarSafeArea sds-btnGroup -hasVerticalSpacing">
<button type="button" class="sds-btn -btnSecondary -btnInverse -btnSmall">
<span class="sds-btn__text">Pret au Logement</span>
</button>
<button type="button" class="sds-btn -btnSecondary -btnInverse -btnSmall">
<span class="sds-btn__text">Simulation Logement</span>
</button>
<button type="button" class="sds-btn -btnSecondary -btnInverse -btnSmall">
<span class="sds-btn__text">Suggestion</span>
</button>
</div>
</div>
</div>
<div class="sds-searchModal__resultArea">
<div class="row row-xs align-items-stretch-immediate">
<div class="col-12">
<h3 class="h3 sds-searchModal__textColor">A la une</h3>
</div>
<div class="col-12 col-lg-4">
<a href="" class="sds-pictureLinkBox sds-box sds-shadowInteraction -isVertical -searchItem -product">
<div class="sds-pictureLinkBox__img">
<img class="img-fluid" src="../../media/spuerkeess-site/components/product/cards/sdsillu-product-card-classic.png" alt="">
</div>
<div class="sds-pictureLinkBox__body">
<div class="sds-pictureLinkBox__text sds-stackMd">
<span class="sds-staticInlineXs sds-metaColor sds-textHelper d-flex align-items-baseline">
<span>Blog</span>
</span>
<h3 class="sds-pictureLinkBox__title">Spuerkeess recrute !</h3>
<p class="sds-pictureLinkBox__description">Spuerkeess recherche continuellement des collaborateurs dynamiques et motivés ! Consultez nos offres d'emploi sur mylittlebigstep.lu.</p>
</div>
<div class="sds-pictureLinkBox__action">
<span class="sds-btn -iconBtn -btnSecondary stretched-link">
<span class="sds-icon sds-icon-arrownext"></span>
<div class="sr-only">Postuler</div>
</span>
</div>
</div>
</a>
</div>
<div class="col-12 col-lg-4">
<a href="" class="sds-pictureLinkBox sds-box sds-shadowInteraction -isVertical -searchItem">
<div class="sds-pictureLinkBox__img">
<div class="sds-noPic sds-pictureLinkBox__noPic">
<svg width="630" height="630" viewBox="0 0 630 630" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="630" height="630" transform="translate(0 0.304688)" fill="#F0F6FF" />
<g opacity="0.32">
<path fill-rule="evenodd" clip-rule="evenodd" d="M315.003 229.054C267.368 229.054 228.753 267.67 228.753 315.304C228.753 362.939 267.368 401.554 315.003 401.554C362.637 401.554 401.253 362.939 401.253 315.304C401.253 267.67 362.637 229.054 315.003 229.054ZM209.586 315.304C209.586 257.084 256.783 209.888 315.003 209.888C373.223 209.888 420.419 257.084 420.419 315.304C420.419 373.524 373.223 420.721 315.003 420.721C256.783 420.721 209.586 373.524 209.586 315.304Z" fill="#4D6E90" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M289.692 251.826C281.817 267.576 276.669 290.006 276.669 315.304C276.669 340.603 281.817 363.033 289.692 378.783C297.854 395.107 307.356 401.554 315.003 401.554C322.649 401.554 332.151 395.107 340.313 378.783C348.188 363.033 353.336 340.603 353.336 315.304C353.336 290.006 348.188 267.576 340.313 251.826C332.151 235.502 322.649 229.054 315.003 229.054C307.356 229.054 297.854 235.502 289.692 251.826ZM272.549 243.254C281.729 224.893 296.185 209.888 315.003 209.888C333.82 209.888 348.276 224.893 357.456 243.254C366.924 262.189 372.503 287.676 372.503 315.304C372.503 342.933 366.924 368.42 357.456 387.355C348.276 405.716 333.82 420.721 315.003 420.721C296.185 420.721 281.729 405.716 272.549 387.355C263.082 368.42 257.503 342.933 257.503 315.304C257.503 287.676 263.082 262.189 272.549 243.254Z" fill="#4D6E90" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M305.419 411.138V219.471H324.586V411.138H305.419Z" fill="#4D6E90" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M219.169 305.721L410.836 305.721V324.888L219.169 324.888L219.169 305.721Z" fill="#4D6E90" />
<path d="M289.692 251.826L290.586 252.273L290.586 252.273L289.692 251.826ZM289.692 378.783L290.586 378.336L290.586 378.336L289.692 378.783ZM340.313 378.783L339.419 378.336L339.419 378.336L340.313 378.783ZM340.313 251.826L339.419 252.273L339.419 252.273L340.313 251.826ZM357.456 243.254L356.562 243.701L356.562 243.701L357.456 243.254ZM272.549 387.355L271.654 387.802L271.654 387.802L272.549 387.355ZM305.419 411.138H304.419V412.138H305.419V411.138ZM305.419 219.471V218.471H304.419V219.471H305.419ZM324.586 219.471H325.586V218.471H324.586V219.471ZM324.586 411.138V412.138H325.586V411.138H324.586ZM219.169 305.721L219.169 304.721L218.169 304.721L218.169 305.721L219.169 305.721ZM410.836 305.721H411.836V304.721L410.836 304.721L410.836 305.721ZM410.836 324.888L410.836 325.888L411.836 325.888V324.888H410.836ZM219.169 324.888L218.169 324.888L218.169 325.888L219.169 325.888L219.169 324.888ZM315.003 228.054C266.816 228.054 227.753 267.118 227.753 315.304H229.753C229.753 268.222 267.92 230.054 315.003 230.054V228.054ZM227.753 315.304C227.753 363.491 266.816 402.554 315.003 402.554V400.554C267.92 400.554 229.753 362.387 229.753 315.304H227.753ZM315.003 402.554C363.189 402.554 402.253 363.491 402.253 315.304H400.253C400.253 362.387 362.085 400.554 315.003 400.554V402.554ZM402.253 315.304C402.253 267.118 363.189 228.054 315.003 228.054V230.054C362.085 230.054 400.253 268.222 400.253 315.304H402.253ZM210.586 315.304C210.586 257.637 257.335 210.888 315.003 210.888V208.888C256.23 208.888 208.586 256.532 208.586 315.304H210.586ZM315.003 210.888C372.67 210.888 419.419 257.637 419.419 315.304H421.419C421.419 256.532 373.775 208.888 315.003 208.888V210.888ZM419.419 315.304C419.419 372.972 372.67 419.721 315.003 419.721V421.721C373.775 421.721 421.419 374.077 421.419 315.304H419.419ZM315.003 419.721C257.335 419.721 210.586 372.972 210.586 315.304H208.586C208.586 374.077 256.23 421.721 315.003 421.721V419.721ZM288.798 251.379C280.839 267.295 275.669 289.884 275.669 315.304H277.669C277.669 290.128 282.794 267.857 290.586 252.273L288.798 251.379ZM275.669 315.304C275.669 340.724 280.839 363.314 288.798 379.23L290.586 378.336C282.794 362.751 277.669 340.481 277.669 315.304H275.669ZM288.798 379.23C297.016 395.667 306.778 402.554 315.003 402.554V400.554C307.934 400.554 298.692 394.546 290.586 378.336L288.798 379.23ZM315.003 402.554C323.227 402.554 332.989 395.667 341.208 379.23L339.419 378.336C331.313 394.546 322.071 400.554 315.003 400.554V402.554ZM341.208 379.23C349.166 363.314 354.336 340.724 354.336 315.304H352.336C352.336 340.481 347.211 362.751 339.419 378.336L341.208 379.23ZM354.336 315.304C354.336 289.884 349.166 267.295 341.208 251.379L339.419 252.273C347.211 267.857 352.336 290.128 352.336 315.304H354.336ZM341.208 251.379C332.989 234.942 323.227 228.054 315.003 228.054V230.054C322.071 230.054 331.313 236.062 339.419 252.273L341.208 251.379ZM315.003 228.054C306.778 228.054 297.016 234.942 288.798 251.379L290.586 252.273C298.692 236.062 307.934 230.054 315.003 230.054V228.054ZM273.443 243.701C282.573 225.442 296.771 210.888 315.003 210.888V208.888C295.6 208.888 280.886 224.344 271.654 242.807L273.443 243.701ZM315.003 210.888C333.234 210.888 347.433 225.442 356.562 243.701L358.351 242.807C349.119 224.344 334.405 208.888 315.003 208.888V210.888ZM356.562 243.701C365.946 262.47 371.503 287.797 371.503 315.304H373.503C373.503 287.554 367.901 261.907 358.351 242.807L356.562 243.701ZM371.503 315.304C371.503 342.812 365.946 368.139 356.562 386.907L358.351 387.802C367.901 368.701 373.503 343.055 373.503 315.304H371.503ZM356.562 386.907C347.433 405.166 333.234 419.721 315.003 419.721V421.721C334.405 421.721 349.119 406.265 358.351 387.802L356.562 386.907ZM315.003 419.721C296.771 419.721 282.573 405.166 273.443 386.907L271.654 387.802C280.886 406.265 295.6 421.721 315.003 421.721V419.721ZM273.443 386.907C264.059 368.139 258.503 342.812 258.503 315.304H256.503C256.503 343.055 262.104 368.701 271.654 387.802L273.443 386.907ZM258.503 315.304C258.503 287.797 264.059 262.47 273.443 243.701L271.654 242.807C262.104 261.907 256.503 287.554 256.503 315.304H258.503ZM306.419 411.138V219.471H304.419V411.138H306.419ZM305.419 220.471H324.586V218.471H305.419V220.471ZM323.586 219.471V411.138H325.586V219.471H323.586ZM324.586 410.138H305.419V412.138H324.586V410.138ZM219.169 306.721L410.836 306.721L410.836 304.721L219.169 304.721L219.169 306.721ZM409.836 305.721V324.888H411.836V305.721H409.836ZM410.836 323.888L219.169 323.888L219.169 325.888L410.836 325.888L410.836 323.888ZM220.169 324.888L220.169 305.721L218.169 305.721L218.169 324.888L220.169 324.888Z" fill="#4D6E90" />
</g>
</svg>
</div>
</div>
<div class="sds-pictureLinkBox__body">
<div class="sds-pictureLinkBox__text sds-stackMd">
<span class="sds-staticInlineXs sds-metaColor sds-textHelper d-flex align-items-baseline">
<span>Blog</span>
</span>
<h3 class="sds-pictureLinkBox__title">Spuerkeess recrute !</h3>
<p class="sds-pictureLinkBox__description">Spuerkeess recherche continuellement des collaborateurs dynamiques et motivés ! Consultez nos offres d'emploi sur mylittlebigstep.lu.</p>
</div>
<div class="sds-pictureLinkBox__action">
<span class="sds-btn -iconBtn -btnSecondary stretched-link">
<span class="sds-icon sds-icon-arrownext"></span>
<div class="sr-only">Postuler</div>
</span>
</div>
</div>
</a>
</div>
<div class="col-12 col-lg-4">
<a href="" download="" class="sds-pictureLinkBox sds-box sds-shadowInteraction -isVertical -searchItem">
<div class="sds-pictureLinkBox__img">
<img class="img-fluid" src="../../media/snet/components/picture-link-box/picture-link-box.jpg" alt="">
</div>
<div class="sds-pictureLinkBox__body">
<div class="sds-pictureLinkBox__text sds-stackMd">
<span class="sds-staticInlineXs sds-metaColor sds-textHelper d-flex align-items-baseline">
<span class="sds-icon sds-icon-document sds-iconSizeInherit"></span>
<span>Blog</span>
</span>
<h3 class="sds-pictureLinkBox__title">Spuerkeess recrute !</h3>
<p class="sds-pictureLinkBox__description">Spuerkeess recherche continuellement des collaborateurs dynamiques et motivés ! Consultez nos offres d'emploi sur mylittlebigstep.lu.</p>
</div>
<div class="sds-pictureLinkBox__action">
<span class="sds-btn -iconBtn -btnSecondary stretched-link">
<span class="sds-icon sds-icon-download"></span>
<div class="sr-only">download document</div>
</span>
</div>
</div>
</a>
</div>
</div>
<div class="row">
<div class="col-12 sds-stackMd">
<h3 class="h3 sds-searchModal__textColor">Les plus consultés</h3>
<div class="sds-box -insetMd">
<ul class="list-unstyled sds-staticStackSm sds-outOfBounds">
<li>
<a href="" class="sds-listItem -insetMd position-relative sds-hoverContentSecondary justify-content-between">
<h4 class="h4">Préparer votre demande de prêt au logement</h4>
<span class="sds-btn -iconBtn -btnSecondary stretched-link d-none d-md-inline-flex">
<span class="sds-icon sds-icon-arrownext"></span>
</span>
</a>
</li>
<li>
<a href="" class="sds-listItem -insetMd position-relative sds-hoverContentSecondary justify-content-between">
<h4 class="h4">Les aides au logement et la garantie de l’état</h4>
<span class="sds-btn -iconBtn -btnSecondary stretched-link d-none d-md-inline-flex">
<span class="sds-icon sds-icon-arrownext"></span>
</span>
</a>
</li>
<li>
<a href="" class="sds-listItem -insetMd position-relative sds-hoverContentSecondary justify-content-between">
<h4 class="h4">Capacité de remboursement</h4>
<span class="sds-btn -iconBtn -btnSecondary stretched-link d-none d-md-inline-flex">
<span class="sds-icon sds-icon-arrownext"></span>
</span>
</a>
</li>
<li>
<a href="" download="" class="sds-listItem -insetMd position-relative sds-hoverContentSecondary justify-content-between">
<h4 class="h4">
<span class="sds-staticInlineXxs">
<span>Prêt au logement</span>
<span class="align-text-top sds-iconSizeInherit sds-textBody sds-icon sds-icon-document"></span>
</span>
</h4>
<span class="sds-btn -iconBtn -btnSecondary stretched-link d-none d-md-inline-flex">
<span class="sds-icon sds-icon-download"></span>
</span>
</a>
</li>
<li>
<a href="" class="sds-listItem -insetMd position-relative sds-hoverContentSecondary justify-content-between">
<h4 class="h4">Le prêt logement en trois étapes</h4>
<span class="sds-btn -iconBtn -btnSecondary stretched-link d-none d-md-inline-flex">
<span class="sds-icon sds-icon-arrownext"></span>
</span>
</a>
</li>
<li>
<a href="" class="sds-listItem -insetMd position-relative sds-hoverContentSecondary justify-content-between">
<h4 class="h4">Prêt au logement : quel taux choisir?</h4>
<span class="sds-btn -iconBtn -btnSecondary stretched-link d-none d-md-inline-flex">
<span class="sds-icon sds-icon-arrownext"></span>
</span>
</a>
</li>
<li>
<a href="" class="sds-listItem -insetMd position-relative sds-hoverContentSecondary justify-content-between">
<h4 class="h4">Demander son prêt au logement en ligne ? C’est désormais possible via S-Net</h4>
<span class="sds-btn -iconBtn -btnSecondary stretched-link d-none d-md-inline-flex">
<span class="sds-icon sds-icon-arrownext"></span>
</span>
</a>
</li>
<li>
<a href="" class="sds-listItem -insetMd position-relative sds-hoverContentSecondary justify-content-between">
<h4 class="h4">Acheter avant d’avoir vendu</h4>
<span class="sds-btn -iconBtn -btnSecondary stretched-link d-none d-md-inline-flex">
<span class="sds-icon sds-icon-arrownext"></span>
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- content end -->
</div>
</div>
</div>
<div class="{{ namespace }}searchModal {{ namespace }}modal -noBg modal fade" tabindex="-1" id="{{ modalID }}" aria-hidden="true" data-backdrop="" data-brand="retail">
<div class="h2 sr-only">Recherche</div>
<div class="{{ namespace }}searchModal__close {{ namespace }}pointerEventsNone">
<div class="d-flex justify-content-end w-100">
{% render "@icon-btn-secondary-inverse", {
icon: "icon-close",
classes: [namespace + "pointerEventsAuto"],
attrs: {
"data-dismiss": "modal",
"aria-label": "Close"
}
},true %}
</div>
</div>
<div class="{{ namespace }}modal__dialog modal-dialog modal-w-auto{% for mod in dialogModifiers %} {{ mod }}{% endfor %}">
<div class="{{ namespace }}modal__content modal-content bg-transparent">
<!-- content start -->
<div class="row row-xs justify-content-center">
<div class="col-xl-10 col-xxl-8">
<div class="row row-xs align-items-baseline justify-content-between">
<div class="col">
<div class="{{ namespace }}searchModal__header">
{% render "@search--language-selector" %}
</div>
</div>
</div>
<div>
{% if noResults %}
<div class="{{ namespace }}searchModal__resultArea">
<div class="row">
<div class="col-12">
{% render "@snet-empty-state--no-result",{
modifiers: [namespace+"box","-big"],
icon: "icon-smileydisappointed-l",
text: "Aucun résultat"
},true %}
</div>
</div>
</div>
{% else %}
{% if noResults %}
<div class="{{ namespace }}searchModal__resultArea">
<div class="row">
<div class="col-12">
{% render "@snet-empty-state--no-result",{
modifiers: [namespace+"box","-big"],
icon: "icon-smileydisappointed-l",
text: "Aucun résultat"
},true %}
</div>
</div>
</div>
{% else %}
{% endif %}
{% if noResults %}
{% else %}
<div class="{% if loading %}d-none {% endif %}row row-xs no-bottom-gutter">
<div class="col-12">
<div class="{{ namespace }}searchModal__tags {{ namespace }}overflowScrollBarSafeArea {{ namespace }}btnGroup -hasVerticalSpacing">
{% render "@btn-secondary-inverse--small",{
text: "Pret au Logement"
},true %}
{% render "@btn-secondary-inverse--small",{
text: "Simulation Logement"
},true %}
{% render "@btn-secondary-inverse--small",{
text: "Suggestion"
},true %}
</div>
</div>
</div>
{% endif %}
<div class="{{ namespace }}searchModal__resultArea">
<div class="row row-xs align-items-stretch-immediate">
{% if loading %}{% else %}<div class="col-12"><h3 class="h3 {{ namespace }}searchModal__textColor">A la une</h3></div> {% endif %}
<div class="col-12 col-lg-4">
{% if loading %}
{% render "@skeleton-unit",{
classes: ["-inverted", "-boxBorderRadius"],
inlineCSS: {
"height": "var(--search-modal-card-loading-height) !important"
}
},true %}
{% else %}
{% render "@spk-picture-link-box--search-item-product",{
meta: true,
iconBtn: true,
icon: "icon-arrownext"
},true %}
{% endif %}
</div>
<div class="col-12 col-lg-4">
{% if loading %}
{% render "@skeleton-unit",{
classes: ["-inverted", "-boxBorderRadius"],
inlineCSS: {
"height": "var(--search-modal-card-loading-height) !important"
}
},true %}
{% else %}
{% render "@spk-picture-link-box--search-item",{
nopic: true,
meta: true,
iconBtn: true,
icon: "icon-arrownext"
},true %}
{% endif %}
</div>
<div class="col-12 col-lg-4">
{% if loading %}
{% render "@skeleton-unit",{
classes: ["-inverted", "-boxBorderRadius"],
inlineCSS: {
"height": "var(--search-modal-card-loading-height) !important"
}
},true %}
{% else %}
{% render "@spk-picture-link-box--search-item",{
meta: true,
iconBtn: true,
document: true,
icon: "icon-download",
action: "download document"
},true %}
{% endif %}
</div>
</div>
<div class="{% if loading %}d-none {% endif %}row">
<div class="col-12 {{ namespace }}stackMd">
<h3 class="h3 {{ namespace }}searchModal__textColor">Les plus consultés</h3>
<div class="{{ namespace }}box -insetMd">
<ul class="list-unstyled {{ namespace }}staticStackSm {{ namespace }}outOfBounds">
<li>
<a href=""
class="{{ namespace }}listItem -insetMd position-relative {{ namespace }}hoverContentSecondary justify-content-between">
<h4 class="h4">Préparer votre demande de prêt au logement</h4>
{% render "@icon-btn-secondary",{
eltType: "span",
classes: ["stretched-link", "d-none", "d-md-inline-flex"],
icon: "icon-arrownext"
},true %}
</a>
</li>
<li>
<a href=""
class="{{ namespace }}listItem -insetMd position-relative {{ namespace }}hoverContentSecondary justify-content-between">
<h4 class="h4">Les aides au logement et la garantie de l’état</h4>
{% render "@icon-btn-secondary",{
eltType: "span",
classes: ["stretched-link", "d-none", "d-md-inline-flex"],
icon: "icon-arrownext"
},true %}
</a>
</li>
<li>
<a href=""
class="{{ namespace }}listItem -insetMd position-relative {{ namespace }}hoverContentSecondary justify-content-between">
<h4 class="h4">Capacité de remboursement</h4>
{% render "@icon-btn-secondary",{
eltType: "span",
classes: ["stretched-link", "d-none", "d-md-inline-flex"],
icon: "icon-arrownext"
},true %}
</a>
</li>
<li>
<a href="" download=""
class="{{ namespace }}listItem -insetMd position-relative {{ namespace }}hoverContentSecondary justify-content-between">
<h4 class="h4">
<span class="{{ namespace }}staticInlineXxs">
<span>Prêt au logement</span>
<span class="align-text-top {{ namespace }}iconSizeInherit {{ namespace }}textBody {{ namespace }}icon {{ namespace }}icon-document"></span>
</span>
</h4>
{% render "@icon-btn-secondary",{
eltType: "span",
classes: ["stretched-link", "d-none", "d-md-inline-flex"],
icon: "icon-download"
},true %}
</a>
</li>
<li>
<a href=""
class="{{ namespace }}listItem -insetMd position-relative {{ namespace }}hoverContentSecondary justify-content-between">
<h4 class="h4">Le prêt logement en trois étapes</h4>
{% render "@icon-btn-secondary",{
eltType: "span",
classes: ["stretched-link", "d-none", "d-md-inline-flex"],
icon: "icon-arrownext"
},true %}
</a>
</li>
<li>
<a href=""
class="{{ namespace }}listItem -insetMd position-relative {{ namespace }}hoverContentSecondary justify-content-between">
<h4 class="h4">Prêt au logement : quel taux choisir?</h4>
{% render "@icon-btn-secondary",{
eltType: "span",
classes: ["stretched-link", "d-none", "d-md-inline-flex"],
icon: "icon-arrownext"
},true %}
</a>
</li>
<li>
<a href=""
class="{{ namespace }}listItem -insetMd position-relative {{ namespace }}hoverContentSecondary justify-content-between">
<h4 class="h4">Demander son prêt au logement en ligne ? C’est désormais possible via S-Net</h4>
{% render "@icon-btn-secondary",{
eltType: "span",
classes: ["stretched-link", "d-none", "d-md-inline-flex"],
icon: "icon-arrownext"
},true %}
</a>
</li>
<li>
<a href=""
class="{{ namespace }}listItem -insetMd position-relative {{ namespace }}hoverContentSecondary justify-content-between">
<h4 class="h4">Acheter avant d’avoir vendu</h4>
{% render "@icon-btn-secondary",{
eltType: "span",
classes: ["stretched-link", "d-none", "d-md-inline-flex"],
icon: "icon-arrownext"
},true %}
</a>
</li>
</ul>
</div>
</div>
</div>
{% endif %}
</div>
</div>
</div>
</div>
<!-- content end -->
</div>
</div>
</div>
/* variables specific to current element */
$element-specific-variables: "";
.#{$namespace}searchModal {
/* Save root element context for easy access if nesting is needed */
$self: &;
--search-modal-card-loading-height: 104px;
/* properties of current element + media queries */
//@include modal-background();
@include media-breakpoint-up("lg") {
--search-modal-card-loading-height: 333px;
}
/* Pseudo Elements */
&::before {
}
&::after {
}
/*
Include elements that are linked to the current element but have to reside at the root level of the stylesheet
(e.g: keyframes)
*/
@at-root {
}
/* children - write selector in full in comments in order to facilitate search */
// searchModal__close
&__close {
// follows same logic as parent
position: sticky;
z-index: z("sticky");
top: 0;
padding-right: $modal-inner-padding-mobile;
margin-bottom: -($search-input-height-large + $modal-inner-padding-mobile);
height: $search-input-height-large;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
@include media-breakpoint-up("md") {
padding-right: $modal-inner-padding-mobile * 2;
}
@include media-breakpoint-up("xl") {
padding-right: 0;
}
}
&__header {
padding-top: $modal-inner-padding-mobile;
padding-right: $icon-circle-regular-dimensions-global + map-deep-get($token-spacer-inline-map, "sm");
position: relative;
z-index: z("medium");
@include media-breakpoint-up("xl") {
padding-right: 0;
}
}
&__tags {
margin-top: map-deep-get($token-spacer-stack-max-map, "md");
padding-bottom: map-deep-get($token-spacer-inset-map, "md");
margin-bottom: -(map-deep-get($token-spacer-inset-map, "lg")) !important;
padding-left: $content-section-inset-inline-sm;
margin-left: -($content-section-inset-inline-sm);
margin-right: -($content-section-inset-inline-sm);
white-space: nowrap;
overflow-x: auto;
@include media-breakpoint-up("sm") {
padding-left: $modal-inner-padding + $content-section-inset-inline-sm;
margin-left: -($modal-inner-padding + $content-section-inset-inline-sm);
margin-right: -($modal-inner-padding + $content-section-inset-inline-sm);
}
@include media-breakpoint-up("md") {
overflow-x: visible;
flex-wrap: wrap;
padding-bottom: 0;
margin-bottom: 0 !important;
padding-left:0;
margin-left: 0;
margin-right: 0;
}
}
&__textColor {
@include custom-prop-fallback("color","sys-color-text-neutral-inverse");
}
&__resultArea {
margin-top: map-deep-get($token-spacer-stack-min-map, "xl");
@include media-breakpoint-up("lg") {
margin-top: map-deep-get($token-spacer-stack-max-map, "xl");
}
}
/* modifiers */
// searchModal -altStyle
&.-altStyle {
// follows same logic as base element
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* Pseudo Classes */
&:hover {
@media (hover: hover) {
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}