Modal Base: Feature

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

  • modal-sm: 480px
  • modal-md: 720px (mainly used for modals containing images)
  • modal-lg: 896px
  • modal-xl: 1120px

Content loading

A modal with a content loading component behaves as follows:

  • It has a second body element with the -isLoading class that is hidden by default, and shown only when ...
  • ... the -contentLoading modifier is applied to the modal element ...
  • ... which in turn hides the regular modal body element which into which the content is injected
<div class="sds-modal modal fade" id="" aria-hidden="true" tabindex="-1">
    <div class="sds-modal__dialog modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
        <div class="sds-modal__content modal-content">

            <div class="sds-modal__header modal-header">

                <h4 class="modal-title">Activez LuxTrust Mobile</h4>

                <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="row row-sm align-items-center">
                    <div class="col-12 col-md-6  sds-stackXl">
                        <p class="sds-textBodyLg">Votre certificat LuxTrust Token expire bientôt, activez dès maintenant LuxTrust Mobile.</p>
                        <div class="sds-infoIllustration">
                            <div class="sds-infoIllustration__infoItem">
                                <div class="sds-announceBubble">
                                    <span class="h1 sds-colorInherit">88</span>
                                    <p class="sds-announceBubble__text">jours restants</p>
                                </div>
                            </div>
                            <img src="https://design.spuerkeess.lu/media/illustrations/svg750x560/hero/sdsillu-luxtrustmobile.svg" class="img-fluid" alt="">
                        </div>
                    </div>
                    <div class="col-12 col-md-6">
                        <div class="sds-featureIconBoxList">
                            <ul class="sds-featureIconBoxList__inner list-unstyled row row-cols-1 row-sm">
                                <li class="sds-featureIconBoxList__col col">
                                    <div class="sds-featureIconBox">
                                        <div class="sds-featureIconBox__inner">
                                            <div class="sds-featureIconBox__innerContent">
                                                <div class="sds-featureIconBox__icon sds-brandIconWrapper">
                                                    <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M34.4431 7.38786C33.7562 6.42917 32.5247 5.90539 31.268 6.22159L8.26798 12.0087C6.93463 12.3442 6 13.5431 6 14.918V14.9994C6.83566 14.3717 7.87439 13.9998 9 13.9998H35V9.30902L25.2631 11.9645L24.7368 10.035L34.4431 7.38786ZM4 14.918V18.9998V35.9998C4 38.7612 6.23858 40.9998 9 40.9998H37C39.7614 40.9998 42 38.7612 42 35.9998V34.9998H40V35.9998C40 37.6566 38.6569 38.9998 37 38.9998H9C7.34315 38.9998 6 37.6566 6 35.9998V18.9998C6 17.3429 7.34315 15.9998 9 15.9998H37C38.6569 15.9998 40 17.3429 40 18.9998V19.9998H42V18.9998C42 16.2384 39.7614 13.9998 37 13.9998V9.13091C37 5.87492 33.9375 3.48755 30.78 4.28204L7.77996 10.0691C5.55772 10.6283 4 12.6265 4 14.918Z" fill="#003060" />
                                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M41.5 24H36V22H41.5C44.5376 22 47 24.4624 47 27.5C47 30.5376 44.5376 33 41.5 33H36V31H41.5C43.433 31 45 29.433 45 27.5C45 25.567 43.433 24 41.5 24Z" fill="#DE0000" />
                                                    </svg>
                                                </div>
                                                <div class="sds-featureIconBox__text sds-stackXs">
                                                    <h4 class="h4">Sécurité</h4>
                                                    <p class="sds-featureIconBox__description">{Description avantage 1}</p>

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li class="sds-featureIconBoxList__col col">
                                    <div class="sds-featureIconBox">
                                        <div class="sds-featureIconBox__inner">
                                            <div class="sds-featureIconBox__innerContent">
                                                <div class="sds-featureIconBox__icon sds-brandIconWrapper">
                                                    <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M34.4431 7.38786C33.7562 6.42917 32.5247 5.90539 31.268 6.22159L8.26798 12.0087C6.93463 12.3442 6 13.5431 6 14.918V14.9994C6.83566 14.3717 7.87439 13.9998 9 13.9998H35V9.30902L25.2631 11.9645L24.7368 10.035L34.4431 7.38786ZM4 14.918V18.9998V35.9998C4 38.7612 6.23858 40.9998 9 40.9998H37C39.7614 40.9998 42 38.7612 42 35.9998V34.9998H40V35.9998C40 37.6566 38.6569 38.9998 37 38.9998H9C7.34315 38.9998 6 37.6566 6 35.9998V18.9998C6 17.3429 7.34315 15.9998 9 15.9998H37C38.6569 15.9998 40 17.3429 40 18.9998V19.9998H42V18.9998C42 16.2384 39.7614 13.9998 37 13.9998V9.13091C37 5.87492 33.9375 3.48755 30.78 4.28204L7.77996 10.0691C5.55772 10.6283 4 12.6265 4 14.918Z" fill="#003060" />
                                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M41.5 24H36V22H41.5C44.5376 22 47 24.4624 47 27.5C47 30.5376 44.5376 33 41.5 33H36V31H41.5C43.433 31 45 29.433 45 27.5C45 25.567 43.433 24 41.5 24Z" fill="#DE0000" />
                                                    </svg>
                                                </div>
                                                <div class="sds-featureIconBox__text sds-stackXs">
                                                    <h4 class="h4">Rapidité</h4>
                                                    <p class="sds-featureIconBox__description">{Description avantage 2}</p>

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li class="sds-featureIconBoxList__col col">
                                    <div class="sds-featureIconBox">
                                        <div class="sds-featureIconBox__inner">
                                            <div class="sds-featureIconBox__innerContent">
                                                <div class="sds-featureIconBox__icon sds-brandIconWrapper">
                                                    <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M34.4431 7.38786C33.7562 6.42917 32.5247 5.90539 31.268 6.22159L8.26798 12.0087C6.93463 12.3442 6 13.5431 6 14.918V14.9994C6.83566 14.3717 7.87439 13.9998 9 13.9998H35V9.30902L25.2631 11.9645L24.7368 10.035L34.4431 7.38786ZM4 14.918V18.9998V35.9998C4 38.7612 6.23858 40.9998 9 40.9998H37C39.7614 40.9998 42 38.7612 42 35.9998V34.9998H40V35.9998C40 37.6566 38.6569 38.9998 37 38.9998H9C7.34315 38.9998 6 37.6566 6 35.9998V18.9998C6 17.3429 7.34315 15.9998 9 15.9998H37C38.6569 15.9998 40 17.3429 40 18.9998V19.9998H42V18.9998C42 16.2384 39.7614 13.9998 37 13.9998V9.13091C37 5.87492 33.9375 3.48755 30.78 4.28204L7.77996 10.0691C5.55772 10.6283 4 12.6265 4 14.918Z" fill="#003060" />
                                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M41.5 24H36V22H41.5C44.5376 22 47 24.4624 47 27.5C47 30.5376 44.5376 33 41.5 33H36V31H41.5C43.433 31 45 29.433 45 27.5C45 25.567 43.433 24 41.5 24Z" fill="#DE0000" />
                                                    </svg>
                                                </div>
                                                <div class="sds-featureIconBox__text sds-stackXs">
                                                    <h4 class="h4">Simplicité</h4>
                                                    <p class="sds-featureIconBox__description">{Description avantage 3}</p>

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

            </div>

            <div class="sds-modal__footer modal-footer justify-content-center">

                <div class="sds-btnGroup">
                    <button type="button" class="sds-btn -btnPrimary">

                        <span class="sds-btn__text">Activer</span>

                    </button>
                </div>

            </div>

        </div>
    </div>
</div>
 
{% extends "@snet-modal-base-frame" %}
{% block header %}
	<h4 class="modal-title">{{ title }}</h4>
{% endblock %}
{% block body %}
    <div class="row row-sm align-items-center">
        <div class="col-12 col-md-6  {{ namespace }}stackXl">
			<p class="{{ namespace }}textBodyLg">Votre certificat LuxTrust Token expire bientôt, activez dès maintenant LuxTrust Mobile.</p>
			{% render "@snet-info-illustration" %}
        </div>
		<div class="col-12 col-md-6">
			{% render "@spk-feature-icon-box-list",featureIconBoxListOptions,true %}
		</div>
    </div>
{% endblock %}
{% block footer %}
    <div class="{{ namespace }}btnGroup">
        {% render "@btn-primary",{
            text: "Activer",
            attrs: imgTextBtnModalAttrs
        },true %}
    </div>
{% endblock %}