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="raccourcisModal" 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">
<div class="sds-modal__title modal-title">Nouveau message</div>
<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-stackLg">
<div class="sds-box -insetLg">
<div class="sds-stackXl">
<form>
<div class="form-group">
<label for="" class="sds-label -labelForm">
Catégorie
</label>
<div class="sds-select">
<select id="" class="sds-select form-control">
<option value="opt-0">Option 1</option>
<option value="opt-1">Option 2</option>
<option value="opt-2">Option 3</option>
</select>
<span class="sds-select__arrow sds-icon sds-icon-chevrondown" aria-hidden="true"></span>
</div>
</div>
<div class="form-group">
<label for="" class="sds-label -labelForm">
Objet
</label>
<div class="sds-input">
<input id="" class="sds-input form-control" type="text" placeholder="{Placeholder}" value="">
</div>
</div>
<div class="form-group">
<label for="" class="sds-label -labelForm -labelOptional">
{Label}
<span class="sds-label__helper"><span>0</span><span>/3500</span></span>
</label>
<div class="sds-textarea">
<textarea class="form-control" id="" rows="1" placeholder="{Placeholder}"></textarea>
</div>
</div>
<div class="form-group">
<button type="button" class="sds-btn -btnSecondary">
<span class="sds-icon sds-icon-clip"></span>
<span class="sds-btn__text">Joindre document</span>
</button>
</div>
</form>
<div class="d-flex align-items-center justify-content-end">
<button type="button" class="sds-btn -btnPrimary">
<span class="sds-btn__text">Envoyer</span>
</button>
</div>
</div>
</div>
<div class="sds-box -insetLg">
<div class="sds-stackLg">
<h3 class="h3">
Raccourcis
<span class="sds-headingLight">Un doute, une question ? Ne vous inquiétez pas, nous vous indiquons le chemin.</span>
</h3>
<div>
<div class="collapse" id="raccourcisModalCollapse">
<div class="sds-collapse__insetBottomLg">
<ul class="sds-stackSm -stackBorder list-unstyled">
<li>
<a href="" class="sds-banner sds-hoverContentSecondary sds-outOfBounds">
<img class="sds-banner__img" src="https:/design.spuerkeess.lu/media/illustrations/svg750x560/hero/sdsillu-financialmarkets.svg" alt="">
<div class="sds-banner__content">
<p class="sds-banner__title h4">Accéder aux marchés financiers</p>
<p>{Description}</p>
</div>
<span class="sds-iconCircle -secondary10 sds-hoverContentSecondary__icon" aria-hidden="true">
<span class="sds-icon sds-icon-chevronrightdouble"></span>
</span>
</a>
</li>
<li>
<a href="" class="sds-banner sds-hoverContentSecondary sds-outOfBounds">
<img class="sds-banner__img" src="https:/design.spuerkeess.lu/media/illustrations/svg750x560/hero/sdsillu-cardreceive.svg" alt="">
<div class="sds-banner__content">
<p class="sds-banner__title h4">Demander une carte de paiement</p>
<p>Choisissez et commandez la carte qui vous convient en quelques clics.</p>
</div>
<span class="sds-iconCircle -secondary10 sds-hoverContentSecondary__icon" aria-hidden="true">
<span class="sds-icon sds-icon-chevronrightdouble"></span>
</span>
</a>
</li>
<li>
<a href="" class="sds-banner sds-hoverContentSecondary sds-outOfBounds">
<img class="sds-banner__img" src="https:/design.spuerkeess.lu/media/illustrations/svg750x560/hero/sdsillu-rib.svg" alt="">
<div class="sds-banner__content">
<p class="sds-banner__title h4">Relevé d'identité bancaire (RIB)</p>
<p>Téléchargez votre relevé d'identité bancaire.</p>
</div>
<span class="sds-iconCircle -secondary10 sds-hoverContentSecondary__icon" aria-hidden="true">
<span class="sds-icon sds-icon-chevronrightdouble"></span>
</span>
</a>
</li>
<li>
<a href="" class="sds-banner sds-hoverContentSecondary sds-outOfBounds">
<img class="sds-banner__img" src="https:/design.spuerkeess.lu/media/illustrations/svg750x560/hero/sdsillu-accounts.svg" alt="">
<div class="sds-banner__content">
<p class="sds-banner__title h4">Modifier la limite de ma carte Visa</p>
<p>Accédez à la gestion de votre carte afin de modifier la limite de paiement.</p>
</div>
<span class="sds-iconCircle -secondary10 sds-hoverContentSecondary__icon" aria-hidden="true">
<span class="sds-icon sds-icon-chevronrightdouble"></span>
</span>
</a>
</li>
<li>
<a href="" class="sds-banner sds-hoverContentSecondary sds-outOfBounds">
<img class="sds-banner__img" src="https:/design.spuerkeess.lu/media/illustrations/svg750x560/hero/sdsillu-profile.svg" alt="">
<div class="sds-banner__content">
<p class="sds-banner__title h4">Modifier mes données personnelles</p>
<p>Accédez à votre espace client afin de mettre à jour vos données personnelles.</p>
</div>
<span class="sds-iconCircle -secondary10 sds-hoverContentSecondary__icon" aria-hidden="true">
<span class="sds-icon sds-icon-chevronrightdouble"></span>
</span>
</a>
</li>
<li>
<a href="" class="sds-banner sds-hoverContentSecondary sds-outOfBounds">
<img class="sds-banner__img" src="https:/design.spuerkeess.lu/media/illustrations/svg750x560/hero/sdsillu-rdvonlinesimp.svg" alt="">
<div class="sds-banner__content">
<p class="sds-banner__title h4">Prendre un rendez-vous</p>
<p>Prenez et gérez vos rendez-vous depuis votre espace personnel.</p>
</div>
<span class="sds-iconCircle -secondary10 sds-hoverContentSecondary__icon" aria-hidden="true">
<span class="sds-icon sds-icon-chevronrightdouble"></span>
</span>
</a>
</li>
<li>
<a href="" class="sds-banner sds-hoverContentSecondary sds-outOfBounds">
<img class="sds-banner__img" src="https:/design.spuerkeess.lu/media/illustrations/svg750x560/hero/sdsillu-recurringpayment.svg" alt="">
<div class="sds-banner__content">
<p class="sds-banner__title h4">Créer ou modifier un ordre permanent</p>
<p>Vous souhaitez faire des virements réguliers ou modifier un ordre permanent existant ?</p>
</div>
<span class="sds-iconCircle -secondary10 sds-hoverContentSecondary__icon" aria-hidden="true">
<span class="sds-icon sds-icon-chevronrightdouble"></span>
</span>
</a>
</li>
<li>
<a href="" class="sds-banner sds-hoverContentSecondary sds-outOfBounds">
<img class="sds-banner__img" src="https:/design.spuerkeess.lu/media/illustrations/svg750x560/hero/sdsillu-switchingon.svg" alt="">
<div class="sds-banner__content">
<p class="sds-banner__title h4">Activer ou bloquer une domiciliation</p>
<p>Vous ne souhaitez plus que votre prestataire de service encaisse automatiquement vos factures ?</p>
</div>
<span class="sds-iconCircle -secondary10 sds-hoverContentSecondary__icon" aria-hidden="true">
<span class="sds-icon sds-icon-chevronrightdouble"></span>
</span>
</a>
</li>
<li>
<a href="" class="sds-banner sds-hoverContentSecondary sds-outOfBounds">
<img class="sds-banner__img" src="https:/design.spuerkeess.lu/media/illustrations/svg750x560/hero/sdsillu-reachinglimit.svg" alt="">
<div class="sds-banner__content">
<p class="sds-banner__title h4">Limite de paiement S-Net</p>
<p>Augmentez votre limite de paiement S-Net pour une durée temporaire.</p>
</div>
<span class="sds-iconCircle -secondary10 sds-hoverContentSecondary__icon" aria-hidden="true">
<span class="sds-icon sds-icon-chevronrightdouble"></span>
</span>
</a>
</li>
</ul>
</div>
</div>
<div class="text-center">
<button type="button" class="sds-btn -btnSecondary -btnSmall -collapseTrigger" data-toggle="collapse" data-target="#raccourcisModalCollapse">
<span class="sds-icon sds-icon-plus"></span>
<span class="sds-btn__text">Voir raccourcis</span>
</button>
</div>
</div>
</div>
</div>
<a href="" class="sds-banner -background -insetLg">
<img class="sds-banner__img" src="../../media/snet/illustrations/sdsillu-questioning.svg" alt="">
<div class="sds-banner__content">
<h4 class="h4 sds-banner__title">
Envie d'en savoir plus ? Découvrez notre Help-Center.
<span class="sds-headingLight">Retrouvez ici tous les guides utilisateurs des fonctionnalités S-Net.</span>
</h4>
</div>
<span class="sds-iconCircle -secondary10 sds-hoverContentSecondary__icon" aria-hidden="true">
<span class="sds-icon sds-icon-arrownext"></span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
{% extends "@snet-modal-base-frame" %}
{% block header %}
<div class="{{ namespace }}modal__title modal-title">{{ title }}</div>
{% endblock %}
{% block body %}
<div class="{{ namespace }}stackLg">
<div class="{{ namespace }}box -insetLg">
<div class="{{ namespace }}stackXl">
<form>
{% render '@form-group--select', {
labelText: "Catégorie"
}, true %}
{% render '@form-group', {
labelText: "Objet",
placeholder: "{Placeholder}"
}, true %}
{% render '@form-group--textarea', {
labelText: "{Label}",
textOptional: "<span>0</span><span>/3500</span>",
placeholder: "{Placeholder}"
}, true %}
<div class="form-group">
{% render "@btn-secondary--icon-left",{
icon: "icon-clip",
text: "Joindre document"
},true %}
</div>
</form>
<div class="d-flex align-items-center justify-content-end">
{% render '@btn-primary', {
text: "Envoyer"
}, true %}
</div>
</div>
</div>
<div class="{{ namespace }}box -insetLg">
<div class="{{ namespace }}stackLg">
{% render "@heading--h3-subtext", {
text: "Raccourcis",
subText: text
}, true %}
<div>
<div class="collapse" id="raccourcisModalCollapse">
<div class="{{ namespace }}collapse__insetBottomLg">
<ul class="{{ namespace }}stackSm -stackBorder list-unstyled">
{% for key, item in modalRaccourcisBannerList %}
<li>
{% render '@snet-banner-old', {
externalImg: true,
img: item.img,
title: item.title,
text: item.text,
classes: [namespace +"outOfBounds"]},true %}
</li>
{% endfor %}
</ul>
</div>
</div>
<div class="text-center">
{% render "@btn-secondary--icon-left-collapse-trigger",{
icon: "icon-plus",
text: "Voir raccourcis",
attrs: {
"data-toggle": "collapse",
"data-target": "#raccourcisModalCollapse"
}
},true %}
</div>
</div>
</div>
</div>
{% render "@snet-banner-old--background", {
title: "Envie d'en savoir plus ? Découvrez notre Help-Center.",
text: "Retrouvez ici tous les guides utilisateurs des fonctionnalités S-Net."
},true %}
</div>
{% endblock %}