No notes defined.
<div class="sds-couponPartner sds-box -insetLg sds-scaleInteraction sds-stackLg">
<div>
<img src="../../media/spuerkeess-site/components/coupons/coupon-partner.jpg" alt="" class="sds-couponPartner__img img-fluid">
</div>
<div class="sds-exceptionStackXl">
<img src="../../media/spuerkeess-site/components/coupons/coupon-logo.png" alt="" class="img-fluid">
</div>
<div class="sds-exceptionStackXl sds-staticStackXs">
<div class="sds-metaColor sds-textHelperSmall">Restaurants & Sorties</div>
<h3 class="h3">Restaurants Pizza Hut</h3>
</div>
<div class="sds-staticStackSm">
<p>
13 Pl. d'Armes <br>
1136 Ville-Haute <br>
Luxembourg
</p>
<div class="sds-aboveClickArea">
<a class="sds-link">
(+352) 46 07 77
</a>
</div>
</div>
<div class="sds-aboveClickArea">
<div class="row row-xs">
<div class="col-4">
<a href="" class="sds-navigationTile sds-box -small">
<span class="sds-btn -iconBtn -btnSecondary stretched-link">
<span class="sds-icon sds-icon-phone"></span>
</span>
<div class="sds-label sds-textHelperSmall">
Téléphone
</div>
</a>
</div>
<div class="col-4">
<a href="" class="sds-navigationTile sds-box -small">
<span class="sds-btn -iconBtn -btnSecondary stretched-link">
<span class="sds-icon sds-icon-messageread"></span>
</span>
<div class="sds-label sds-textHelperSmall">
E-Mail
</div>
</a>
</div>
<div class="col-4">
<a href="" class="sds-navigationTile sds-box -small">
<span class="sds-btn -iconBtn -btnSecondary stretched-link">
<span class="sds-icon sds-icon-turnright"></span>
</span>
<div class="sds-label sds-textHelperSmall">
Directions
</div>
</a>
</div>
</div>
</div>
<div class="sds-box -insetLg sds-box__outOfBoundsMd -boxSunken">
<div class="d-flex justify-content-center">
<a href="" class="sds-btn -btnPrimary stretched-link">
<span class="sds-btn__text">Faire une demande</span>
<span class="sds-icon sds-icon-arrownext"></span>
</a>
</div>
</div>
</div>
<div class="{{ namespace }}couponPartner {{ namespace }}box -insetLg {{ namespace }}scaleInteraction {{ namespace }}stackLg{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
<div>
<img src="{{ (mediaPath + "/spuerkeess-site/components/coupons/coupon-partner.jpg") | path }}" alt="" class="{{ namespace }}couponPartner__img img-fluid">
</div>
<div class="{{ namespace }}exceptionStackXl">
<img src="{{ (mediaPath + "/spuerkeess-site/components/coupons/coupon-logo.png") | path }}" alt="" class="img-fluid">
</div>
<div class="{{ namespace }}exceptionStackXl {{ namespace }}staticStackXs">
<div class="{{ namespace }}metaColor {{ namespace }}textHelperSmall">Restaurants & Sorties</div>
<h3 class="h3">Restaurants Pizza Hut</h3>
</div>
<div class="{{ namespace }}staticStackSm">
<p>
13 Pl. d'Armes <br>
1136 Ville-Haute <br>
Luxembourg
</p>
<div class="{{ namespace }}aboveClickArea">
{% render "@link",{
href:"tel:+352460777",
text: "(+352) 46 07 77"
},true %}
</div>
</div>
<div class="{{ namespace }}aboveClickArea">
<div class="row row-xs">
<div class="col-4">
{% render "@spk-navigation-tile--icon-btn", {
eltType: "a",
icon: "icon-phone",
text: "Téléphone"
},true %}
</div>
<div class="col-4">
{% render "@spk-navigation-tile--icon-btn", {
eltType: "a",
icon: "icon-messageread",
text: "E-Mail"
},true %}
</div>
<div class="col-4">
{% render "@spk-navigation-tile--icon-btn", {
eltType: "a",
icon: "icon-turnright",
text: "Directions"
},true %}
</div>
</div>
</div>
<div class="{{ namespace }}box -insetLg {{ namespace }}box__outOfBoundsMd -boxSunken">
<div class="d-flex justify-content-center">
{% render "@btn-primary--icon-right",{
eltType: "a",
classes: ["stretched-link"],
text: "Faire une demande",
icon: "icon-arrownext"
},true %}
</div>
</div>
</div>
/* variables specific to current element */
$element-specific-variables: "";
.#{$namespace}couponPartner {
/* Save root element context for easy access if nesting is needed */
$self: &;
/* properties of current element + media queries */
position: relative;
/* 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 */
// couponPartner__childElement
&__img {
// follows same logic as parent
border-radius: map-deep-get($token-radius-map, "16");
object-fit: cover;
width: 100%;
aspect-ratio: 16/9;
}
/* modifiers */
// couponPartner -altStyle
&.-altStyle {
// follows same logic as base element
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* Pseudo Classes */
&:hover {
@media (hover: hover) {
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}