If you wish to extend the click zone of the primary link to the whole component, or even the parent in which the price box will live, add the "stretched-link" class to it.
Should you do so, don't forget to add the "sds-aboveClickArea" class to any elements that should still receive a click.
Check out the examples with and without alternative prices. The structure of and around the price tag changes because of a11y concerns. Adapt accordingly depending on whether an alternative price is shown or not.
<div class="sds-stackLg">
<div class="sds-boxPrice sds-box -boxSunken -boxInsetLg sds-staticStackXl">
<div class="sds-staticStackXl -stackBorder">
<div class="d-flex sds-staticInlineMd justify-content-between">
<p class="h4">Heading</p>
<button type="button" class="sds-infoDot" data-toggle="modal" data-target="#">
<span class="sds-icon sds-icon-infocircleborder"></span>
<span class="sr-only">Show more info</span>
</button>
</div>
<div class="sds-staticStackXs">
<dl class="d-flex justify-content-between flex-wrap align-items-baseline sds-staticInlineMd">
<dt class="flex-shrink-0">
<span class="sds-label">
{Price label}
</span>
</dt>
<dd>
<div class="sds-boxPrice__price d-flex flex-column align-items-end">
<div>
<span class="sr-only">This is the new price</span>
<div class="sds-amount -amountNeutral -amount2xl">
<div class="sds-amount__body">
<span class="sds-amount__value">{-#.###,##}</span>
<span class="sds-amount__currency">€</span>
</div>
<span class="sds-amount__suffix">
{suffix}
</span>
</div>
</div>
<s>
<span class="sr-only">This is the old price</span>
<div class="sds-amount -amountNeutral -amountSm">
<div class="sds-amount__body">
<span class="sds-amount__value">{-#.###,##}</span>
<span class="sds-amount__currency">€</span>
</div>
<span class="sds-amount__suffix">
{suffix}
</span>
</div>
</s>
</div>
</dd>
</dl>
<p class="sds-metaColor sds-textHelperSmall">{Price description}</p>
</div>
</div>
<div class="sds-staticGapMd d-flex flex-column-reverse">
<p class="text-center sds-textHelper sds-metaColor">{sales argument}</p>
<div class="text-center">
<button type="button" class="sds-btn -btnPrimary">
<span class="sds-btn__text">{Label}</span>
<span class="sds-icon sds-icon-arrownext"></span>
</button>
</div>
</div>
</div>
<p class="sds-disclaimer -disclaimerSm">
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>
<div class="text-center">
<button type="button" class="sds-btn -btnSecondary -btnInverse sds-aboveClickArea">
<span class="sds-icon sds-icon-download"></span>
<span class="sds-btn__text">{ Label }</span>
</button>
</div>
</div>
{% if disclaimer or download %}
<div class="{{ namespace }}stackLg">
{% endif %}
<div class="{{ namespace }}boxPrice {{ namespace }}box -boxSunken -boxInsetLg {{ namespace }}staticStackXl{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
<div class="{{ namespace }}staticStackXl -stackBorder">
{% if header %}
<div class="d-flex {{ namespace }}staticInlineMd justify-content-between">
<p class="h4">Heading</p>
{% if info %}
{% render "@info-dot--modal" %}
{% endif %}
</div>
{% endif %}
{% if price %}
<div class="{{ namespace }}staticStackXs">
<dl class="d-flex justify-content-between flex-wrap align-items-baseline {{ namespace }}staticInlineMd">
<dt class="flex-shrink-0">
{% render "@label",{eltType: "span",text: "{Price label}"},true %}
</dt>
<dd>
<div class="{{ namespace }}boxPrice__price d-flex flex-column align-items-end">
{% if alternativePrice %}
<div>
<span class="sr-only">This is the new price</span>
{% endif %}
{% if suffix %}
{% render "@amount-block--neutral-2xl" %}
{% else %}
{% render "@amount-body--neutral-2xl" %}
{% endif %}
{% if alternativePrice %}
</div>
{% endif %}
{% if alternativePrice %}
<s>
<span class="sr-only">This is the old price</span>
{% render "@amount-block--neutral-sm" %}
</s>
{% endif %}
</div>
</dd>
</dl>
{% if description %}
<p class="{{ namespace }}metaColor {{ namespace }}textHelperSmall">{Price description}</p>
{% endif %}
</div>
{% endif %}
</div>
{% if argument or link %}
<div class="{{ namespace }}staticGapMd d-flex flex-column-reverse">
{% if argument %}
<p class="text-center {{ namespace }}textHelper {{ namespace }}metaColor">{sales argument}</p>
{% endif %}
{% set linkClasses = [] %}
{% if extendClickZone %}
{% set linkClasses = ["stretched-link"] %}
{% endif %}
{% if link %}
<div class="text-center">
{% render "@btn-primary--icon-right",{
text: "{Label}",
icon: "icon-arrownext",
classes: linkClasses
},true %}
</div>
{% endif %}
</div>
{% endif %}
</div>
{% if disclaimer %}
{% render "@disclaimer--small" %}
{% endif %}
{% if download %}
<div class="text-center">
{% render "@btn-secondary-inverse--icon-left",{
icon: "icon-download",
text: "{ Label }",
classes: [namespace + "aboveClickArea"]
},true %}
</div>
{% endif %}
{% if disclaimer or download %}
</div>
{% endif %}
/* variables specific to current element */
$element-specific-variables: "";
.#{$namespace}boxPrice {
/* Save root element context for easy access if nesting is needed */
$self: &;
/* properties of current element + media queries */
@supports (container-type: size) {
container-type: inline-size;
container-name: price-block;
}
/* 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 */
// boxPrice__childElement
// follows same logic as parent
@supports (container-type: size) {
@container price-block (width < 380px) {
#{$self}__price {
flex-wrap: wrap-reverse !important;
}
}
}
/* modifiers */
// boxPrice -altStyle
&.-altStyle {
// follows same logic as base element
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* Pseudo Classes */
&:hover {
@media (hover: hover) {
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}