Box Price

No notes defined.

<div class="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-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>
                </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>
 
<div class="{{ namespace }}box -boxSunken -boxInsetLg {{ namespace }}staticStackXl{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
	<div class="{{ namespace }}staticStackXl -stackBorder">
		<div class="d-flex {{ namespace }}staticInlineMd justify-content-between">
			<p class="h4">Heading</p>
			{% render "@info-dot--modal" %}
		</div>
		<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>
					{% render "@amount-block--neutral-2xl" %}
				</dd>
			</dl>
			<p class="{{ namespace }}metaColor {{ namespace }}textHelperSmall">{Price description}</p>
		</div>
	</div>
	<div class="{{ namespace }}staticGapMd d-flex flex-column-reverse">
		<p class="text-center {{ namespace }}textHelper {{ namespace }}metaColor">{sales argument}</p>
		<div class="text-center">
			{% render "@btn-primary--icon-right",{
				text: "{Label}",
				icon: "icon-arrownext"
			},true %}
		</div>
	</div>
</div>