No notes defined.
<article class="sds-blogArticle sds-box">
<a href="#" class="sds-blogArticle__inner d-flex flex-column flex-grow-1">
<header class="sds-blogArticle__header text-center">
<img class="sds-blogArticle__img" src="../../media/illustrations/images/myTax.jpg" alt="">
</header>
<div class="sds-blogArticle__content sds-stackMd text-center">
<div class="sds-stackSm">
<div class="h3 sds-textEllipsisSm">Retirez vos devises aux distributeurs S-Bank</div>
</div>
<p class="sds-blogArticle__text sds-textEllipsisLg">Certains d’entre vous ne se souviennent même pas qu’il existait un temps où il fallait planifier le retrait de devises avant un voyage. Depuis plus de deux décennies, la zone euro nous permet de voyager spontanément. Pour la plupart des destinations européennes, plus besoin de passer à la banque préalablement pour retirer des devises !</p>
<div class="sds-exceptionStackLg sds-stackMd">
<div class="sds-btnGroup -wrap -hasVerticalSpacing justify-content-center">
<div class="sds-badge badge -badgePrimary -badgeMuted">
Logement
</div>
<div class="sds-badge badge -badgePrimary -badgeMuted">
Placement
</div>
</div>
<div class="sds-btnGroup -wrap -hasVerticalSpacing justify-content-center">
<div class="sds-badge badge -badgeDanger -badgeMuted">
Tuyaux
</div>
<div class="sds-badge badge -badgeDanger -badgeMuted">
Vidéos
</div>
<div class="sds-badge badge -badgeDanger -badgeMuted">
Simulateur
</div>
<div class="sds-badge badge -badgeDanger -badgeMuted">
Liens
</div>
</div>
</div>
</div>
</a>
</article>
<article class="{{ namespace }}blogArticle {{ namespace }}box{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
<a href="#" class="{{ namespace }}blogArticle__inner d-flex flex-column flex-grow-1">
<header class="{{ namespace }}blogArticle__header text-center">
{% if nopic %}
{% render "@nopic-book",{
classes: [namespace + "blogArticle__img"]
},true %}
{% else %}
<img class="{{ namespace }}blogArticle__img" src="{{ (mediaPath + "/illustrations/images/myTax.jpg") | path }}" alt="">
{% endif %}
{% if icon %}
<div class="{{ namespace }}blogArticle__icon">
<img class="img-fluid" src="{{ ("https://design.spuerkeess.lu/media" + illustrationsSDSPath + svg240xPath + "/spot/sdsillu-rocketship.svg") }}" alt="">
</div>
{% endif %}
</header>
<div class="{{ namespace }}blogArticle__content {{ namespace }}stackMd text-center">
<div class="{{ namespace }}stackSm">
{% if meta %}<span class="{{ namespace }}blogArticle__helper {{ namespace }}textHelperSmall">{{ meta }}</span>{% endif %}
{% if subtitle %}<div class="{{ namespace }}blogArticle__subTitle">{{ subtitle }}</div>{% endif %}
<div class="{{ headingLvl}} {{ namespace }}textEllipsisSm">{{ title }}</div>
</div>
<p class="{{ namespace }}blogArticle__text {{ namespace }}textEllipsisLg">{{ text }}</p>
{% if filters %}
<div class="{{ namespace }}exceptionStackLg {{ namespace }}stackMd">
<div class="{{ namespace }}btnGroup -wrap -hasVerticalSpacing justify-content-center">
{% render "@badge--primary-muted",{
text: "Logement"
},true %}
{% render "@badge--primary-muted",{
text: "Placement"
},true %}
</div>
<div class="{{ namespace }}btnGroup -wrap -hasVerticalSpacing justify-content-center">
{% render "@badge--danger-muted",{
text: "Tuyaux"
},true %}
{% render "@badge--danger-muted",{
text: "Vidéos"
},true %}
{% render "@badge--danger-muted",{
text: "Simulateur"
},true %}
{% render "@badge--danger-muted",{
text: "Liens"
},true %}
</div>
</div>
{% endif %}
</div>
</a>
</article>
/* variables specific to current element */
@use "sass:math";
$blog-article-icon-dimension: map-deep-get($token-spacer-unit-map, "64");
$blog-article-content-inset: map-deep-get($token-spacer-inset-map, "lg");
$blog-article-icon-negative-stack: map-deep-get($token-spacer-inset-map, "md");
.#{$namespace}blogArticle {
/* Save root element context for easy access if nesting is needed */
$self: &;
/* properties of current element + media queries */
@include custom-prop-fallback-override("sys-color-text-primary-vivid","comp-card-article-body-text-color");
border-radius: map-deep-get($token-radius-map, "16");
display: flex;
flex-direction: column;
/* 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 */
&__inner {
border-radius: inherit;
@include custom-prop-fallback("background-color", "comp-box-background-color");
&:hover,
&:focus {
@media (hover: hover) {
@include custom-prop-fallback("background-color", "comp-box-background-color");
}
}
}
&__header {
display: flex;
flex-direction: column;
align-items: center;
background-color: inherit;
border-radius: inherit;
}
// blogArticle__img
&__img {
width: 100%;
aspect-ratio: 16/9;
height: auto;
object-fit: cover;
border-top-left-radius: map-deep-get($token-radius-map, "16");
border-top-right-radius: map-deep-get($token-radius-map, "16");
}
&__icon {
display: inline-flex;
justify-content: center;
align-items: center;
width: $blog-article-icon-dimension;
height: $blog-article-icon-dimension;
padding: map-deep-get($token-spacer-inset-map, "sm");
border-radius: map-deep-get($token-radius-map, "circle");
background-color: inherit;
margin-top: -(math.div($blog-article-icon-dimension, 2));
margin-bottom: -($blog-article-icon-negative-stack);
}
&__content {
padding: $blog-article-content-inset;
}
&__helper,
&__subTitle {
@include custom-prop-fallback("color","comp-card-product-meta-text-color")
}
&__subTitle {
font-weight: map-deep-get($token-font-weight-map, "semi-bold");
}
&__text {
@include custom-prop-fallback("color", "comp-card-article-body-text-color");
&::before {
content: "";
display: block;
width: map-deep-get($token-spacer-unit-map, "40");
height: map-deep-get($token-spacer-unit-map, "2");
@include custom-prop-fallback("background", "comp-brand-line-background-color");
margin-bottom: map-deep-get($token-spacer-unit-map, "16");
margin-left: auto;
margin-right: auto;
}
}
/* modifiers */
// blogArticle -altStyle
&.-altStyle {
// follows same logic as base element
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* Pseudo Classes */
&:hover {
@media (hover: hover) {
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}