Recap Card Base: Default

No notes defined.

<div class="sds-recapCard sds-box -insetLg sds-stackLg">
    <div class="h4">Récapitlatif Avril 2023</div>
    <div class="sds-stackMd">
        <ul class="list-unstyled sds-exceptionStackLg">
            <li class="row">
                <div class="col">
                    Pré-autorisation
                </div>
                <div class="col-auto text-right">
                    <div class="sds-amount -negative -fade">
                        <span class="sds-amount__value">-894,12</span>

                        <span class="sds-amount__currency">€</span>

                    </div>
                </div>
            </li>
            <li class="row">
                <div class="col">
                    <div class="sds-textSemiBold">Encours</div>
                </div>
                <div class="col-auto text-right">
                    <div class="sds-amount -negative">
                        <span class="sds-amount__value">-953,63</span>

                        <span class="sds-amount__currency">€</span>

                    </div>
                </div>
            </li>
            <li class="row">
                <div class="col">
                    <div class="sds-recapCard__meta sds-textHelper">
                        (Retraits S-Bank non inclus)
                    </div>
                </div>
            </li>
        </ul>
        <div class="sds-progress progress">
            <div class="progress-bar sds-progress__bar -negative" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>

            <div class="progress-bar sds-progress__bar -negative -faded" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>

        </div>
        <ul class="list-unstyled">
            <li class="row">
                <div class="col sds-recapCard__meta sds-textHelper">Limite disponible / maximum</div>
                <div class="col-auto text-right sds-recapCard__meta sds-textHelper">3.152,25 € / 5.000 €</div>
            </li>
        </ul>
    </div>
</div>
 
<div class="{{ namespace }}recapCard {{ namespace }}box -insetLg {{ namespace }}stackLg{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
	<div class="h4">Récapitlatif Avril 2023</div>
	<div class="{{ namespace }}stackMd">
		<ul class="list-unstyled {{ namespace }}exceptionStackLg">
			<li class="row">
				<div class="col">
					Pré-autorisation
				</div>
				<div class="col-auto text-right">
					{% render "@amount--negative-faded",{text: "-894,12"},true %}
				</div>
			</li>
			<li class="row">
				<div class="col">
					<div class="{{ namespace }}textSemiBold">Encours</div>
				</div>
				<div class="col-auto text-right">
					{% render "@amount--negative",{text: "-953,63"},true %}
				</div>
			</li>
			<li class="row">
				<div class="col">
					<div class="{{ namespace }}recapCard__meta {{ namespace }}textHelper">
						(Retraits S-Bank non inclus)
					</div>
				</div>
			</li>
		</ul>
		{% render "@snet-progress--negative-two-values" %}
		<ul class="list-unstyled">
			<li class="row">
				<div class="col {{ namespace }}recapCard__meta {{ namespace }}textHelper">Limite disponible / maximum</div>
				<div class="col-auto text-right {{ namespace }}recapCard__meta {{ namespace }}textHelper">3.152,25 € / 5.000 €</div>
			</li>
		</ul>
	</div>
</div>