No notes defined.
<div class="sds-highlightedArticle sds-box -hasGradient">
<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>
<div class="{{ namespace }}highlightedArticle {{ namespace }}box{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
{% if nopic %}
{% render "@nopic-book",{
classes: [namespace + "highlightedArticle__img"]
},true %}
{% else %}
<img src="{{ (mediaPath + img) | path }}" alt="" class="{{ namespace }}highlightedArticle__img">
{% endif %}
<div class="{{ namespace }}highlightedArticle__box">
{% if shape === "bridge" %}
<div class="{{ namespace }}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>
{% elseif shape === "tower" %}
<div class="{{ namespace }}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="{{ namespace }}highlightedArticle__shape" data-shape-tower aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="1582" height="3124" fill="none">
<g clip-path="url(#a)">
<path fill="#fff" fill-rule="evenodd"
d="M1581.54 3123.13v-1560.5L789.697 0 0 1562.63v1560.5h393.618V1659.02l396.079-780.619 396.293 780.619v1464.11h395.55Z"
clip-rule="evenodd"/>
</g>
<defs>
<clipPath id="a">
<path fill="#fff" d="M0 0h1582v3124H0z"/>
</clipPath>
</defs>
</svg>
</div>
{% endif %}
<div class="{{ namespace }}highlightedArticle__text {{ namespace }}stackXl">
{% if meta %}<span class="{{ namespace }}highlightedArticle__meta {{ namespace }}textHelper">{{ meta }}</span>{% endif %}
<h2 class="{{ namespace }}highlightedArticle__title{% if big %} h2{% else %} h4{% endif %}">{{ title }}</h2>
<p class="{{ namespace }}highlightedArticle__description {{ namespace }}textEllipsisSm">{{ text }}</p>
{% if big %}
{% render "@btn-secondary--icon-right",{
eltType: "a",
classes: ["stretched-link"],
text: "Découvrir ecoprêt",
icon: "icon-arrownext"
},true %}
{% endif %}
</div>
{% if small %}
{% render "@icon-btn-secondary",{
classes: ["stretched-link"],
action: "Découvrir écoprêt",
eltType: "a",
icon: "icon-arrownext"
},true %}
{% endif %}
</div>
</div>
/* variables specific to current element */
$contextual-page-block-height: 420px;
$contextual-page-block-inset-inline-end: map-deep-get($token-spacer-inset-map, "lg");
.#{$namespace}highlightedArticle {
/* Save root element context for easy access if nesting is needed */
$self: &;
/* properties of current element + media queries */
border-radius: map-deep-get($token-radius-map, "24");
min-height: $contextual-page-block-height;
padding-top: $contextual-page-block-height*0.5;
position: relative;
z-index: z("zero");
padding-right: $contextual-page-block-inset-inline-end;
display: flex;
flex-direction: column;
justify-content: flex-end;
box-shadow: map-deep-get($token-shadow-map, "active");
@include media-breakpoint-up("lg") {
padding-right: map-deep-get($token-spacer-unit-map, "48")*2;
}
/* 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 */
&__img {
position: absolute;
z-index: z("deepdivenegative");
border-radius: inherit;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
&__meta {
@include custom-prop-fallback("color", "sys-color-text-primary-muted")
}
&__box {
@include custom-prop-fallback("background-color", "comp-box-raised-background-color");
border-top-right-radius: map-deep-get($token-radius-map, "16");
border-bottom-left-radius: inherit;
padding: map-deep-get($token-spacer-inset-map, "md");
display: flex;
flex-direction: column;
gap: map-deep-get($token-spacer-stack-max-map, "md");
@include media-breakpoint-up("lg"){
flex-direction: row;
align-items: center;
padding: map-deep-get($token-spacer-inset-map, "lg");
}
}
// contextualPageBlock__textContent
&__text {
flex-grow: 1;
}
// contextualPageBlock__title
&__title {
// follows same logic as parent
&::after {
content: "";
@extend %brandLine;
margin-top: map-deep-get($token-spacer-stack-max-map, "md");
}
}
&__description {
margin-top: map-deep-get($token-spacer-stack-max-map, "md");
}
/* modifiers */
&.-shapeBridge,
&.-shapeTower {
// follows same logic as base element
overflow: hidden;
#{$self}__box {
position: relative;
margin-right: -($contextual-page-block-inset-inline-end);
background-color: transparent;
@include media-breakpoint-up("sm") {
max-width: 450px;
}
@include media-breakpoint-up("lg") {
position: static;
margin-bottom: map-deep-get($token-sizes-unit-map, "160");
margin-left: map-deep-get($token-sizes-unit-map, "48");
}
@include media-breakpoint-up("xl") {
margin-left: map-deep-get($token-sizes-unit-map, "80");
}
}
#{$self}__shape {
position: absolute;
z-index: z("negative");
svg g path {
@include custom-prop-fallback("fill", "comp-box-raised-background-color");
}
&[data-shape-bridge] {
top: -15%;
left: 70%;
transform: translateX(-50%);
@media screen and (min-width: 430px) {
left: 50%;
}
@include media-breakpoint-up("lg") {
top: 100%;
right: 100%;
left: auto;
transform: translate(60%, -20%);
}
//@include media-breakpoint-up("xl") {
//
// top: -25%;
//
//}
* {
height: auto;
}
}
}
}
// contextualPageBlock -shapeTower
&.-shapeTower {
// follows same logic as base element
#{$self}__box {
@include media-breakpoint-up("lg") {
margin-left: auto;
}
}
[data-shape-bridge] {
@include media-breakpoint-up("lg") {
display: none;
}
}
[data-shape-tower] {
display: none;
@include media-breakpoint-up("lg") {
display: block;
top: 100%;
left: 100%;
transform: translate(-68%, -32%);
}
}
}
// contextualPageBlock -shapeBridge
&.-shapeBridge {
// follows same logic as base element
[data-shape-tower] {
display: none;
}
}
&.-hasGradient {
&::before {
content: "";
position: absolute;
z-index: z("negative");
inset:0;
border-radius: inherit;
background-image: conic-gradient(from 180deg at 50% 51.31%, rgba(34, 170, 119, 0.15) 0deg, rgba(222, 0, 0, 0.15) 106.875deg, rgba(0, 48, 96, 0.15) 200.62500715255737deg, rgba(0, 111, 255, 0.15) 281.25deg, rgba(34, 170, 119, 0.15) 360deg);
}
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* Pseudo Classes */
&:hover {
@media (hover: hover) {
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}