No notes defined.
<div class="sds-cardLogin sds-box -boxInsetlg">
<div class="sds-cardLogin__header">
<div class="sds-media -mediaMd">
<img src="https://sds.apart.lu/media/illustrations/svg240x240/spot/sdsillu-openaccountb.svg" alt="">
</div>
<div class="flex-grow-1 d-flex flex-column flex-md-row flex-md-wrap justify-content-between align-items-start align-items-md-center sds-staticGapSm">
<div class="sds-cardLogin__headerContent flex-grow-1 d-flex flex-column sds-staticGapXxs">
<h3 class="sds-cardLogin__headerTitle sds-fontBase sds-colorInherit sds-textSemiBold">S-Net Privé</h3>
<p class="sds-cardLogin__headerText sds-textHelper">Mes comptes personnels</p>
</div>
</div>
</div>
<div class="sds-cardLogin__body sds-staticGapLg">
<ul class="sds-listItemGroup list-unstyled">
<li class="sds-listItemGroup__item">
<a href="#!" class="sds-listItem sds-hoverContentSecondary -avatarChevron">
<div class="sds-avatar centeredBgi">
<img class="img-fluid" src="../../media/snet/avatars/avatarUser.png" alt="">
</div>
<div class="sds-listItem__text sds-staticStackXs">
<h4 class="sds-listItem__textMain sds-fontBase sds-textSemiBold">Jil Schmit</h4>
<p class="sds-listItem__textMeta sds-textHelper">1234566</p>
</div>
<div class="sds-listItem__rightContent">
<span class="sds-iconCircle sds-hoverContentSecondary__icon" aria-hidden="true">
<span class="sds-icon sds-icon-chevronright"></span>
</span>
</div>
</a>
</li>
<li class="sds-listItemGroup__item">
<a href="#!" class="sds-listItem sds-hoverContentSecondary -avatarChevron">
<div class="sds-avatar centeredBgi -avatarBase" aria-hidden="true">
<div class="sds-avatar__text">LI</div>
</div>
<div class="sds-listItem__text sds-staticStackXs">
<h4 class="sds-listItem__textMain sds-fontBase sds-textSemiBold">Lorem Ipsum</h4>
<p class="sds-listItem__textMeta sds-textHelper">12345682</p>
</div>
<div class="sds-listItem__rightContent">
<span class="sds-iconCircle sds-hoverContentSecondary__icon" aria-hidden="true">
<span class="sds-icon sds-icon-chevronright"></span>
</span>
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="{{ namespace }}cardLogin {{ namespace }}box -boxInsetlg{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
<div class="{{ namespace }}cardLogin__header">
{% render "@media",{
internalResource: false,
img: "https://sds.apart.lu/media/illustrations/svg240x240/spot/sdsillu-openaccountb.svg"
},true %}
<div class="flex-grow-1 d-flex flex-column flex-md-row flex-md-wrap justify-content-between align-items-start align-items-md-center {{ namespace }}staticGapSm">
<div class="{{ namespace }}cardLogin__headerContent flex-grow-1 d-flex flex-column {{ namespace }}staticGapXxs">
<{{ headingTag }} class="{{ namespace }}cardLogin__headerTitle {{ namespace }}fontBase {{ namespace}}colorInherit {{ namespace }}textSemiBold">{{ heading }}</{{ headingTag }}>
<p class="{{ namespace }}cardLogin__headerText {{ namespace }}textHelper">{{ headerText }}</p>
</div>
{% if headerBadge %}
{% render "@badge--highlight",{
text: headerBadge,
classes: ["text-uppercase", "flex-shrink-0", namespace + "cardLogin__headerBadge"]
},true %}
{% endif %}
</div>
</div>
<div class="{{ namespace }}cardLogin__body {{ namespace }}staticGapLg">
{% block body %}
{% if bodyComponents %}
{% for component in bodyComponents %}
{% render "@" + component.handle, component.context, true %}
{% endfor %}
{% elseif avatarChevronItems %}
{% render "@list-item-group--avatar-chevron", {
items: avatarChevronItems
}, true %}
{% elseif bodyAlert or benefits %}
{% if bodyAlert %}
{% render "@alert-banner--highlight", {
heading: false,
description: bodyAlert,
link: false,
close: false
}, true %}
{% endif %}
{% if benefits %}
<ul class="{{ namespace }}staticStackMd list-unstyled">
{% for benefit in benefits %}
<li class="d-flex align-items-start {{ namespace }}staticGapSm">
<span class="{{ namespace }}icon {{ namespace }}icon-check-l {{ namespace }}headingColor flex-shrink-0" aria-hidden="true"></span>
<p>{{ benefit }}</p>
</li>
{% endfor %}
</ul>
{% endif %}
{% elseif text %}
<p>{{ text }}</p>
{% endif %}
{% endblock %}
</div>
{% if footer %}
<div class="{{ namespace }}cardLogin__footer {{ namespace }}staticGapSm">
{% block footer %}
{% if footerButtons %}
{% if footerButtons.primary %}
{% render "@btn-primary--icon-right", footerButtons.primary, true %}
{% endif %}
{% if footerButtons.secondary %}
{% render "@btn-secondary-inverse", footerButtons.secondary, true %}
{% endif %}
{% endif %}
{% endblock %}
</div>
{% endif %}
</div>
/* variables specific to current element */
/* Calculations using these values assume a square image. */
$header-icon-width: map-deep-get($token-sizes-unit-map, "80");
$header-icon-offset-x: map-deep-get($token-sizes-unit-map, "8");
.#{$namespace}cardLogin {
/* 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 */
&__header {
display: flex;
align-items: center;
gap: var(--comp-list-item-inline);
padding: var(--ui-space-inset-vertical-static-1000) var(--ui-space-inset-horizontal-static-1500);
@include custom-prop-fallback("background-color","comp-navbar-fallback-background-color");
@include custom-prop-fallback("background-image","comp-navbar-background-color");
color: var(--comp-banner-highlight-text-color);
border-top-left-radius: inherit;
border-top-right-radius: inherit;
position: sticky;
top: 0;
z-index: z("low");
}
&__body {
padding: var(--ui-space-inset-horizontal-static-1500);
display: flex;
flex-direction: column;
}
&__footer {
display: flex;
flex-direction: column;
align-items: center;
padding: var(--ui-space-inset-vertical-static-1000) var(--ui-space-inset-horizontal-static-1500);
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
}
/* modifiers */
// cardLogin -cardLoginBfm
&.-cardLoginBfm {
#{$self}__header {
@include gradient-x(var(--brand-color-primary-solid-140), var(--brand-color-primary-solid-120));
}
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* Pseudo Classes */
&:hover {
@media (hover: hover) {
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}