See "img upload" in sidebar snet/molecules for variants, or go to info panel and look for it in "references" (@snet-img-upload)
Refer to modal frame found in view tab for complete structure without content.
A modal's default size is 640px
Modifier classes for modals
A modal with a content loading component behaves as follows:
<div class="sds-modal modal fade -bodySecondary06" id="sitfinAllCards" aria-hidden="true" tabindex="-1">
<div class="sds-modal__dialog modal-dialog modal-dialog-centered modal-dialog-scrollable">
<div class="sds-modal__content modal-content">
<div class="sds-modal__header modal-header">
<h5 class="sds-modal__title modal-title">Cartes de paiement</h5>
<button type="button" class="sds-btn -iconBtn -btnSecondary -ghost sds-modal__close" data-dismiss="modal" aria-label="Close">
<span class="sds-icon sds-icon-close"></span>
</button>
</div>
<div class="sds-modal__body modal-body">
<div class="sds-stackMd">
<div class="sds-box -insetLg">
<div class="sds-stackSm">
<div class="sds-listItem sds-hoverContentSecondary">
<img class="sds-listItem__creditCard" src="../../media/snet/components/sitfin/visaclassic-small.png" alt="">
<div class="sds-listItem__text">
<div class="sds-accountInfo">
<div class="sds-accountInfo__content">
<p class="sds-accountInfo__title sds-textSemiBold">
<span class="text-truncate">
{Card Name}
</span>
</p>
<p class="sds-accountInfo__meta">{####-####-####-####}</p>
</div>
</div>
</div>
<div class="sds-listItem__rightContent">
<div class="dropdown">
<button type="button" class="sds-btn -iconBtn -btnSecondary dropdown-toggle" data-toggle="dropdown" data-reference="parent" data-boundary="window">
<span class="sds-icon sds-icon-more"></span>
</button>
<div aria-labelledby="" class="sds-actionMenu dropdown-menu dropdown-menu-right dropdown-menu-right">
<a href="" class="sds-actionMenu__item dropdown-item">
<span class="sds-iconCircle -secondary10" aria-hidden="true">
<span class="sds-icon sds-icon-edit"></span>
</span>
<span>Renommer</span>
</a>
<a href="" class="sds-actionMenu__item dropdown-item">
<span class="sds-iconCircle -secondary10" aria-hidden="true">
<span class="sds-icon sds-icon-infocircleborder"></span>
</span>
<span>Informations</span>
</a>
<a href="" class="sds-actionMenu__item dropdown-item">
<span class="sds-iconCircle -secondary10" aria-hidden="true">
<span class="sds-icon sds-icon-tablesetup"></span>
</span>
<span>Modification limite</span>
</a>
<a href="" class="sds-actionMenu__item dropdown-item">
<span class="sds-iconCircle -secondary10" aria-hidden="true">
<span class="sds-icon sds-icon-gear"></span>
</span>
<span>Paramètres de paiement</span>
</a>
</div>
</div>
</div>
</div>
<div class="sds-listItem sds-hoverContentSecondary">
<img class="sds-listItem__creditCard" src="../../media/snet/components/sitfin/visaclassic-small.png" alt="">
<div class="sds-listItem__text">
<div class="sds-accountInfo">
<div class="sds-accountInfo__content">
<p class="sds-accountInfo__title sds-textSemiBold">
<span class="text-truncate">
{Card Name}
</span>
</p>
<p class="sds-accountInfo__meta">{####-####-####-####}</p>
</div>
</div>
</div>
<div class="sds-listItem__rightContent">
<div class="dropdown">
<button type="button" class="sds-btn -iconBtn -btnSecondary dropdown-toggle" data-toggle="dropdown" data-reference="parent" data-boundary="window">
<span class="sds-icon sds-icon-more"></span>
</button>
<div aria-labelledby="" class="sds-actionMenu dropdown-menu dropdown-menu-right dropdown-menu-right">
<a href="" class="sds-actionMenu__item dropdown-item">
<span class="sds-iconCircle -secondary10" aria-hidden="true">
<span class="sds-icon sds-icon-edit"></span>
</span>
<span>Renommer</span>
</a>
<a href="" class="sds-actionMenu__item dropdown-item">
<span class="sds-iconCircle -secondary10" aria-hidden="true">
<span class="sds-icon sds-icon-infocircleborder"></span>
</span>
<span>Informations</span>
</a>
<a href="" class="sds-actionMenu__item dropdown-item">
<span class="sds-iconCircle -secondary10" aria-hidden="true">
<span class="sds-icon sds-icon-tablesetup"></span>
</span>
<span>Modification limite</span>
</a>
<a href="" class="sds-actionMenu__item dropdown-item">
<span class="sds-iconCircle -secondary10" aria-hidden="true">
<span class="sds-icon sds-icon-gear"></span>
</span>
<span>Paramètres de paiement</span>
</a>
</div>
</div>
</div>
</div>
<div class="sds-listItem sds-hoverContentSecondary">
<img class="sds-listItem__creditCard" src="../../media/snet/components/sitfin/visaclassic-small.png" alt="">
<div class="sds-listItem__text">
<div class="sds-accountInfo">
<div class="sds-accountInfo__content">
<p class="sds-accountInfo__title sds-textSemiBold">
<span class="text-truncate">
{Card Name}
</span>
</p>
<p class="sds-accountInfo__meta">{####-####-####-####}</p>
</div>
</div>
</div>
<div class="sds-listItem__rightContent">
<div class="dropdown">
<button type="button" class="sds-btn -iconBtn -btnSecondary dropdown-toggle" data-toggle="dropdown" data-reference="parent" data-boundary="window">
<span class="sds-icon sds-icon-more"></span>
</button>
<div aria-labelledby="" class="sds-actionMenu dropdown-menu dropdown-menu-right dropdown-menu-right">
<a href="" class="sds-actionMenu__item dropdown-item">
<span class="sds-iconCircle -secondary10" aria-hidden="true">
<span class="sds-icon sds-icon-edit"></span>
</span>
<span>Renommer</span>
</a>
<a href="" class="sds-actionMenu__item dropdown-item">
<span class="sds-iconCircle -secondary10" aria-hidden="true">
<span class="sds-icon sds-icon-infocircleborder"></span>
</span>
<span>Informations</span>
</a>
<a href="" class="sds-actionMenu__item dropdown-item">
<span class="sds-iconCircle -secondary10" aria-hidden="true">
<span class="sds-icon sds-icon-tablesetup"></span>
</span>
<span>Modification limite</span>
</a>
<a href="" class="sds-actionMenu__item dropdown-item">
<span class="sds-iconCircle -secondary10" aria-hidden="true">
<span class="sds-icon sds-icon-gear"></span>
</span>
<span>Paramètres de paiement</span>
</a>
</div>
</div>
</div>
</div>
<div class="sds-listItem sds-hoverContentSecondary">
<img class="sds-listItem__creditCard" src="../../media/snet/components/sitfin/visaclassic-small.png" alt="">
<div class="sds-listItem__text">
<div class="sds-accountInfo">
<div class="sds-accountInfo__content">
<p class="sds-accountInfo__title sds-textSemiBold">
<span class="text-truncate">
{Card Name}
</span>
</p>
<p class="sds-accountInfo__meta">{####-####-####-####}</p>
</div>
</div>
</div>
<div class="sds-listItem__rightContent">
<div class="dropdown">
<button type="button" class="sds-btn -iconBtn -btnSecondary dropdown-toggle" data-toggle="dropdown" data-reference="parent" data-boundary="window">
<span class="sds-icon sds-icon-more"></span>
</button>
<div aria-labelledby="" class="sds-actionMenu dropdown-menu dropdown-menu-right dropdown-menu-right">
<a href="" class="sds-actionMenu__item dropdown-item">
<span class="sds-iconCircle -secondary10" aria-hidden="true">
<span class="sds-icon sds-icon-edit"></span>
</span>
<span>Renommer</span>
</a>
<a href="" class="sds-actionMenu__item dropdown-item">
<span class="sds-iconCircle -secondary10" aria-hidden="true">
<span class="sds-icon sds-icon-infocircleborder"></span>
</span>
<span>Informations</span>
</a>
<a href="" class="sds-actionMenu__item dropdown-item">
<span class="sds-iconCircle -secondary10" aria-hidden="true">
<span class="sds-icon sds-icon-tablesetup"></span>
</span>
<span>Modification limite</span>
</a>
<a href="" class="sds-actionMenu__item dropdown-item">
<span class="sds-iconCircle -secondary10" aria-hidden="true">
<span class="sds-icon sds-icon-gear"></span>
</span>
<span>Paramètres de paiement</span>
</a>
</div>
</div>
</div>
</div>
<div class="sds-listItem sds-hoverContentSecondary">
<img class="sds-listItem__creditCard" src="../../media/snet/components/sitfin/visaclassic-small.png" alt="">
<div class="sds-listItem__text">
<div class="sds-accountInfo">
<div class="sds-accountInfo__content">
<p class="sds-accountInfo__title sds-textSemiBold">
<span class="text-truncate">
{Card Name}
</span>
</p>
<p class="sds-accountInfo__meta">{####-####-####-####}</p>
</div>
</div>
</div>
<div class="sds-listItem__rightContent">
<div class="dropdown">
<button type="button" class="sds-btn -iconBtn -btnSecondary dropdown-toggle" data-toggle="dropdown" data-reference="parent" data-boundary="window">
<span class="sds-icon sds-icon-more"></span>
</button>
<div aria-labelledby="" class="sds-actionMenu dropdown-menu dropdown-menu-right dropdown-menu-right">
<a href="" class="sds-actionMenu__item dropdown-item">
<span class="sds-iconCircle -secondary10" aria-hidden="true">
<span class="sds-icon sds-icon-edit"></span>
</span>
<span>Renommer</span>
</a>
<a href="" class="sds-actionMenu__item dropdown-item">
<span class="sds-iconCircle -secondary10" aria-hidden="true">
<span class="sds-icon sds-icon-infocircleborder"></span>
</span>
<span>Informations</span>
</a>
<a href="" class="sds-actionMenu__item dropdown-item">
<span class="sds-iconCircle -secondary10" aria-hidden="true">
<span class="sds-icon sds-icon-tablesetup"></span>
</span>
<span>Modification limite</span>
</a>
<a href="" class="sds-actionMenu__item dropdown-item">
<span class="sds-iconCircle -secondary10" aria-hidden="true">
<span class="sds-icon sds-icon-gear"></span>
</span>
<span>Paramètres de paiement</span>
</a>
</div>
</div>
</div>
</div>
<div class="sds-listItem sds-hoverContentSecondary">
<img class="sds-listItem__creditCard" src="../../media/snet/components/sitfin/visaclassic-small.png" alt="">
<div class="sds-listItem__text">
<div class="sds-accountInfo">
<div class="sds-accountInfo__content">
<p class="sds-accountInfo__title sds-textSemiBold">
<span class="text-truncate">
{Card Name}
</span>
</p>
<p class="sds-accountInfo__meta">{####-####-####-####}</p>
</div>
</div>
<div class="sds-amount -negative -amountLg">
<span class="sds-amount__value">{-#.###,##}</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
<div class="sds-listItem__rightContent">
<span class="sds-textHelper sds-listItem__textMeta">{DD.MM.YYYY}</span>
<div class="dropdown">
<button type="button" class="sds-btn -iconBtn -btnSecondary dropdown-toggle" data-toggle="dropdown" data-reference="parent" data-boundary="window">
<span class="sds-icon sds-icon-more"></span>
</button>
<div aria-labelledby="" class="sds-actionMenu dropdown-menu dropdown-menu-right dropdown-menu-right">
<a href="" class="sds-actionMenu__item dropdown-item">
<span class="sds-iconCircle -secondary10" aria-hidden="true">
<span class="sds-icon sds-icon-edit"></span>
</span>
<span>Renommer</span>
</a>
<a href="" class="sds-actionMenu__item dropdown-item">
<span class="sds-iconCircle -secondary10" aria-hidden="true">
<span class="sds-icon sds-icon-infocircleborder"></span>
</span>
<span>Informations</span>
</a>
<a href="" class="sds-actionMenu__item dropdown-item">
<span class="sds-iconCircle -secondary10" aria-hidden="true">
<span class="sds-icon sds-icon-tablesetup"></span>
</span>
<span>Modification limite</span>
</a>
<a href="" class="sds-actionMenu__item dropdown-item">
<span class="sds-iconCircle -secondary10" aria-hidden="true">
<span class="sds-icon sds-icon-gear"></span>
</span>
<span>Paramètres de paiement</span>
</a>
</div>
</div>
</div>
</div>
<div class="sds-listItem sds-hoverContentSecondary">
<img class="sds-listItem__creditCard" src="../../media/snet/components/sitfin/visaclassic-small.png" alt="">
<div class="sds-listItem__text">
<div class="sds-accountInfo">
<div class="sds-accountInfo__content">
<p class="sds-accountInfo__title sds-textSemiBold">
<span class="text-truncate">
{Card Name}
</span>
</p>
<p class="sds-accountInfo__meta">{####-####-####-####}</p>
</div>
</div>
</div>
<div class="sds-listItem__rightContent">
<div class="dropdown">
<button type="button" class="sds-btn -iconBtn -btnSecondary dropdown-toggle" data-toggle="dropdown" data-reference="parent" data-boundary="window">
<span class="sds-icon sds-icon-more"></span>
</button>
<div aria-labelledby="" class="sds-actionMenu dropdown-menu dropdown-menu-right dropdown-menu-right">
<a href="" class="sds-actionMenu__item dropdown-item">
<span class="sds-iconCircle -secondary10" aria-hidden="true">
<span class="sds-icon sds-icon-edit"></span>
</span>
<span>Renommer</span>
</a>
<a href="" class="sds-actionMenu__item dropdown-item">
<span class="sds-iconCircle -secondary10" aria-hidden="true">
<span class="sds-icon sds-icon-infocircleborder"></span>
</span>
<span>Informations</span>
</a>
<a href="" class="sds-actionMenu__item dropdown-item">
<span class="sds-iconCircle -secondary10" aria-hidden="true">
<span class="sds-icon sds-icon-tablesetup"></span>
</span>
<span>Modification limite</span>
</a>
<a href="" class="sds-actionMenu__item dropdown-item">
<span class="sds-iconCircle -secondary10" aria-hidden="true">
<span class="sds-icon sds-icon-gear"></span>
</span>
<span>Paramètres de paiement</span>
</a>
</div>
</div>
</div>
</div>
<div class="sds-listItem sds-hoverContentSecondary">
<img class="sds-listItem__creditCard" src="../../media/snet/components/sitfin/visaclassic-small.png" alt="">
<div class="sds-listItem__text">
<div class="sds-accountInfo">
<div class="sds-accountInfo__content">
<p class="sds-accountInfo__title sds-textSemiBold">
<span class="text-truncate">
{Card Name}
</span>
</p>
<p class="sds-accountInfo__meta">{####-####-####-####}</p>
</div>
</div>
<div class="sds-amount -negative -amountLg">
<span class="sds-amount__value">{-#.###,##}</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
<div class="sds-listItem__rightContent">
<span class="sds-textHelper sds-listItem__textMeta">{DD.MM.YYYY}</span>
<div class="dropdown">
<button type="button" class="sds-btn -iconBtn -btnSecondary dropdown-toggle" data-toggle="dropdown" data-reference="parent" data-boundary="window">
<span class="sds-icon sds-icon-more"></span>
</button>
<div aria-labelledby="" class="sds-actionMenu dropdown-menu dropdown-menu-right dropdown-menu-right">
<a href="" class="sds-actionMenu__item dropdown-item">
<span class="sds-iconCircle -secondary10" aria-hidden="true">
<span class="sds-icon sds-icon-edit"></span>
</span>
<span>Renommer</span>
</a>
<a href="" class="sds-actionMenu__item dropdown-item">
<span class="sds-iconCircle -secondary10" aria-hidden="true">
<span class="sds-icon sds-icon-infocircleborder"></span>
</span>
<span>Informations</span>
</a>
<a href="" class="sds-actionMenu__item dropdown-item">
<span class="sds-iconCircle -secondary10" aria-hidden="true">
<span class="sds-icon sds-icon-tablesetup"></span>
</span>
<span>Modification limite</span>
</a>
<a href="" class="sds-actionMenu__item dropdown-item">
<span class="sds-iconCircle -secondary10" aria-hidden="true">
<span class="sds-icon sds-icon-gear"></span>
</span>
<span>Paramètres de paiement</span>
</a>
</div>
</div>
</div>
</div>
<div class="sds-listItem sds-hoverContentSecondary">
<img class="sds-listItem__creditCard" src="../../media/snet/components/sitfin/visaclassic-small.png" alt="">
<div class="sds-listItem__text">
<div class="sds-accountInfo">
<div class="sds-accountInfo__content">
<p class="sds-accountInfo__title sds-textSemiBold">
<span class="text-truncate">
{Card Name}
</span>
</p>
<p class="sds-accountInfo__meta">{####-####-####-####}</p>
</div>
</div>
</div>
<div class="sds-listItem__rightContent">
<div class="dropdown">
<button type="button" class="sds-btn -iconBtn -btnSecondary dropdown-toggle" data-toggle="dropdown" data-reference="parent" data-boundary="window">
<span class="sds-icon sds-icon-more"></span>
</button>
<div aria-labelledby="" class="sds-actionMenu dropdown-menu dropdown-menu-right dropdown-menu-right">
<a href="" class="sds-actionMenu__item dropdown-item">
<span class="sds-iconCircle -secondary10" aria-hidden="true">
<span class="sds-icon sds-icon-edit"></span>
</span>
<span>Renommer</span>
</a>
<a href="" class="sds-actionMenu__item dropdown-item">
<span class="sds-iconCircle -secondary10" aria-hidden="true">
<span class="sds-icon sds-icon-infocircleborder"></span>
</span>
<span>Informations</span>
</a>
<a href="" class="sds-actionMenu__item dropdown-item">
<span class="sds-iconCircle -secondary10" aria-hidden="true">
<span class="sds-icon sds-icon-tablesetup"></span>
</span>
<span>Modification limite</span>
</a>
<a href="" class="sds-actionMenu__item dropdown-item">
<span class="sds-iconCircle -secondary10" aria-hidden="true">
<span class="sds-icon sds-icon-gear"></span>
</span>
<span>Paramètres de paiement</span>
</a>
</div>
</div>
</div>
</div>
<div class="sds-listItem sds-hoverContentSecondary">
<img class="sds-listItem__creditCard" src="../../media/snet/components/sitfin/visaclassic-small.png" alt="">
<div class="sds-listItem__text">
<div class="sds-accountInfo">
<div class="sds-accountInfo__content">
<p class="sds-accountInfo__title sds-textSemiBold">
<span class="text-truncate">
{Card Name}
</span>
</p>
<p class="sds-accountInfo__meta">{####-####-####-####}</p>
</div>
</div>
<div class="sds-amount -negative -amountLg">
<span class="sds-amount__value">{-#.###,##}</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
<div class="sds-listItem__rightContent">
<span class="sds-textHelper sds-listItem__textMeta">{DD.MM.YYYY}</span>
<div class="dropdown">
<button type="button" class="sds-btn -iconBtn -btnSecondary dropdown-toggle" data-toggle="dropdown" data-reference="parent" data-boundary="window">
<span class="sds-icon sds-icon-more"></span>
</button>
<div aria-labelledby="" class="sds-actionMenu dropdown-menu dropdown-menu-right dropdown-menu-right">
<a href="" class="sds-actionMenu__item dropdown-item">
<span class="sds-iconCircle -secondary10" aria-hidden="true">
<span class="sds-icon sds-icon-edit"></span>
</span>
<span>Renommer</span>
</a>
<a href="" class="sds-actionMenu__item dropdown-item">
<span class="sds-iconCircle -secondary10" aria-hidden="true">
<span class="sds-icon sds-icon-infocircleborder"></span>
</span>
<span>Informations</span>
</a>
<a href="" class="sds-actionMenu__item dropdown-item">
<span class="sds-iconCircle -secondary10" aria-hidden="true">
<span class="sds-icon sds-icon-tablesetup"></span>
</span>
<span>Modification limite</span>
</a>
<a href="" class="sds-actionMenu__item dropdown-item">
<span class="sds-iconCircle -secondary10" aria-hidden="true">
<span class="sds-icon sds-icon-gear"></span>
</span>
<span>Paramètres de paiement</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% extends "@snet-modal-base-frame" %}
{% block header %}
<h5 class="{{ namespace }}modal__title modal-title">Cartes de paiement</h5>
{% endblock %}
{% block body %}
<div class="{{ namespace }}stackMd">
<div class="{{ namespace }}box -insetLg">
<div class="{{ namespace }}stackSm">
{% for k, i in items %}
<div class="{{ namespace }}listItem {{ namespace }}hoverContentSecondary">
<img class="{{ namespace }}listItem__creditCard" src="{{ (mediaPath + "/snet/components/sitfin/visaclassic-small.png") | path }}" alt="">
<div class="{{ namespace }}listItem__text">
{% render "@snet-account-info--no-avatar",{
bold: true,
text: "{Card Name}",
meta: "{####-####-####-####}"
},true %}
{% if i.amount %}
{% render "@amount--large-negative" %}
{% endif %}
</div>
<div class="{{ namespace }}listItem__rightContent">
{% if i.date %}
<span class="{{ namespace }}textHelper {{ namespace }}listItem__textMeta">{DD.MM.YYYY}</span>
{% endif %}
<div class="dropdown">
{% render "@icon-btn-secondary",{
icon: "icon-more",
classes: ["dropdown-toggle"],
attrs: {
"data-toggle": "dropdown",
"data-reference": "parent",
"data-boundary": "window"
}
},true %}
{% render "@snet-action-menu--mouvements-cartes",{classes: ["dropdown-menu-right"]},true %}
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
{% endblock %}