No notes defined.
<div class="sds-productFeatureDetails">
<div class="sds-productFeatureDetails__trigger">
<button type="button" class="sds-btn -iconBtn -btnSecondary -btnBig sds-productFeatureDetails__collapseTrigger" aria-labelledby="#productFeatureDetailsTriggerLabel" data-toggle="collapse" data-target="#productFeatureDetailsCollapse" aria-expanded="false">
<span class="sds-icon sds-icon-plus"></span>
</button>
<div class="sds-productFeatureDetails__triggerLabel h4" id="productFeatureDetailsTriggerLabel">Voir tous les services inclus</div>
</div>
<div class="sds-productFeatureDetails__collapse sds-collapse collapse fade" id="productFeatureDetailsCollapse">
<div class="sds-productFeatureDetails__collapseInner">
<div class="sds-productFeatureDetails__box sds-box -insetXl">
<div class="sds-stackXl">
<h3 class="sds-productFeatureDetails__title h3">Zebra Premium</h3>
<div class="sds-productFeatureDetails__listArea sds-wysiwyg -checkList">
<h4>Services autour du compte courant</h4>
<ul>
<li>Tenue de compte</li>
<li>1 extrait de compte (électronique ou papier) gratuit/mois</li>
<li>Virements (Eurotransfert) sans frais/mois</li>
<li>3 traitements automatisés TUP gratuits/mois</li>
<li>Gestion gratuite des ordres permanents via S-Net et S-Net Mobile</li>
</ul>
<h4>Cartes de débit</h4>
<ul>
<li>Fourniture de 2 cartes de débit Visa Debit gratuites</li>
<li>4 retraits d'espèces en EUR/mois sur distributeurs tiers en UE sans application de frais Spuerkeess</li>
<li>Demande nouveau code PIN gratuit</li>
<li>Remplacement gratuit de cartes</li>
</ul>
<h4>Cartes de crédit</h4>
<ul>
<li>Fourniture de 2 carte de crédit Visa Classic gratuites, ou 1 Visa Classic et 1 Visa Premier</li>
<li>Fourniture d'une carte de crédit Miles & More Luxair Visa à un tarif de faveur</li>
<li>Demande nouveau code PIN gratuit</li>
<li>Remplacement gratuit de cartes</li>
<li>Retraits d'espèces gratuits sur distributeurs Spuerkeess en mode « débit direct »</li>
<li>Assurance accidents et autres assurances liées aux cartes de crédit</li>
</ul>
<h4>Crédits et garanties*</h4>
<ul>
<li>Taux de faveur sur découvert permanent (≤ EUR 10.000)</li>
<li>Commission de dossier offerte sur découvert permanent (≤ EUR 10.000)</li>
<li>Taux de faveur sur prêts personnels</li>
<li>-25 % sur commission de dossier sur prêts au logement</li>
<li>Tarif de faveur sur garantie locative</li>
</ul>
<h4>Coffre-Fort</h4>
<ul>
<li>-20 % sur le tarif de location</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="{{ namespace }}productFeatureDetails{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
<div class="{{ namespace }}productFeatureDetails__trigger">
{% render "@icon-btn-secondary--big",{
classes: [namespace + "productFeatureDetails__collapseTrigger"],
icon: "icon-plus",
attrs: {
"aria-labelledby": "#productFeatureDetailsTriggerLabel",
"data-toggle": "collapse",
"data-target": "#productFeatureDetailsCollapse",
"aria-expanded": "false"
}
},true %}
<div class="{{ namespace }}productFeatureDetails__triggerLabel h4" id="productFeatureDetailsTriggerLabel">Voir tous les services inclus</div>
</div>
<div class="{{ namespace }}productFeatureDetails__collapse {{ namespace }}collapse collapse fade" id="productFeatureDetailsCollapse">
<div class="{{ namespace }}productFeatureDetails__collapseInner">
<div class="{{ namespace }}productFeatureDetails__box {{ namespace }}box -insetXl">
<div class="{{ namespace }}stackXl">
<h3 class="{{ namespace }}productFeatureDetails__title h3">Zebra Premium</h3>
<div class="{{ namespace }}productFeatureDetails__listArea {{ namespace }}wysiwyg -checkList">
{% for key, item in listItems %}
<h4>{{ item.title }}</h4>
<ul>
{% for subKey, subItem in item.subListItems %}
<li>{{ subItem.text }}</li>
{% endfor %}
</ul>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
</div>
/* variables specific to current element */
$element-specific-variables: "";
.#{$namespace}productFeatureDetails {
/* Save root element context for easy access if nesting is needed */
$self: &;
/* properties of current element + media queries */
/* 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 */
// productFeatureDetails__trigger
&__trigger {
// follows same logic as parent
display: flex;
flex-direction: column-reverse;
align-items: center;
justify-content: center;
@include spacer-component-stack-gap("md");
}
&__collapseTrigger {
position: relative;
z-index: z("low");
[class*="icon"] {
transition: transform $transition-collapse-duration*0.5 $transition-collapse-duration*0.25 linear;
&::before {
font-size: map-deep-get($token-icon-btn-size-map, "big", "font-size");
}
}
&::after {
content: "";
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: inherit;
box-shadow: map-deep-get($token-shadow-map, "active");
transition: opacity $transition-collapse-duration linear;
}
&[aria-expanded="true"] {
&::after {
opacity: 1;
}
[class*="icon"] {
transform: rotate(45deg);
}
& + #{$self}__triggerLabel {
opacity: 0;
}
}
}
&__triggerLabel {
opacity: 1;
transition: opacity $transition-collapse-duration*0.5 ease-out;
}
&__collapseInner {
padding-top: map-deep-get($token-spacer-stack-max-map, "3xl");
}
&__title {
margin-top: $box-xl-inset-spacing-mobile-global + map-deep-get($token-icon-btn-size-map, "big", "width");
@include media-breakpoint-up("lg") {
margin-top: $box-xl-inset-spacing-desktop-global + map-deep-get($token-icon-btn-size-map, "big", "width");
}
}
&__box {
box-shadow: map-deep-get($token-shadow-map, "active");
@include custom-prop-fallback("background-color","comp-box-raised-background-color");
}
&__collapse {
&.show {
#{$self}__collapseInner {
margin-top: -(map-deep-get($token-spacer-stack-max-map, "3xl") + map-deep-get($token-icon-btn-size-map, "big", "width") + $box-xl-inset-spacing-mobile-global);
transition: margin-top $transition-collapse-duration*0.5 ease-in-out;
@include media-breakpoint-up("lg") {
margin-top: -(map-deep-get($token-spacer-stack-max-map, "3xl") + map-deep-get($token-icon-btn-size-map, "big", "width") + $box-xl-inset-spacing-mobile-global);
}
}
}
}
&__listArea {
@include spacer-component-stack("xl");
@include media-breakpoint-up("lg") {
column-count: 2;
column-gap: map-deep-get($token-spacer-grid-map, "gutter");
break-inside: avoid-column;
}
UL,
OL {
@include spacer-component-stack-exception("lg");
LI {
break-inside: avoid-column;
display: inline-block; /* fix pseudo element "leaking" into other column on column break https://stackoverflow.com/questions/72710407/css-column-count-breaking-li-before-and-after-in-first-column-only */
width: 100%; /* force 100% width, so the list elements don't show up next to one another if text is short */
}
}
}
/* modifiers */
// productFeatureDetails -altStyle
&.-altStyle {
// follows same logic as base element
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* Pseudo Classes */
&:hover {
@media (hover: hover) {
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}