No notes defined.
<ul class="sds-listItemGroup list-unstyled -listItemGroupStatic">
<li class="sds-listItemGroup__item">
<div class="sds-listItem -listItemStatic" data-scope-wrapper="box" data-scope="flat">
<div class="sds-listItem__leading">
<div class="sds-media -mediaHasBg">
<img src="../../media/illustrations/svg/hero/sdsillu-packagefull.svg" alt="">
</div>
</div>
<div class="sds-listItem__center">
<div class="sds-staticStackXs">
<p class="sds-fontBase sds-textSemiBold sds-headingColor">Package Zebra premium</p>
<p class="sds-textHelper sds-metaColor">3,50 € / mois</p>
</div>
</div>
<div class="sds-listItem__trailing">
</div>
</div>
</li>
<li class="sds-listItemGroup__item">
<div class="sds-listItem -listItemStatic" data-scope-wrapper="box" data-scope="flat">
<div class="sds-listItem__leading">
<div class="sds-media -mediaHasBg">
<img src="../../media/spuerkeess-site/components/product/cards/sdsillu-product-card-classic.png" alt="">
</div>
</div>
<div class="sds-listItem__center">
<div class="sds-staticStackXs">
<p class="sds-fontBase sds-textSemiBold sds-headingColor">Carte VISA Classic</p>
<p class="sds-textHelper sds-metaColor">{x} € / an<br>Nom sur la carte: {nom du porteur}</p>
</div>
</div>
<div class="sds-listItem__trailing">
</div>
</div>
</li>
<li class="sds-listItemGroup__item">
<div class="sds-listItem -listItemStatic" data-scope-wrapper="box" data-scope="flat">
<div class="sds-listItem__leading">
<div class="sds-media -mediaHasBg">
<img src="../../media/spuerkeess-site/components/product/cards/sdsillu-product-card-premier.png" alt="">
</div>
</div>
<div class="sds-listItem__center">
<div class="sds-staticStackXs">
<p class="sds-fontBase sds-textSemiBold sds-headingColor">Carte VISA Premier</p>
<p class="sds-textHelper sds-metaColor">{x} € / an<br>Nom sur la carte: {nom du porteur}</p>
</div>
</div>
<div class="sds-listItem__trailing">
</div>
</div>
</li>
</ul>
<ul class="{{ namespace }}listItemGroup list-unstyled{% if noDividers %} {{ namespace }}staticStackSm{% endif %}{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
{% if staticItems %}
{% for item in items %}
<li class="{{ namespace }}listItemGroup__item">
{% render "@list-item--media", {
eltType: "div",
center: true,
scope: "flat",
modifiers: ["-listItemStatic"],
img: item.img,
title: item.title,
description: item.description,
detail: item.detail
}, true %}
</li>
{% endfor %}
{% elseif itemHandle %}
{% for item in items %}
<li class="{{ namespace }}listItemGroup__item">
{% render "@" + itemHandle, item, true %}
</li>
{% endfor %}
{% elseif avatarChevron %}
{% for item in items %}
<li class="{{ namespace }}listItemGroup__item">
{% render "@snet-list-item--avatar-chevron", {
href: item.href,
textTag: item.textTag or "h4",
helperTextTag: item.helperTextTag or "p",
text: item.title,
helperText: item.description,
iconLeft: {
avatar: {
img: item.avatarImg or false,
text: item.avatarInitials
}
}
}, true %}
</li>
{% endfor %}
{% else %}
<li class="{{ namespace }}listItemGroup__item">
{% render "@list-item--msp",{
eltType: "a"
},true %}
</li>
<li class="{{ namespace }}listItemGroup__item">
{% render "@list-item--msp",{
eltType: "a"
},true %}
</li>
<li class="{{ namespace }}listItemGroup__item">
{% render "@list-item--msp",{
eltType: "a"
},true %}
</li>
{% endif %}
</ul>
/* variables specific to current element */
$element-specific-variables: "";
.#{$namespace}listItemGroup {
/* Save root element context for easy access if nesting is needed */
$self: &;
/* properties of current element + media queries */
@include custom-prop-fallback-override("comp-list-item-inset-h","comp-list-item-wide-inset-h");
@include custom-prop-fallback-override("comp-list-item-inset-v","comp-list-item-wide-inset-v");
@include custom-prop-fallback-override("comp-list-item-border-radius","comp-list-item-wide-border-radius");
/* 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 */
// listItemGroup__item
&__item {
// follows same logic as parent
position: relative;
z-index: z("zero");
@include custom-prop-fallback("margin-inline","comp-list-item-inset-h","true","false","true");
@include focus-visible() {
> * {
@include custom-prop-fallback("background-color","comp-list-item-pressed-background-color");
@include box-outline();
}
}
&:has(> *:focus-visible) {
z-index: z("low");
& + &::before,
&::before {
display: none;
}
}
& + & {
&::before {
content: "";
position: absolute;
inset: calc(var(--comp-list-item-wide-border-width) * -1) var(--comp-list-item-wide-inset-h) auto;
border-top: var(--comp-list-item-wide-border-width) solid var(--comp-list-item-wide-border-color);
}
&:focus {
&::before {
display: none;
}
}
}
&:focus-visible {
z-index: z("low");
& + &::before {
display: none;
}
}
}
/* modifiers */
// listItemGroup -altStyle
&.-altStyle {
// follows same logic as base element
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* Pseudo Classes */
&:hover {
@media (hover: hover) {
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}