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">
<div class="sds-pageCover">
<div class="row flex-md-row-reverse align-items-center">
<div class="col-12 offset-lg-1 col-lg-4">
<div class="sds-pageCover__spotIllu">
<img src="https://design.spuerkeess.lu/media/illustrations/svg240x240/spot/sdsillu-houseb.svg" alt="" class="img-fluid">
</div>
</div>
<div class="col-12 col-lg-7">
<div class="sds-pageCover__textContainer sds-stackXl">
<div class="sds-heroHeading">
<h1 class="sds-heroHeading__separator sds-heroHeading__main">Logement</h1>
<p class="sds-heroHeading__sub h1">Vous souhaitez devenir propriétaire ou avez besoin de conseils quant à la rénovation de votre logement ?</p>
</div>
<div class="sds-btnGroup">
<a href="" class="sds-btn -btnSecondary">
<span class="sds-btn__text">Voir tous</span>
</a>
</div>
</div>
</div>
</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">
<div class="{{ namespace }}pageCover">
<div class="row flex-md-row-reverse align-items-center">
<div class="col-12 offset-lg-1 col-lg-4">
<div class="{{ namespace }}pageCover__spotIllu">
<img src="https://design.spuerkeess.lu/media/illustrations/svg240x240/spot/sdsillu-houseb.svg" alt="" class="img-fluid">
</div>
</div>
<div class="col-12 col-lg-7">
<div class="{{ namespace }}pageCover__textContainer {{ namespace }}stackXl">
{% render "@hero-heading",{
title: title,
subTitle: subTitle
},true %}
<div class="{{ namespace}}btnGroup">
{% render "@btn-secondary",{
eltType: "a",
text: "Voir tous"
},true %}
</div>
</div>
</div>
</div>
</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 {
}
}