No notes defined.
<div class="sds-highlightedArticleList">
<ul class="sds-highlightedArticleList__row list-unstyled row -gap align-items-stretch-immediate flex-nowrap">
<li class="sds-highlightedArticleList__item col">
<div class="sds-highlightedArticle sds-box -shapeBridge">
<img src="../../media/spuerkeess-site/components/contextual-page-block/article-highlight-sitting-dude.jpg" alt="" class="sds-highlightedArticle__img">
<div class="sds-highlightedArticle__box">
<div class="sds-highlightedArticle__shape" data-shape-bridge aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="1675" height="2709" viewBox="0 0 1675 2709" fill="none">
<g clip-path="url(#a)">
<path fill="#fff" fill-rule="evenodd" d="M1673.38 826.705C1673.38 370.449 1299.03 0 836.263 0 374.563 0 0 370.449 0 826.705l.642 872.365c141.197 57.62 280.896 120.23 418.56 188.13l-1.606-1060.495c0-228.711 187.549-414.2 418.667-414.2 231.757 0 419.097 185.489 419.097 414.2l1.5 1560.185c143.98 101.81 283.78 209.33 417.91 321.72l-1.39-1881.905Z" clip-rule="evenodd" />
</g>
<defs>
<clipPath id="a">
<path fill="#fff" d="M0 0h1675v2709H0z" />
</clipPath>
</defs>
</svg>
</div>
<div class="sds-highlightedArticle__text sds-stackXl">
<h2 class="sds-highlightedArticle__title h2">Financez votre projet écologiquement responsable à un taux avantageux</h2>
<p class="sds-highlightedArticle__description sds-textEllipsisSm">Bénéficiez d'un taux avantageux pour financer votre projet.Bénéficiez d'un taux avantageux pour financer votre projet.Bénéficiez d'un taux avantageux pour financer votre projet.</p>
<a href="" class="sds-btn -btnSecondary stretched-link">
<span class="sds-btn__text">Découvrir ecoprêt</span>
<span class="sds-icon sds-icon-arrownext"></span>
</a>
</div>
</div>
</div>
</li>
<li class="sds-highlightedArticleList__item col">
<div class="sds-highlightedArticle sds-box">
<img src="../../media/spuerkeess-site/components/contextual-page-block/article-highlight-sitting-dude.jpg" alt="" class="sds-highlightedArticle__img">
<div class="sds-highlightedArticle__box">
<div class="sds-highlightedArticle__text sds-stackXl">
<h2 class="sds-highlightedArticle__title h4">Financez votre projet écologiquement responsable à un taux avantageux</h2>
<p class="sds-highlightedArticle__description sds-textEllipsisSm">Bénéficiez d'un taux avantageux pour financer votre projet.Bénéficiez d'un taux avantageux pour financer votre projet.Bénéficiez d'un taux avantageux pour financer votre projet.</p>
</div>
<a href="" class="sds-btn -iconBtn -btnSecondary stretched-link">
<span class="sds-icon sds-icon-arrownext"></span>
<div class="sr-only">Découvrir écoprêt</div>
</a>
</div>
</div>
</li>
<li class="sds-highlightedArticleList__item col">
<div class="sds-highlightedArticle sds-box">
<img src="../../media/spuerkeess-site/components/contextual-page-block/article-highlight-sitting-dude.jpg" alt="" class="sds-highlightedArticle__img">
<div class="sds-highlightedArticle__box">
<div class="sds-highlightedArticle__text sds-stackXl">
<h2 class="sds-highlightedArticle__title h4">Financez votre projet écologiquement responsable à un taux avantageux</h2>
<p class="sds-highlightedArticle__description sds-textEllipsisSm">Bénéficiez d'un taux avantageux pour financer votre projet.Bénéficiez d'un taux avantageux pour financer votre projet.Bénéficiez d'un taux avantageux pour financer votre projet.</p>
</div>
<a href="" class="sds-btn -iconBtn -btnSecondary stretched-link">
<span class="sds-icon sds-icon-arrownext"></span>
<div class="sr-only">Découvrir écoprêt</div>
</a>
</div>
</div>
</li>
</ul>
</div>
<div class="{{ namespace }}highlightedArticleList{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
<ul class="{{ namespace }}highlightedArticleList__row list-unstyled row -gap align-items-stretch-immediate flex-nowrap">
<li class="{{ namespace }}highlightedArticleList__item col">
{% if shapeTower %}
{% render "@spk-highlighted-article--shape-tower" %}
{% else %}
{% render "@spk-highlighted-article--shape-bridge" %}
{% endif %}
</li>
<li class="{{ namespace }}highlightedArticleList__item col">
{% render "@spk-highlighted-article" %}
</li>
<li class="{{ namespace }}highlightedArticleList__item col">
{% render "@spk-highlighted-article" %}
</li>
</ul>
</div>
@use "sass:math";
/* variables specific to current element */
$grid-column-junction: $grid-columns*(math.div(2,3));
$grid-column-start: math.div($grid-columns,$grid-columns);
$grid-column-end: $grid-columns + 1;
$list-contextual-page-block-height: 304px;
.#{$namespace}highlightedArticleList {
/* 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 */
&__row {
padding-top: map-deep-get($token-spacer-inset-map, "md");
margin-top: -(map-deep-get($token-spacer-inset-map, "md"));
overflow-x: auto;
&.-gap {
padding-bottom: map-deep-get($token-spacer-inset-map, "md");
margin-bottom: -(map-deep-get($token-spacer-inset-map, "md")) !important;
@include media-breakpoint-up("lg") {
padding-bottom: 0;
margin-bottom: 0 !important;
}
}
@supports (scroll-snap-type: x mandatory) {
scroll-snap-type: x mandatory;
}
@include media-breakpoint-up("lg") {
padding-top: 0;
margin-top: 0;
overflow-x: visible;
scroll-snap-type: none;
display: grid;
grid-template-columns: repeat(#{$grid-columns}, 1fr);
min-height: ($list-contextual-page-block-height*2) + map-deep-get($token-spacer-grid-map, "gutter");
height: calc(100vh - (($nav-topbar-height-global + $nav-sub-nav-height-mobile-global)*3) - (map-deep-get($token-spacer-content-section-map, "s")));
}
}
// highlightedArticleList__item
&__item {
// follows same logic as parent
border-radius: map-deep-get($token-radius-map, "24");
> * {
border-radius: inherit;
box-shadow: map-deep-get($token-shadow-map, "active");
min-width: 0;
@include media-breakpoint-up("lg") {
padding-top: 0;
}
}
&:not(:first-of-type) {
> * {
@include media-breakpoint-up("lg") {
min-height: $list-contextual-page-block-height;
}
}
}
@supports (scroll-snap-type: x mandatory) {
scroll-snap-align: start;
}
flex-basis: calc(90vw - #{map-deep-get($token-spacer-grid-map, "gutter")});
flex-shrink: 0;
@include media-breakpoint-up("sm") {
flex-basis: 375px;
}
@include media-breakpoint-up("lg") {
width: auto;
grid-column-start: $grid-column-start;
grid-column-end: $grid-column-junction;
grid-row: 1 / 3;
}
& ~ & {
@include media-breakpoint-up("lg") {
grid-column-start: $grid-column-junction;
grid-column-end: $grid-column-end;
grid-row: 1 / 2;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
}
&:first-of-type:not(:last-of-type) {
@include media-breakpoint-up("lg") {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
&:last-of-type {
@include media-breakpoint-up("lg") {
grid-row: 2 / 3;
}
}
&:only-of-type {
@include media-breakpoint-up("lg") {
grid-column-start: $grid-column-start;
grid-column-end: $grid-column-end;
}
[data-shape-bridge] {
left: 55%;
@include media-breakpoint-up("sm") {
top: -15%;
left: 60%;
}
}
}
&:nth-of-type(2):not(:last-of-type) {
@include media-breakpoint-up("lg") {
border-bottom-right-radius: 0;
}
}
&:last-of-type:not(:nth-of-type(2)):not(:only-of-type) {
@include media-breakpoint-up("lg") {
border-top-right-radius: 0;
}
}
&:nth-last-child(-n+2):first-child,
&:nth-last-child(-n+2):first-child ~ & {
&:last-of-type {
@include media-breakpoint-up("lg") {
grid-row: 1 / 3;
}
}
}
}
/* modifiers */
// highlightedArticleList -altStyle
&.-altStyle {
// follows same logic as base element
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* Pseudo Classes */
&:hover {
@media (hover: hover) {
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}