No notes defined.
<div class="sds-coupon sds-stackXl -stackBorder">
<div class="sds-stackXl">
<img class="img-fluid" src="../../media/spuerkeess-site/components/coupons/coupon-logo.png" alt="">
<div class="sds-stackXs">
<div class="sds-textHelperSmall sds-metaColor">Restaurants & Sorties</div>
<div class="h3">Restaurants Pizza Hut</div>
</div>
</div>
<div>
<div class="h1">5%</div>
<div class="h4 sds-headingLight">jusqu'au 29 Février 2024</div>
</div>
<div class="d-flex sds-staticInlineMd">
<span class="sds-circle -valid d-none d-md-flex"></span>
<p class="sds-textBodyLg">- 5% sur le tarif standard des formations individuelles et en groupe</p>
</div>
<div class="sds-stackMd">
<p class="sds-formDisclaimer -medium">
La présente simulation est uniquement fournie à titre indicatif et n'engage nullement la Spuerkeess. Pour une proposition concrète, nous vous prions de vous adresser à une de nos agences, respectivement de présenter une demande en ligne.
</p>
<button type="button" class="sds-helperAction sds-textHelper sds-metaColor sds-staticInlineSm" data-toggle="modal" data-target="#modalID">
<span class="sds-helperAction__icon sds-icon sds-icon-infocircleborder"></span>
<span>Modal link</span>
</button>
</div>
</div>
<div class="{{ namespace }}coupon {{ namespace }}stackXl -stackBorder{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
<div class="{{ namespace }}stackXl">
<img class="img-fluid" src="{{ (mediaPath + "/spuerkeess-site/components/coupons/coupon-logo.png") | path }}" alt="">
<div class="{{ namespace }}stackXs">
<div class="{{ namespace }}textHelperSmall {{ namespace }}metaColor">{{ category }}</div>
<div class="h3">{{ title }}</div>
</div>
</div>
<div>
<div class="h1">{{ deal }}</div>
<div class="h4 {{ namespace }}headingLight">{{ date }}</div>
</div>
<div class="d-flex {{ namespace }}staticInlineMd">
{% render "@circle--valid",{
classes: ["d-none","d-md-flex"]
},true %}
<p class="{{ namespace }}textBodyLg">{{ dealDetail }}</p>
</div>
<div class="{{ namespace }}stackMd">
{% render "@form-disclaimer--medium" %}
{% render "@helper-action" %}
</div>
</div>
/* variables specific to current element */
$element-specific-variables: "";
.#{$namespace}coupon {
/* Save root element context for easy access if nesting is needed */
$self: &;
/* properties of current element + media queries */
@include custom-prop-fallback("background-color","comp-coupon-background-color");
border: $border-width*2 dashed;
@include custom-prop-fallback("border-color","comp-coupon-border-color");
border-radius: map-deep-get($token-radius-map, "24");
padding: map-deep-get($token-spacer-inset-map, "md");
display: flex;
flex-direction: column;
flex-grow: 1;
@include media-breakpoint-up("lg") {
padding: map-deep-get($token-spacer-inset-map, "lg");
}
/* 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 */
// coupon__childElement
&__childElement {
// follows same logic as parent
}
/* modifiers */
// coupon -altStyle
&.-altStyle {
// follows same logic as base element
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* Pseudo Classes */
&:hover {
@media (hover: hover) {
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}