No notes defined.
<div class="sds-stackXl">
<div class="sds-comparisonTable">
<div class="sds-comparisonTable__stickyHeader d-flex sds-staticInlineSm position-sticky sds-stickySm d-md-none" data-reacts-to-headroom>
<div class="flex-grow-1">
<div class="sds-box -insetMd sds-shadowInteraction">
<button class="w-100 d-flex sds-staticInlineSm align-items-center justify-content-between text-left" type="button" data-toggle="modal" data-target="#comparisonTableModal">
<div class="sds-label">
Zebra
</div>
<span class="sds-btn -iconBtn -btnSecondary -btnSmall stretched-link">
<span class="sds-icon sds-icon-chevrondown"></span>
</span>
</button>
</div>
</div>
<div class="flex-grow-1">
<div class="sds-box -insetMd sds-shadowInteraction">
<button class="w-100 d-flex sds-staticInlineSm align-items-center justify-content-between text-left" type="button" data-toggle="modal" data-target="#comparisonTableModal">
<div class="sds-label">
Zebra Premium
</div>
<span class="sds-btn -iconBtn -btnSecondary -btnSmall stretched-link">
<span class="sds-icon sds-icon-chevrondown"></span>
</span>
</button>
</div>
</div>
</div>
<div data-sds-gradient-overflow-h>
<div data-sds-gradient-overflow-h-wrapper>
<div data-sds-gradient-overflow-h-inner>
<div class="table-responsive">
<table class="table table-borderless">
<thead class="sds-comparisonTable__header">
<tr>
<th class="align-bottom">
<div class="h3">Caractéristiques</div>
</th>
<th class="sds-box -boxSunken sds-comparisonTable__dimensionCell align-top text-center" id="product-1">
<div class="sds-comparisonTable__img sds-box__outOfBoundsMd">
<img src="../../media/spuerkeess-site/components/product/cards/sdsillu-product-card-classic.png" alt="" class="img-fluid">
</div>
<div class="sds-stackXs">
<div class="d-none d-md-block h4">Visa Classic</div>
<div class="sds-fontBase">
<div class="sds-amount -amountSm">
<span class="sds-amount__value">24,00</span>
<span class="sds-amount__currency">€</span>
</div>
<div class="sds-amount -amountSm sds-comparisonTable__meta">
<span class="sds-amount__value">/ année</span>
</div>
<div class="sds-comparisonTable__meta sds-textHelperSmall">
0 € avec package Zebra Premium
</div>
</div>
</div>
</th>
<th class="sds-box -boxSunken sds-comparisonTable__dimensionCell align-top text-center" id="product-2">
<div class="sds-comparisonTable__img sds-box__outOfBoundsMd">
<img src="../../media/spuerkeess-site/components/product/cards/sdsillu-product-card-classic.png" alt="" class="img-fluid">
</div>
<div class="sds-stackXs">
<div class="d-none d-md-block h4">Visa Premier</div>
<div class="sds-fontBase">
<div class="sds-amount -amountSm">
<span class="sds-amount__value">70,00</span>
<span class="sds-amount__currency">€</span>
</div>
<div class="sds-amount -amountSm sds-comparisonTable__meta">
<span class="sds-amount__value">/ année</span>
</div>
<div class="sds-comparisonTable__meta sds-textHelperSmall">
0 € avec package Zebra Premium
</div>
</div>
</div>
</th>
<th class="sds-box -boxSunken sds-comparisonTable__dimensionCell align-top text-center -hidden" id="product-3">
<div class="sds-comparisonTable__img sds-box__outOfBoundsMd">
<img src="../../media/spuerkeess-site/components/product/cards/sdsillu-product-card-classic.png" alt="" class="img-fluid">
</div>
<div class="sds-stackXs">
<div class="d-none d-md-block h4">Miles & More Luxair Visa</div>
<div class="sds-fontBase">
<div class="sds-amount -amountSm">
<span class="sds-amount__value">230,00</span>
<span class="sds-amount__currency">€</span>
</div>
<div class="sds-amount -amountSm sds-comparisonTable__meta">
<span class="sds-amount__value">/ année</span>
</div>
<div class="sds-comparisonTable__meta sds-textHelperSmall">
140 € avec package Zebra Premium
</div>
</div>
</div>
</th>
<th class="sds-box -boxSunken sds-comparisonTable__dimensionCell align-top text-center -hidden" id="product-3">
<div class="sds-comparisonTable__img sds-box__outOfBoundsMd">
<img src="../../media/spuerkeess-site/components/product/cards/sdsillu-product-card-classic.png" alt="" class="img-fluid">
</div>
<div class="sds-stackXs">
<div class="d-none d-md-block h4">Visa Infinite</div>
<div class="sds-fontBase">
<div class="sds-amount -amountSm">
<span class="sds-amount__value">350,00</span>
<span class="sds-amount__currency">€</span>
</div>
<div class="sds-amount -amountSm sds-comparisonTable__meta">
<span class="sds-amount__value">/ année</span>
</div>
<div class="sds-comparisonTable__meta sds-textHelperSmall">
-
</div>
</div>
</div>
</th>
</tr>
</thead>
<tbody class="sds-comparisonTable__body">
<tr class="sds-comparisonTable__hoveredRow">
<th>
<div class="sds-comparisonTable__rowTitle d-flex">
<span class="sds-icon sds-icon-transaction"></span> <span>Virements (Eurotransfert) gratuits</span>
</div>
</th>
<td class="sds-comparisonTable__dimensionCell" headers="product-1" data-th-content="Virements (Eurotransfert) gratuits"><span class="sds-circle -valid"></span> <sup><a href="#comparison-table-footnote-disclaimer-1"> 1 </a></sup> <span class="sr-only">Disponible</span></td>
<td class="sds-comparisonTable__dimensionCell" headers="product-2" data-th-content="Virements (Eurotransfert) gratuits"><span class="sds-circle -valid"></span> <sup><a href="#comparison-table-footnote-disclaimer-2"> 2 </a></sup><span class="sr-only">Disponible</span></td>
<td class="sds-comparisonTable__dimensionCell -hidden" headers="product-3" data-th-content="Virements (Eurotransfert) gratuits"><span class="sds-circle -valid"></span> <span class="sr-only">Disponible</span></td>
<td class="sds-comparisonTable__dimensionCell -hidden" headers="product-3" data-th-content="Virements (Eurotransfert) gratuits"><span class="sds-circle -valid"></span> <span class="sr-only">Disponible</span></td>
</tr>
<tr class="sds-comparisonTable__hoveredRow">
<th>
<div class="sds-comparisonTable__rowTitle d-flex">
<span class="sds-icon sds-icon-sbank"></span> <span>Cartes de débit</span>
</div>
</th>
<td class="sds-comparisonTable__dimensionCell" headers="product-1" data-th-content="Cartes de débit"><span class="sds-circle -valid"></span> <sup><a href="#comparison-table-footnote-disclaimer-3"> 3 </a></sup> <span class="sr-only">Disponible</span></td>
<td class="sds-comparisonTable__dimensionCell" headers="product-2" data-th-content="Cartes de débit"><span class="sds-circle -valid"></span> <span class="sr-only">Disponible</span></td>
<td class="sds-comparisonTable__dimensionCell -hidden" headers="product-3" data-th-content="Cartes de débit"><span class="sds-circle -valid"></span> <span class="sr-only">Disponible</span></td>
<td class="sds-comparisonTable__dimensionCell -hidden" headers="product-3" data-th-content="Cartes de débit"><span class="sds-circle -valid"></span> <span class="sr-only">Disponible</span></td>
</tr>
<tr class="sds-comparisonTable__hoveredRow">
<th>
<div class="sds-comparisonTable__rowTitle d-flex">
<span class="sds-icon sds-icon-sbank"></span> <span>Cartes de crédit</span>
</div>
</th>
<td class="sds-comparisonTable__dimensionCell sds-comparisonTable__disabled" headers="product-1" data-th-content="Cartes de crédit">
<s>Not available</s>
</td>
<td class="sds-comparisonTable__dimensionCell" headers="product-2" data-th-content="Cartes de crédit"><span class="sds-circle -disabled"></span> <span class="sr-only">Non disponible</span></td>
<td class="sds-comparisonTable__dimensionCell -hidden" headers="product-3" data-th-content="Cartes de crédit">{ Label }</td>
<td class="sds-comparisonTable__dimensionCell -hidden" headers="product-3" data-th-content="Cartes de crédit">{ Label }</td>
</tr>
<tr>
<td class="sds-comparisonTable__nestedCell" colspan="5">
<div class="sds-outOfBounds">
<div id="collapse_section_two" class="collapse">
<table class="table table-borderless">
<tbody class="sds-comparisonTable__body">
<tr class="sds-comparisonTable__hoveredRow">
<th>
<div class="sds-comparisonTable__rowTitle d-flex">
<span class="sds-icon sds-icon-graphgauge"></span> <span>Retrait d'espèces en EUR/mois sur distributeurs tiers en UE sans application de frais Spuerkeess</span>
</div>
</th>
<td class="sds-comparisonTable__dimensionCell" headers="product-1" data-th-content="Retrait d'espèces en EUR/mois sur distributeurs tiers en UE sans application de frais Spuerkeess"><span class="sds-circle -valid"></span> <span class="sr-only">Disponible</span></td>
<td class="sds-comparisonTable__dimensionCell" headers="product-2" data-th-content="Retrait d'espèces en EUR/mois sur distributeurs tiers en UE sans application de frais Spuerkeess"><span class="sds-circle -valid"></span> <span class="sr-only">Disponible</span></td>
<td class="sds-comparisonTable__dimensionCell -hidden" headers="product-3" data-th-content="Retrait d'espèces en EUR/mois sur distributeurs tiers en UE sans application de frais Spuerkeess"><span class="sds-circle -valid"></span> <span class="sr-only">Disponible</span></td>
<td class="sds-comparisonTable__dimensionCell -hidden" headers="product-3" data-th-content="Retrait d'espèces en EUR/mois sur distributeurs tiers en UE sans application de frais Spuerkeess"><span class="sds-circle -valid"></span> <span class="sr-only">Disponible</span></td>
</tr>
<tr class="sds-comparisonTable__hoveredRow">
<th>
<div class="sds-comparisonTable__rowTitle d-flex">
<span class="sds-icon sds-icon-vacation"></span> <span>Traitements automatisés TUP gratuit/mois</span>
</div>
</th>
<td class="sds-comparisonTable__dimensionCell" headers="product-1" data-th-content="Traitements automatisés TUP gratuit/mois">{ Label }</td>
<td class="sds-comparisonTable__dimensionCell" headers="product-2" data-th-content="Traitements automatisés TUP gratuit/mois">{ Multi line label Multi line label }</td>
<td class="sds-comparisonTable__dimensionCell -hidden" headers="product-3" data-th-content="Traitements automatisés TUP gratuit/mois">Retard > 4 h. : 500 € | Prolongation > 24 h. : 150 € / jour pendant 7 jours avec max. 1.050 € </td>
<td class="sds-comparisonTable__dimensionCell -hidden" headers="product-3" data-th-content="Traitements automatisés TUP gratuit/mois">advanced 5</td>
</tr>
<tr class="sds-comparisonTable__hoveredRow">
<th>
<div class="sds-comparisonTable__rowTitle d-flex">
<span class="sds-icon sds-icon-business"></span> <span>Conditions préférentielles sur crédits et garanties</span>
</div>
</th>
<td class="sds-comparisonTable__dimensionCell" headers="product-1" data-th-content="Conditions préférentielles sur crédits et garanties">Free 6</td>
<td class="sds-comparisonTable__dimensionCell" headers="product-2" data-th-content="Conditions préférentielles sur crédits et garanties">Basic 6</td>
<td class="sds-comparisonTable__dimensionCell -hidden" headers="product-3" data-th-content="Conditions préférentielles sur crédits et garanties">advanced 6</td>
<td class="sds-comparisonTable__dimensionCell -hidden" headers="product-3" data-th-content="Conditions préférentielles sur crédits et garanties">advanced 6</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="sds-comparisonTable__footer text-center">
<button type="button" class="sds-btn -iconBtn -btnSecondary -ghost sds-comparisonTable__toggle" data-toggle="collapse" data-target="#collapse_section_two">
<span class="sds-icon sds-icon-chevrondown"></span>
</button>
</div>
</div>
</div>
<div class="sds-stackMd">
<p class="sds-formDisclaimer -insetHorizLg" id="comparison-table-footnote-disclaimer-1">
<sup>1</sup> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<p class="sds-formDisclaimer -insetHorizLg" id="comparison-table-footnote-disclaimer-2">
<sup>2</sup> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</p>
<p class="sds-formDisclaimer -insetHorizLg" id="comparison-table-footnote-disclaimer-3">
<sup>3</sup> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt
</p>
</div>
</div>
<div class="sds-modal modal fade" id="comparisonTableModal" aria-hidden="true" tabindex="-1">
<div class="sds-modal__dialog modal-dialog modal-dialog-centered">
<div class="sds-modal__content modal-content">
<div class="sds-modal__header modal-header">
<div class="sds-modal__title modal-title">Comparer produits</div>
<button type="button" class="sds-btn -iconBtn -btnSecondary -ghost sds-modal__close" data-dismiss="modal" aria-label="Close">
<span class="sds-icon sds-icon-close"></span>
</button>
</div>
<div class="sds-modal__body modal-body">
<div class="row row-sm">
<div class="col-6">
<button type="button" class="sds-navigationTile sds-box -justifyInlineStart" aria-pressed="false">
<div class="sds-media -mediaSm -mediaHasBg -mediaRounded">
<img src="../../media/spuerkeess-site/components/product/cards/sdsillu-product-card-premier.png" alt="">
</div>
<div class="sds-label sds-textHelperSmall">
Visa Débit
</div>
</button>
</div>
<div class="col-6">
<button type="button" class="sds-navigationTile sds-box -justifyInlineStart" aria-pressed="true">
<div class="sds-media -mediaSm -mediaHasBg -mediaRounded">
<img src="../../media/spuerkeess-site/components/product/cards/sdsillu-product-card-classic.png" alt="">
</div>
<div class="sds-label sds-textHelperSmall">
Visa Classic
</div>
</button>
</div>
<div class="col-6">
<button type="button" class="sds-navigationTile sds-box -justifyInlineStart" aria-pressed="false">
<div class="sds-media -mediaSm -mediaHasBg -mediaRounded">
<img src="../../media/spuerkeess-site/components/product/cards/sdsillu-product-card-premier.png" alt="">
</div>
<div class="sds-label sds-textHelperSmall">
Visa Premier
</div>
</button>
</div>
<div class="col-6">
<button type="button" class="sds-navigationTile sds-box -justifyInlineStart" aria-pressed="false">
<div class="sds-media -mediaSm -mediaHasBg -mediaRounded">
<img src="../../media/spuerkeess-site/components/product/cards/sdsillu-product-card-miles&more.png" alt="">
</div>
<div class="sds-label sds-textHelperSmall">
Miles & More
</div>
</button>
</div>
<div class="col-6">
<button type="button" class="sds-navigationTile sds-box -justifyInlineStart" aria-pressed="true">
<div class="sds-media -mediaSm -mediaHasBg -mediaRounded">
<img src="../../media/spuerkeess-site/components/product/cards/sdsillu-product-card-infinite.png" alt="">
</div>
<div class="sds-label sds-textHelperSmall">
Visa Infinite
</div>
</button>
</div>
</div>
</div>
<div class="sds-modal__footer modal-footer">
<button type="button" class="sds-btn -btnPrimary -block" data-dismiss="modal">
<span class="sds-btn__text">Comparer</span>
</button>
</div>
</div>
</div>
</div>
<div class="{{ namespace }}stackXl">
<div class="{{ namespace }}comparisonTable{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
<div class="{{ namespace }}comparisonTable__stickyHeader d-flex {{ namespace }}staticInlineSm position-sticky {{ namespace }}stickySm d-md-none" data-reacts-to-headroom>
<div class="flex-grow-1">
<div class="{{ namespace }}box -insetMd {{ namespace }}shadowInteraction">
<button class="w-100 d-flex {{ namespace }}staticInlineSm align-items-center justify-content-between text-left" type="button" data-toggle="modal" data-target="#comparisonTableModal">
{% render "@label--div",{
text: "Zebra"
},true %}
{% render "@icon-btn-secondary--small",{
icon: "icon-chevrondown",
eltType: "span",
classes: ["stretched-link"]
},true %}
</button>
</div>
</div>
<div class="flex-grow-1">
<div class="{{ namespace }}box -insetMd {{ namespace }}shadowInteraction">
<button class="w-100 d-flex {{ namespace }}staticInlineSm align-items-center justify-content-between text-left" type="button" data-toggle="modal" data-target="#comparisonTableModal">
{% render "@label--div",{
text: "Zebra Premium"
},true %}
{% render "@icon-btn-secondary--small",{
icon: "icon-chevrondown",
eltType: "span",
classes: ["stretched-link"]
},true %}
</button>
</div>
</div>
</div>
<div data-{{ namespace }}gradient-overflow-h>
<div data-{{ namespace }}gradient-overflow-h-wrapper>
<div data-{{ namespace }}gradient-overflow-h-inner>
<div class="table-responsive">
<table class="table table-borderless">
<thead class="{{ namespace }}comparisonTable__header">
<tr>
<th class="align-bottom"{% if buttons %} rowspan="2"{% endif %}>
<div class="h3">Caractéristiques</div>
</th>
<th class="{{ namespace }}box -boxSunken {{ namespace }}comparisonTable__dimensionCell align-top text-center" id="product-1">
<div class="{{ namespace }}comparisonTable__img {{ namespace }}box__outOfBoundsMd">
<img src="{{ (mediaPath + "/spuerkeess-site/components/product/cards/sdsillu-product-card-classic.png") | path }}" alt="" class="img-fluid">
</div>
<div class="{{ namespace }}stackXs">
<div class="d-none d-md-block h4">Visa Classic</div>
<div class="{{ namespace }}fontBase">
{% render "@amount--medium",{
text: "24,00"
},true %}
{% render "@amount--medium",{
classes: [namespace+"comparisonTable__meta"],
text: "/ année",
currency: false
},true %}
<div class="{{ namespace }}comparisonTable__meta {{ namespace }}textHelperSmall">
0 € avec package Zebra Premium
</div>
</div>
</div>
</th>
<th class="{{ namespace }}box -boxSunken {{ namespace }}comparisonTable__dimensionCell align-top text-center" id="product-2">
<div class="{{ namespace }}comparisonTable__img {{ namespace }}box__outOfBoundsMd">
<img src="{{ (mediaPath + "/spuerkeess-site/components/product/cards/sdsillu-product-card-classic.png") | path }}" alt="" class="img-fluid">
</div>
<div class="{{ namespace }}stackXs">
<div class="d-none d-md-block h4">Visa Premier</div>
<div class="{{ namespace }}fontBase">
{% render "@amount--medium",{
text: "70,00"
},true %}
{% render "@amount--medium",{
classes: [namespace+"comparisonTable__meta"],
text: "/ année",
currency: false
},true %}
<div class="{{ namespace }}comparisonTable__meta {{ namespace }}textHelperSmall">
0 € avec package Zebra Premium
</div>
</div>
</div>
</th>
<th class="{{ namespace }}box -boxSunken {{ namespace }}comparisonTable__dimensionCell align-top text-center -hidden" id="product-3">
<div class="{{ namespace }}comparisonTable__img {{ namespace }}box__outOfBoundsMd">
<img src="{{ (mediaPath + "/spuerkeess-site/components/product/cards/sdsillu-product-card-classic.png") | path }}" alt="" class="img-fluid">
</div>
<div class="{{ namespace }}stackXs">
<div class="d-none d-md-block h4">Miles & More Luxair Visa</div>
<div class="{{ namespace }}fontBase">
{% render "@amount--medium",{
text: "230,00"
},true %}
{% render "@amount--medium",{
classes: [namespace+"comparisonTable__meta"],
text: "/ année",
currency: false
},true %}
<div class="{{ namespace }}comparisonTable__meta {{ namespace }}textHelperSmall">
140 € avec package Zebra Premium
</div>
</div>
</div>
</th>
<th class="{{ namespace }}box -boxSunken {{ namespace }}comparisonTable__dimensionCell align-top text-center -hidden" id="product-3">
<div class="{{ namespace }}comparisonTable__img {{ namespace }}box__outOfBoundsMd">
<img src="{{ (mediaPath + "/spuerkeess-site/components/product/cards/sdsillu-product-card-classic.png") | path }}" alt="" class="img-fluid">
</div>
<div class="{{ namespace }}stackXs">
<div class="d-none d-md-block h4">Visa Infinite</div>
<div class="{{ namespace }}fontBase">
{% render "@amount--medium",{
text: "350,00"
},true %}
{% render "@amount--medium",{
classes: [namespace+"comparisonTable__meta"],
text: "/ année",
currency: false
},true %}
<div class="{{ namespace }}comparisonTable__meta {{ namespace }}textHelperSmall">
-
</div>
</div>
</div>
</th>
</tr>
{% if buttons %}
<tr>
<th class="{{ namespace }}box -boxSunken {{ namespace }}comparisonTable__dimensionCell text-center">
{% render "@btn-primary--small",{
classes: ["-block"],
eltType: "a",
text: "Cartes de crédit"
},true %}
</th>
<th class="{{ namespace }}box -boxSunken {{ namespace }}comparisonTable__dimensionCell text-center">
{% render "@btn-primary--small",{
classes: ["-block"],
eltType: "a",
text: "Cartes de crédit"
},true %}
</th>
<th class="{{ namespace }}box -boxSunken {{ namespace }}comparisonTable__dimensionCell text-center -hidden">
{% render "@btn-primary--small",{
classes: ["-block"],
eltType: "a",
text: "Miles & More"
},true %}
</th>
<th class="{{ namespace }}box -boxSunken {{ namespace }}comparisonTable__dimensionCell text-center -hidden">
{% render "@btn-primary--small",{
classes: ["-block"],
eltType: "a",
text: "Visa infinite"
},true %}
</th>
</tr>
{% endif %}
</thead>
<tbody class="{{ namespace }}comparisonTable__body">
<tr class="{{ namespace }}comparisonTable__hoveredRow">
<th>
<div class="{{ namespace }}comparisonTable__rowTitle d-flex">
<span class="{{ namespace }}icon {{ namespace }}icon-transaction"></span> <span>Virements (Eurotransfert) gratuits</span>
</div>
</th>
<td class="{{ namespace }}comparisonTable__dimensionCell" headers="product-1" data-th-content="Virements (Eurotransfert) gratuits">{% render "@circle--valid" %} <sup><a href="#comparison-table-footnote-disclaimer-1"> 1 </a></sup> <span class="sr-only">Disponible</span></td>
<td class="{{ namespace }}comparisonTable__dimensionCell" headers="product-2" data-th-content="Virements (Eurotransfert) gratuits">{% render "@circle--valid" %} <sup><a href="#comparison-table-footnote-disclaimer-2"> 2 </a></sup><span class="sr-only">Disponible</span></td>
<td class="{{ namespace }}comparisonTable__dimensionCell -hidden" headers="product-3" data-th-content="Virements (Eurotransfert) gratuits">{% render "@circle--valid" %} <span class="sr-only">Disponible</span></td>
<td class="{{ namespace }}comparisonTable__dimensionCell -hidden" headers="product-3" data-th-content="Virements (Eurotransfert) gratuits">{% render "@circle--valid" %} <span class="sr-only">Disponible</span></td>
</tr>
<tr class="{{ namespace }}comparisonTable__hoveredRow">
<th>
<div class="{{ namespace }}comparisonTable__rowTitle d-flex">
<span class="{{ namespace }}icon {{ namespace }}icon-sbank"></span> <span>Cartes de débit</span>
</div>
</th>
<td class="{{ namespace }}comparisonTable__dimensionCell" headers="product-1" data-th-content="Cartes de débit">{% render "@circle--valid" %} <sup><a href="#comparison-table-footnote-disclaimer-3"> 3 </a></sup> <span class="sr-only">Disponible</span></td>
<td class="{{ namespace }}comparisonTable__dimensionCell" headers="product-2" data-th-content="Cartes de débit">{% render "@circle--valid" %} <span class="sr-only">Disponible</span></td>
<td class="{{ namespace }}comparisonTable__dimensionCell -hidden" headers="product-3" data-th-content="Cartes de débit">{% render "@circle--valid" %} <span class="sr-only">Disponible</span></td>
<td class="{{ namespace }}comparisonTable__dimensionCell -hidden" headers="product-3" data-th-content="Cartes de débit">{% render "@circle--valid" %} <span class="sr-only">Disponible</span></td>
</tr>
<tr class="{{ namespace }}comparisonTable__hoveredRow">
<th>
<div class="{{ namespace }}comparisonTable__rowTitle d-flex">
<span class="{{ namespace }}icon {{ namespace }}icon-sbank"></span> <span>Cartes de crédit</span>
</div>
</th>
<td class="{{ namespace }}comparisonTable__dimensionCell {{ namespace }}comparisonTable__disabled" headers="product-1" data-th-content="Cartes de crédit">
<s>Not available</s>
</td>
<td class="{{ namespace }}comparisonTable__dimensionCell" headers="product-2" data-th-content="Cartes de crédit">{% render "@circle--disabled" %} <span class="sr-only">Non disponible</span></td>
<td class="{{ namespace }}comparisonTable__dimensionCell -hidden" headers="product-3" data-th-content="Cartes de crédit">{ Label }</td>
<td class="{{ namespace }}comparisonTable__dimensionCell -hidden" headers="product-3" data-th-content="Cartes de crédit">{ Label }</td>
</tr>
<tr>
<td class="{{ namespace }}comparisonTable__nestedCell" colspan="5">
<div class="{{ namespace }}outOfBounds">
<div id="collapse_section_two" class="collapse">
<table class="table table-borderless">
<tbody class="{{ namespace }}comparisonTable__body">
<tr class="{{ namespace }}comparisonTable__hoveredRow">
<th>
<div class="{{ namespace }}comparisonTable__rowTitle d-flex">
<span class="{{ namespace }}icon {{ namespace }}icon-graphgauge"></span> <span>Retrait d'espèces en EUR/mois sur distributeurs tiers en UE sans application de frais Spuerkeess</span>
</div>
</th>
<td class="{{ namespace }}comparisonTable__dimensionCell" headers="product-1" data-th-content="Retrait d'espèces en EUR/mois sur distributeurs tiers en UE sans application de frais Spuerkeess">{% render "@circle--valid" %} <span class="sr-only">Disponible</span></td>
<td class="{{ namespace }}comparisonTable__dimensionCell" headers="product-2" data-th-content="Retrait d'espèces en EUR/mois sur distributeurs tiers en UE sans application de frais Spuerkeess">{% render "@circle--valid" %} <span class="sr-only">Disponible</span></td>
<td class="{{ namespace }}comparisonTable__dimensionCell -hidden" headers="product-3" data-th-content="Retrait d'espèces en EUR/mois sur distributeurs tiers en UE sans application de frais Spuerkeess">{% render "@circle--valid" %} <span class="sr-only">Disponible</span></td>
<td class="{{ namespace }}comparisonTable__dimensionCell -hidden" headers="product-3" data-th-content="Retrait d'espèces en EUR/mois sur distributeurs tiers en UE sans application de frais Spuerkeess">{% render "@circle--valid" %} <span class="sr-only">Disponible</span></td>
</tr>
<tr class="{{ namespace }}comparisonTable__hoveredRow">
<th>
<div class="{{ namespace }}comparisonTable__rowTitle d-flex">
<span class="{{ namespace }}icon {{ namespace }}icon-vacation"></span> <span>Traitements automatisés TUP gratuit/mois</span>
</div>
</th>
<td class="{{ namespace }}comparisonTable__dimensionCell" headers="product-1" data-th-content="Traitements automatisés TUP gratuit/mois">{ Label }</td>
<td class="{{ namespace }}comparisonTable__dimensionCell" headers="product-2" data-th-content="Traitements automatisés TUP gratuit/mois">{ Multi line label Multi line label }</td>
<td class="{{ namespace }}comparisonTable__dimensionCell -hidden" headers="product-3" data-th-content="Traitements automatisés TUP gratuit/mois">Retard > 4 h. : 500 € | Prolongation > 24 h. : 150 € / jour pendant 7 jours avec max. 1.050 € </td>
<td class="{{ namespace }}comparisonTable__dimensionCell -hidden" headers="product-3" data-th-content="Traitements automatisés TUP gratuit/mois">advanced 5</td>
</tr>
<tr class="{{ namespace }}comparisonTable__hoveredRow">
<th>
<div class="{{ namespace }}comparisonTable__rowTitle d-flex">
<span class="{{ namespace }}icon {{ namespace }}icon-business"></span> <span>Conditions préférentielles sur crédits et garanties</span>
</div>
</th>
<td class="{{ namespace }}comparisonTable__dimensionCell" headers="product-1" data-th-content="Conditions préférentielles sur crédits et garanties">Free 6</td>
<td class="{{ namespace }}comparisonTable__dimensionCell" headers="product-2" data-th-content="Conditions préférentielles sur crédits et garanties">Basic 6</td>
<td class="{{ namespace }}comparisonTable__dimensionCell -hidden" headers="product-3" data-th-content="Conditions préférentielles sur crédits et garanties">advanced 6</td>
<td class="{{ namespace }}comparisonTable__dimensionCell -hidden" headers="product-3" data-th-content="Conditions préférentielles sur crédits et garanties">advanced 6</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="{{ namespace }}comparisonTable__footer text-center">
{% render "@icon-btn-secondary--ghost",{
classes: [namespace + "comparisonTable__toggle"],
icon: "icon-chevrondown",
attrs: {
"data-toggle": "collapse",
"data-target": "#collapse_section_two"
}
},true %}
</div>
</div>
</div>
<div class="{{ namespace }}stackMd">
{% render "@form-disclaimer", {
attrs: {
id: "comparison-table-footnote-disclaimer-1"
},
text: "<sup>1</sup> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
classes: ["-insetHorizLg"]
}, true %}
{% render "@form-disclaimer", {
attrs: {
id: "comparison-table-footnote-disclaimer-2"
},
text: "<sup>2</sup> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum",
classes: ["-insetHorizLg"]
}, true %}
{% render "@form-disclaimer", {
attrs: {
id: "comparison-table-footnote-disclaimer-3"
},
text: "<sup>3</sup> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt",
classes: ["-insetHorizLg"]
}, true %}
</div>
</div>
{% render "@snet-modal-base--comparison-table" %}
@use "sass:math";
/* variables specific to current element */
$comparison-table-th-width: 250px;
$comparison-table-th-width-desktop: 320px;
$comparison-table-cell-padding-inline: $table-cell-padding-x;
$comparison-table-top-spacing: map-deep-get($token-spacer-inset-map, "sm");
$comparison-table-bottom-spacing: map-deep-get($token-spacer-inset-map, "sm");
.#{$namespace}comparisonTable {
/* Save root element context for easy access if nesting is needed */
$self: &;
/* properties of current element + media queries */
@include custom-prop-fallback("background-color", "sys-color-elevation-surface-flat");
border-radius: map-deep-get($token-radius-map, "16");
/* 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 */
// comparisonTable__meta
&__meta {
// follows same logic as parent
@include custom-prop-fallback("color", "sys-color-text-primary-muted")
}
TABLE {
border-collapse: separate;
border-spacing: map-deep-get($token-spacer-inset-map, "sm") 0;
&:has(TR TD + TD:nth-of-type(2):last-of-type) {
@include media-breakpoint-up("md") {
table-layout: fixed;
TH,
TD#{$self}__dimensionCell {
width: 33.3333% !important;
}
}
}
}
[data-#{$namespace}gradient-overflow-h] {
padding-top: $comparison-table-top-spacing;
padding-bottom: $comparison-table-bottom-spacing;
&::before,
&::after {
top: -($comparison-table-bottom-spacing);
bottom: -($comparison-table-bottom-spacing);
}
}
TD {
padding-left: $comparison-table-cell-padding-inline !important;
padding-right: $comparison-table-cell-padding-inline !important;
vertical-align: top;
@include media-breakpoint-up(md) {
vertical-align: middle;
min-width: 200px;
}
}
&__stickyHeader {
z-index: z("sticky");
> * {
width: calc(50% - #{map-deep-get($token-spacer-inline-map, "sm")});
}
}
&__header {
> TR:nth-last-of-type(2) > TH + TH {
padding-bottom: 0 !important;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
//width: 33.3333333%;
}
> TR:nth-of-type(2) > TH {
border-top-left-radius: 0;
border-top-right-radius: 0;
padding: $box-md-inset-spacing-desktop-global !important;
//width: 50%;
}
> TR:first-of-type > TH:first-of-type {
width: $comparison-table-th-width;
min-width: $comparison-table-th-width;
padding-left: map-deep-get($token-spacer-inset-map, "lg") !important;
padding-right: map-deep-get($token-spacer-inset-map, "lg") !important;
display: none;
@include media-breakpoint-up("md") {
width: $comparison-table-th-width-desktop;
min-width: $comparison-table-th-width-desktop;
display: table-cell;
}
}
TH {
font-weight: map-deep-get($token-font-weight-map, "regular");
& + TH {
padding: $box-md-inset-spacing-desktop-global !important;
}
}
}
&__header,
&__body {
/* increment the number after "through" if there are more products */
@for $i from 1 through 6 {
> TR > #{$self}__dimensionCell:nth-last-of-type(n+#{$i}):nth-last-of-type(-n+#{$i}):first-of-type,
> TR > #{$self}__dimensionCell:nth-last-of-type(n+#{$i}):nth-last-of-type(-n+#{$i}):first-of-type ~ #{$self}__dimensionCell {
@include media-breakpoint-up(md) {
width: math.div(100%, $i);
}
}
}
}
&__body {
&::before {
content: "";
display: block;
padding-top: map-deep-get($token-spacer-stack-max-map, "sm");
}
> TR > TH:first-of-type {
width: $comparison-table-th-width;
min-width: $comparison-table-th-width;
text-align: left;
padding-left: map-deep-get($token-spacer-inset-map, "lg") !important;
padding-right: map-deep-get($token-spacer-inset-map, "lg") !important;
display: none;
@include media-breakpoint-up(md) {
width: $comparison-table-th-width-desktop;
min-width: $comparison-table-th-width-desktop;
display: table-cell;
}
}
#{$self}__hoveredRow {
@include media-breakpoint-up(md) {
&:hover {
TH,
TD {
position: relative;
&::before {
content: "";
position: absolute;
z-index: z("negative");
top: 0;
height: 100%;
left: 0;
right: -(map-deep-get($token-spacer-inset-map, "sm"));
@include custom-prop-fallback("background-color", "sys-color-elevation-surface-sunken");
}
}
TH {
&::before {
border-top-left-radius: map-deep-get($token-radius-map, "16");
border-bottom-left-radius: map-deep-get($token-radius-map, "16");
}
}
TD:last-child {
&::before {
right: 0;
border-top-right-radius: map-deep-get($token-radius-map, "16");
border-bottom-right-radius: map-deep-get($token-radius-map, "16");
}
}
}
}
}
> TR > TD {
text-align: center;
width: 50%;
}
TD {
font-weight: map-deep-get($token-font-weight-map, "semi-bold");
&::before {
content: attr(data-th-content);
display: block;
margin-bottom: map-deep-get($token-spacer-stack-max-map, "sm");
font-weight: map-deep-get($token-font-weight-map, "regular");
@include media-breakpoint-up(md) {
content: none;
}
}
@include media-breakpoint-up(md) {
font-weight: map-deep-get($token-font-weight-map, "regular");
}
}
TR:first-of-type {
TH,
TD {
padding-bottom: math.div(map-deep-get($token-spacer-inset-map, "lg"),2) !important;
}
}
> TR {
TH,
TD {
padding-top: math.div(map-deep-get($token-spacer-inset-map, "lg"),2) !important;
padding-bottom: math.div(map-deep-get($token-spacer-inset-map, "lg"),2) !important;
}
}
}
TH, TD {
&.-hidden {
display: none;
@include media-breakpoint-up(md) {
display: table-cell;
}
}
}
#{$self}__dimensionCell {
SUP {
margin-right: calc(-1em - 10px);
width: 18px;
display: inline-block;
}
}
&__nestedCell#{$self}__nestedCell {
padding-left: 0 !important;
padding-right: 0 !important;
padding-top: 0 !important;
}
&__toggle {
&[aria-expanded="true"] {
[class*="icon"] {
&::before {
content: map-deep-get($token-icon-map, "chevronup");
}
}
}
}
&__rowTitle {
display: flex;
@include spacer-component-inline("md");
font-weight: map-deep-get($token-font-weight-map, "semi-bold");
@include custom-prop-fallback("color","sys-color-text-primary-contrast");
font-family: map-deep-get($token-font-family-map, "text");
}
&__disabled {
@include custom-prop-fallback("color", "sys-color-text-neutral-vivid");
}
&__valid {
@include custom-prop-fallback("color", "sys-color-text-status-success-vivid");
}
&__img {
text-align: right;
margin-right: -($comparison-table-cell-padding-inline);
IMG, svg {
width: 160px;
}
}
&__footer {
margin-top: -(map-deep-get($token-spacer-unit-map, "12"));
padding-top: map-deep-get($token-spacer-inset-map, "md");
padding-bottom: map-deep-get($token-spacer-inset-map, "md");
}
/* modifiers */
// comparisonTable -altStyle
&.-altStyle {
// follows same logic as base element
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* Pseudo Classes */
&:hover {
@media (hover: hover) {
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}