The mask gets applied to the image through the inline svg present in the component.
The path element defines the shape that is applied.
The background image is referenced through the image element with an xlink:href attribute inside the svg
The gradient is handled by the following two classes: -gradientBottom an -gradientBottomRight on the sds-pageCover__img element
<section class="sds-section">
<div class="sds-section__innerWrapper">
<div class="sds-section__inner">
<div class="container-fluid">
<div class="sds-pageCover">
<div class="row flex-md-row-reverse align-items-center">
<div class="col-12 col-md-5 col-lg-6">
<div class="sds-pageCover__img -gradientBottom -gradientBottomRight">
<svg class="w-100 h-auto" xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" width="864" height="648" viewBox="0 0 864 648" aria-hidden="true">
<clipPath id="shape">
<path d="m404.53,647.9c47.56-156.78,197.03-271.27,373.92-271.27,29.4,0,58.03,3.15,85.56,9.11V4.51c-28.1-2.97-56.64-4.51-85.56-4.51C386.11,0,61.36,281.87,7.77,647.9h396.77Z" />
</clipPath>
<image class="w-100 h-auto" clip-path="url(#shape)" xlink:href="../../media/snet/components/page-cover/image-4-3.jpg"></image>
</svg>
</div>
</div>
<div class="col-12 col-md-7 col-lg-6 d-flex">
<div class="sds-pageCover__textContainer sds-stackXl container-half-xl">
<div class="sds-heroHeading">
<h1 class="sds-heroHeading__separator sds-heroHeading__main">Accroître la performance énergétique</h1>
<p class="sds-heroHeading__sub h1">Le potentiel solaire et la pompe à chaleur</p>
</div>
<div class="sds-pageCover__insetBlockLg d-sm-none d-xxl-block">
<ul class="row col-separator row-double-gutter list-unstyled">
<li class="col-12 col-sm-4">
<div class="sds-staticGapMd d-flex flex-sm-column">
<div class="sds-headingColor sds-icon sds-icon-date"></div>
<div>
<div class="sds-label">
Date
</div>
<p class="sds-exceptionStackXs sds-textSemiBold sds-textBodyLg">
Jeudi 01.01
</p>
</div>
</div>
</li>
<li class="col-12 col-sm-4">
<div class="sds-staticGapMd d-flex flex-sm-column">
<div class="sds-headingColor sds-icon sds-icon-alarm"></div>
<div>
<div class="sds-label">
Heure
</div>
<p class="sds-exceptionStackXs sds-textSemiBold sds-textBodyLg">
20h00 - 23h00
</p>
</div>
</div>
</li>
<li class="col-12 col-sm-4">
<div class="sds-staticGapMd d-flex flex-sm-column">
<div class="sds-headingColor sds-icon sds-icon-pin"></div>
<div>
<div class="sds-label">
Lieu
</div>
<p class="sds-exceptionStackXs sds-textSemiBold sds-textBodyLg">
Liberté 19
</p>
</div>
</div>
</li>
</ul>
</div>
<div class="sds-btnGroup -medium">
<a href="" class="sds-btn -btnSecondary">
<span class="sds-btn__text">Découvrez</span>
</a>
<a href="" class="sds-btn -btnPrimary">
<span class="sds-btn__text">Souscrivez</span>
</a>
</div>
</div>
</div>
</div>
<div class="sds-pageCover__footer d-none d-sm-block d-xxl-none">
<ul class="row col-separator row-double-gutter list-unstyled">
<li class="col-12 col-sm-4">
<div class="sds-staticGapMd d-flex flex-sm-column">
<div class="sds-headingColor sds-icon sds-icon-date"></div>
<div>
<div class="sds-label">
Date
</div>
<p class="sds-exceptionStackXs sds-textSemiBold sds-textBodyLg">
Jeudi 01.01
</p>
</div>
</div>
</li>
<li class="col-12 col-sm-4">
<div class="sds-staticGapMd d-flex flex-sm-column">
<div class="sds-headingColor sds-icon sds-icon-alarm"></div>
<div>
<div class="sds-label">
Heure
</div>
<p class="sds-exceptionStackXs sds-textSemiBold sds-textBodyLg">
20h00 - 23h00
</p>
</div>
</div>
</li>
<li class="col-12 col-sm-4">
<div class="sds-staticGapMd d-flex flex-sm-column">
<div class="sds-headingColor sds-icon sds-icon-pin"></div>
<div>
<div class="sds-label">
Lieu
</div>
<p class="sds-exceptionStackXs sds-textSemiBold sds-textBodyLg">
Liberté 19
</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="{{ namespace }}section{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
<div class="{{ namespace }}section__innerWrapper">
<div class="{{ namespace }}section__inner">
<div class="container-fluid">
<div class="{{ namespace }}pageCover">
<div class="row flex-md-row-reverse align-items-center">
<div class="col-12 col-md-5 col-lg-6">
<div class="{{ namespace }}pageCover__img{% for mod in imgModifiers %} {{ mod }}{% endfor %}">
{% if illu %}
<img class="img-fluid" src="https://design.spuerkeess.lu/media/illustrations/svg750x560/hero/sdsillu-{{ illu }}.svg" alt="" aria-hidden="true">
{% else %}
<svg class="w-100 h-auto" xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" width="864" height="648" viewBox="0 0 864 648" aria-hidden="true">
<clipPath id="shape">
{% if shape === "bridge" %}
<path d="m404.53,647.9c47.56-156.78,197.03-271.27,373.92-271.27,29.4,0,58.03,3.15,85.56,9.11V4.51c-28.1-2.97-56.64-4.51-85.56-4.51C386.11,0,61.36,281.87,7.77,647.9h396.77Z"/>
{% elif shape === "tower" %}
<path fill-rule="evenodd" clip-rule="evenodd" d="M879 1731.79V866.38L431.395 -0.207031L-15 866.38V1731.79H207.502V919.841L431.395 486.929L655.409 919.841V1731.79H879Z"/>
{% endif %}
</clipPath>
<image class="w-100 h-auto" clip-path="url(#shape)" xlink:href="{{ (mediaPath + "/snet/components/page-cover/image-4-3.jpg") | path }}"></image>
</svg>
{% endif %}
</div>
</div>
<div class="col-12 col-md-7 col-lg-6 d-flex">
<div class="{{ namespace }}pageCover__textContainer {{ namespace }}stackXl container-half-xl">
{% render "@hero-heading",{
title: title,
subTitle: subTitle
},true %}
{% if events %}
<div class="{{ namespace }}pageCover__insetBlockLg d-sm-none d-xxl-block">
{% render '@spk-content-block-list--icon' %}
</div>
{% endif %}
<div class="{{ namespace}}btnGroup -medium">
{% render "@btn-secondary",{
eltType: "a",
text: cta1Text
},true %}
{% if eventsSubscribed %}
{% render "@snet-transaction-state--paid-small",{
icon: "icon-checkcirclefill",
text: "Vous êtes inscrit"
},true %}
{% else %}
{% render "@btn-primary",{
eltType: "a",
text: cta2Text
},true %}
{% endif %}
</div>
</div>
</div>
</div>
{% if events %}
<div class="{{ namespace }}pageCover__footer d-none d-sm-block d-xxl-none">
{% render '@spk-content-block-list--icon' %}
</div>
{% endif %}
</div>
</div>
</div>
</div>
</section>
/* variables specific to current element */
$element-specific-variables: "";
.#{$namespace}pageCover {
/* 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 */
// pageCover__title
&__title {
margin-bottom: 0 !important; // override for old styles
&::after {
content: "";
@extend %brandLine;
margin-top: map-deep-get($token-spacer-stack-min-map, "md");
@include media-breakpoint-up(lg) {
margin-top: map-deep-get($token-spacer-stack-max-map, "md");
}
}
}
&__insetBlockLg {
padding-top: map-deep-get($token-spacer-inset-map, "lg");
padding-bottom: map-deep-get($token-spacer-inset-map, "lg");
@include media-breakpoint-up("xxl") {
padding-top: map-deep-get($token-spacer-inset-map, "xl");
padding-bottom: map-deep-get($token-spacer-inset-map, "xl");
}
}
// pageCover__subTitle
&__subTitle {
// follows same logic as parent
}
// pageCover__img
&__img {
position: relative;
&.-gradientBottom {
&::before {
content: "";
position: absolute;
top: 70%;
left: 0;
right: 0;
bottom: 0;
@include gradient-directional(rgba(map-deep-get($token-color-grayscale-map, "0"),0), rgba(map-deep-get($token-color-grayscale-map, "0"),1), 0, 70%, -180deg, true);
@include gradient-directional(var(--comp-shader-background-color), var(--sys-color-elevation-surface-flat), 0, 70%, -180deg, true);
}
}
&.-gradientBottomRight {
&::after {
content: "";
position: absolute;
top: 0;
left: 70%;
right: 0;
bottom: 0;
@include gradient-directional(rgba(map-deep-get($token-color-grayscale-map, "0"),0), rgba(map-deep-get($token-color-grayscale-map, "0"),1), 0, 70%, 90deg, true);
@include gradient-directional(var(--comp-shader-background-color), var(--sys-color-elevation-surface-flat), 0, 70%, 90deg, true);
}
}
}
// pageCover__textContainer
&__textContainer {
@include media-breakpoint-up(xl) {
margin-left: auto;
margin-right: 0;
}
}
&__spotIllu {
max-width: 160px;
@include media-breakpoint-up("lg") {
margin: auto;
max-width: none;
text-align: center;
IMG {
width: 100% !important;
height: auto !important;
}
}
}
&__footer {
margin-top: map-deep-get($token-spacer-stack-min-map, "3xl");
@include media-breakpoint-up("lg") {
margin-top: map-deep-get($token-spacer-stack-max-map, "3xl");
}
}
/* modifiers */
// pageCover -altStyle
&.-altStyle {
// follows same logic as base element
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* Pseudo Classes */
&:hover {
@media (hover: hover) {
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}