Modal No Background: Change Account

Refer to modal frame found in view tab for complete structure without content.
<div class="sds-modal -noBg modal fade" tabindex="-1" id="modalChangeConventions" aria-hidden="true">
    <div class="sds-modal__headerOutside container d-flex justify-content-end">
        <button type="button" class="sds-btn -iconBtn -btnSecondary sds-modal__close" data-dismiss="modal" aria-label="Close">

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

        </button>
    </div>
    <div class="sds-modal__dialog modal-dialog modal-dialog-centered modal-xl">
        <div class="sds-modal__content modal-content bg-transparent">
            <!-- content start -->

            <div class="container">
                <div class="row justify-content-center align-items-stretch align-items-stretch-immediate">
                    <div class="col-5">
                        <div class="sds-loginBlock sds-box">

                            <div class="sds-iconHeader">
                                <div class="sds-iconHeader__iconContainer">
                                    <img class="img-fluid" src="../../media/illustrative-icons/sdsillu-classicwallet.svg" alt="">
                                </div>
                            </div>

                            <div class="sds-loginBlock__heading">
                                <div class="h3">
                                    Mon espace personnel
                                    <sup>
                                        <div class="sds-badge badge -badgeHighlight -badgeSm">

                                            New
                                        </div>
                                    </sup>
                                </div>

                            </div>
                            <div class="sds-loginBlock__body">
                                <div class="sds-loginBlock__listHeading sds-textHelperSmall">
                                    Veuillez choisir la convention
                                </div>
                                <div class="sds-loginBlock__list">
                                    <div class="sds-loginBlock__listInner">
                                        <ul class="sds-borderedBgList list-unstyled">

                                            <li class="sds-borderedBgList__item">

                                                <div class="sds-borderedBgList__itemOffset">

                                                    <a href="" class="sds-borderedBgList__link d-flex align-items-center">

                                                        <div class="sds-avatar centeredBgi sds-borderedBgList__typeIcon">

                                                            <img class="img-fluid" src="../../media/snet/avatars/avatarUser.png" alt="">

                                                        </div>

                                                        <span class="sds-borderedBgList__text">{Convention}</span>
                                                        <span class="sds-iconCircle -ghost sds-borderedBgList__linkIcon" aria-hidden="true">

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

                                                        </span>

                                                    </a>

                                                </div>

                                            </li>

                                            <li class="sds-borderedBgList__item">

                                                <div class="sds-borderedBgList__itemOffset">

                                                    <a href="" class="sds-borderedBgList__link d-flex align-items-center">

                                                        <div class="sds-avatar centeredBgi sds-borderedBgList__typeIcon">

                                                            <img class="img-fluid" src="../../media/snet/avatars/nopic/avatarNoPicWoman.svg" alt="">

                                                        </div>

                                                        <span class="sds-borderedBgList__text">{Convention}</span>
                                                        <span class="sds-iconCircle -ghost sds-borderedBgList__linkIcon" aria-hidden="true">

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

                                                        </span>

                                                    </a>

                                                </div>

                                            </li>

                                            <li class="sds-borderedBgList__item">

                                                <div class="sds-borderedBgList__itemOffset">

                                                    <a href="" class="sds-borderedBgList__link d-flex align-items-center">

                                                        <div class="sds-avatar centeredBgi sds-borderedBgList__typeIcon">

                                                            <img class="img-fluid" src="../../media/snet/avatars/nopic/avatarNoPicWoman.svg" alt="">

                                                        </div>

                                                        <span class="sds-borderedBgList__text">{Convention}</span>
                                                        <span class="sds-iconCircle -ghost sds-borderedBgList__linkIcon" aria-hidden="true">

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

                                                        </span>

                                                    </a>

                                                </div>

                                            </li>

                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-5">
                        <div class="sds-loginBlock sds-box">

                            <div class="sds-iconHeader -bfm">
                                <div class="sds-iconHeader__iconContainer">
                                    <img class="img-fluid" src="../../media/illustrative-icons/sdsillu-suitcase.svg" alt="">
                                </div>
                            </div>

                            <div class="sds-loginBlock__heading">
                                <div class="h3">
                                    Mon espace professionnel
                                    <sup>
                                        <div class="sds-badge badge -badgeHighlight -badgeSm">

                                            New
                                        </div>
                                    </sup>
                                </div>

                            </div>
                            <div class="sds-loginBlock__body">
                                <div class="sds-loginBlock__listHeading sds-textHelperSmall">
                                    Veuillez choisir la convention
                                </div>
                                <div class="sds-loginBlock__list">
                                    <div class="sds-loginBlock__listInner">
                                        <ul class="sds-borderedBgList list-unstyled">

                                            <li class="sds-borderedBgList__item">

                                                <div class="sds-borderedBgList__itemOffset">

                                                    <a href="" class="sds-borderedBgList__link d-flex align-items-center">

                                                        <div class="sds-avatar centeredBgi sds-borderedBgList__typeIcon">

                                                            <img class="img-fluid" src="../../media/snet/avatars/avatarCactus.png" alt="">

                                                        </div>

                                                        <span class="sds-borderedBgList__text">{Company name}</span>
                                                        <span class="sds-iconCircle -ghost sds-borderedBgList__linkIcon" aria-hidden="true">

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

                                                        </span>

                                                    </a>

                                                </div>

                                            </li>

                                            <li class="sds-borderedBgList__item">

                                                <div class="sds-borderedBgList__itemOffset">

                                                    <a href="" class="sds-borderedBgList__link d-flex align-items-center">

                                                        <span class="sds-numberCircle -info100 -large sds-borderedBgList__typeIcon">
                                                            {X}
                                                        </span>

                                                        <span class="sds-borderedBgList__text">{Company name}</span>
                                                        <span class="sds-iconCircle -ghost sds-borderedBgList__linkIcon" aria-hidden="true">

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

                                                        </span>

                                                    </a>

                                                </div>

                                            </li>

                                            <li class="sds-borderedBgList__item">

                                                <div class="sds-borderedBgList__itemOffset">

                                                    <a href="" class="sds-borderedBgList__link d-flex align-items-center">

                                                        <span class="sds-numberCircle -info100 -large sds-borderedBgList__typeIcon">
                                                            {X}
                                                        </span>

                                                        <span class="sds-borderedBgList__text">{Company name}</span>
                                                        <span class="sds-iconCircle -ghost sds-borderedBgList__linkIcon" aria-hidden="true">

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

                                                        </span>

                                                    </a>

                                                </div>

                                            </li>

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

            <!-- content end -->
        </div>
    </div>
</div>
{% extends "@snet-modal-no-background-frame" %}
{% block content %}
	<div class="container">
		<div class="row justify-content-center align-items-stretch align-items-stretch-immediate">
			<div class="col-5">
				{% render "@snet-login-block" %}
			</div>
			<div class="col-5">
				{% render "@snet-login-block--bfm" %}
			</div>
		</div>
	</div>
{% endblock %}