No notes defined.
<!-- Default -->
<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="">
<div class="sds-blogArticle__icon">
<img class="img-fluid" src="https://design.spuerkeess.lu/media/illustrations/svg240x240/spot/sdsillu-rocketship.svg" alt="">
</div>
</header>
<div class="sds-blogArticle__content sds-stackMd text-center">
<div class="sds-stackSm">
<span class="sds-blogArticle__helper sds-textHelperSmall">Aujourd'hui</span>
<div class="sds-blogArticle__subTitle">Entrepreneuriat</div>
<div class="h4 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>
</a>
</article>
<!-- Nopic -->
<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">
<div class="sds-noPic sds-blogArticle__img">
<svg width="630" height="630" viewBox="0 0 630 630" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="630" height="630" transform="translate(0 0.304688)" fill="#F0F6FF" />
<g opacity="0.32">
<path fill-rule="evenodd" clip-rule="evenodd" d="M369.433 229.558C375.28 227.584 381.324 231.561 382.015 237.502L382.081 238.638V248.214L401.247 248.221C406.162 248.221 410.213 251.921 410.766 256.687L410.831 257.804V391.971C410.831 396.886 407.131 400.936 402.365 401.49L401.247 401.554H228.747C223.833 401.554 219.782 397.855 219.229 393.089L219.164 391.971V257.804C219.164 252.89 222.864 248.839 227.63 248.285L228.747 248.221L247.914 248.214V238.638C247.914 232.467 253.616 228.011 259.466 229.257L260.563 229.558L314.978 247.936L369.433 229.558ZM247.914 267.38L238.331 267.388V382.388L285.011 382.38L254.433 372.062C250.927 370.879 248.451 367.801 247.991 364.2L247.914 362.982V267.38ZM382.081 362.982C382.081 366.683 379.956 370.012 376.691 371.6L375.562 372.062L344.974 382.38L391.664 382.388V267.388L382.081 267.38V362.982ZM267.081 251.987V356.101L305.414 369.038V264.925L267.081 251.987ZM362.914 251.978L324.581 264.915V369.038L362.914 356.101V251.978Z" fill="#4D6E90" />
</g>
</svg>
</div>
<div class="sds-blogArticle__icon">
<img class="img-fluid" src="https://design.spuerkeess.lu/media/illustrations/svg240x240/spot/sdsillu-rocketship.svg" alt="">
</div>
</header>
<div class="sds-blogArticle__content sds-stackMd text-center">
<div class="sds-stackSm">
<span class="sds-blogArticle__helper sds-textHelperSmall">Aujourd'hui</span>
<div class="sds-blogArticle__subTitle">Entrepreneuriat</div>
<div class="h4 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>
</a>
</article>
<!-- Filters -->
<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">
<span class="sds-badge badge -badgePrimary -badgeMuted">
Logement
</span>
<span class="sds-badge badge -badgePrimary -badgeMuted">
Placement
</span>
</div>
<div class="sds-btnGroup -wrap -hasVerticalSpacing justify-content-center">
<span class="sds-badge badge -badgeDanger -badgeMuted">
Tuyaux
</span>
<span class="sds-badge badge -badgeDanger -badgeMuted">
Vidéos
</span>
<span class="sds-badge badge -badgeDanger -badgeMuted">
Simulateur
</span>
<span class="sds-badge badge -badgeDanger -badgeMuted">
Liens
</span>
</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 {
}
}