Recap Card Consent Progress: Default

No notes defined.

<div class="sds-recapCard sds-box -insetLg sds-stackLg">
    <div class="sds-stackXs">
        <div class="d-flex align-items-center justify-content-between">
            <div class="h4">Partage de données avec Revolut</div>
            <button type="button" class="sds-infoDot" data-toggle="modal" data-target="#consentModal">
                <span class="sds-icon sds-icon-infocircleborder"></span>
                <span class="sr-only">Show more info</span>
            </button>
        </div>
        <p>Le consentement permettant l'échange de données avec Revolut est valable jusqu'au 03.08.2022</p>
    </div>
    <div class="sds-stackMd">
        <div class="row row-xs no-bottom-gutter justify-content-between">
            <span class="col-auto sds-textSemiBold">Statut consentement</span>
            <span class="col sds-recapCard__success text-right">Actif</span>
        </div>
        <div class="sds-progress progress -validityGradient">
            <div class="progress-bar sds-progress__bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>

        </div>
        <div class="row row-xs no-bottom-gutter justify-content-between">
            <span class="col sds-recapCard__meta sds-textHelper">jours restants</span>
            <span class="col sds-recapCard__meta sds-textHelper text-right">81 jours</span>
        </div>
    </div>

    <div class="sds-recapCard__divider" aria-hidden="true"></div>
    <div class="sds-exceptionStackMd sds-outOfBounds">
        <div class="sds-listItem sds-hoverContentSecondary -headingText position-relative align-items-center">
            <span class="sds-iconCircle -info100" aria-hidden="true">

                <span class="sds-icon sds-icon-reload"></span>

            </span>

            <div class="sds-listItem__text">
                <a href="#!" class="sds-listItem__textMain stretched-link">Renouveler consentement</a>

                <p class="sds-listItem__description">Connectez-vous auprès de l’autre banque.</p>

            </div>

            <div class="sds-listItem__rightContent">
                <span class="sds-iconCircle sds-hoverContentSecondary__icon" aria-hidden="true">

                    <span class="sds-icon sds-icon-chevronright"></span>

                </span>

            </div>

        </div>
    </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="{{ namespace }}stackXs">
		<div class="d-flex align-items-center justify-content-between">
			<div class="h4">Partage de données avec Revolut</div>
			{% render "@info-dot--modal",{target: "consentModal"},true %}
		</div>
		<p>Le consentement permettant l'échange de données avec Revolut est valable jusqu'au 03.08.2022</p>
	</div>
	<div class="{{ namespace }}stackMd">
		<div class="row row-xs no-bottom-gutter justify-content-between">
			<span class="col-auto {{ namespace }}textSemiBold">Statut consentement</span>
			<span class="col {{ statusClass }} text-right">{{ status }}</span>
		</div>
		{% render "@snet-progress--validity",{progressValuePecentage: progressValuePecentage, progressValue: progressValue},true %}
		<div class="row row-xs no-bottom-gutter justify-content-between">
			<span class="col {{ namespace }}recapCard__meta {{ namespace }}textHelper">jours restants</span>
			<span class="col {{ namespace }}recapCard__meta {{ namespace }}textHelper text-right">81 jours</span>
		</div>
	</div>

	<div class="{{ namespace }}recapCard__divider" aria-hidden="true"></div>
	<div class="{{ namespace }}exceptionStackMd {{namespace}}outOfBounds">
		{% render "@snet-list-item--icon-circle-items-small",{
			text: "Renouveler consentement",
			helperText: "Connectez-vous auprès de l’autre banque.",
			iconLeft: {
				iconCircle: {
					icon: "icon-reload"
				}
			},
			classes: ["align-items-center"]
		},true %}
	</div>
</div>