Axaguildev OpenSource Axa at Lille, France

Copied

<div class="af-header">
    <div class="af-container af-header__wrapper">
        <header class="af-header__content" role="banner">
            <div class="af-header__name"><a class="af-logo" href="/"><img class="af-logo__brand" src="../../assets/images/slash-logo.svg" alt="Logo Slash Design System" /></a>
                <h2 class="af-header__title">Nom de l&apos;application<small class="af-header__subtitle">Baseline</small></h2>
            </div>
            <div class="af-contrat">
                <svg class="glyphicon glyphicon-info-sign" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                    <path d="M50.382 0.736c-27.365 0-49.549 22.184-49.549 49.55 0 27.364 22.184 49.547 49.549 49.547 27.365 0 49.548-22.183 49.548-49.547 0-27.366-22.183-49.55-49.548-49.55zM58.151 68.517c-3.74 5.613-7.544 9.941-13.944 9.941-4.369-0.712-6.163-3.843-5.214-7.031l8.233-27.269c0.198-0.668-0.135-1.381-0.744-1.594-0.609-0.214-1.799 0.576-2.829 1.702l-4.975 5.988c-0.136-1.003-0.014-2.667-0.014-3.337 3.74-5.612 9.88-10.044 14.046-10.044 3.962 0.407 5.833 3.571 5.144 7.050l-8.29 27.402c-0.111 0.62 0.216 1.246 0.779 1.444 0.609 0.213 1.89-0.576 2.92-1.703l4.975-5.988c0.136 1.002-0.087 2.769-0.087 3.439zM57.043 32.901c-3.149 0-5.701-2.291-5.701-5.671 0-3.378 2.552-5.669 5.701-5.669 3.148 0 5.701 2.291 5.701 5.669-0.001 3.381-2.553 5.671-5.701 5.671z"></path>
                </svg>
                <dl class="af-contrat__list">
                    <dt class="af-contrat__word">Client :</dt>
                    <dd class="af-contrat__def">0123456789 - NOM</dd>
                    <dt class="af-contrat__word">Portefeuille :</dt>
                    <dd class="af-contrat__def">000123456789</dd>
                    <dt class="af-contrat__word">Status :</dt>
                    <dd class="af-contrat__def">Affaire nouvelle</dd>
                </dl>
            </div>
            <div class="af-info-user"><a class="af-info-user__link" href="/profile" title="Voir mon profil"><span class="af-info-user__name">Pierre Martin</span><span class="af-info-user__profile">[Profile]</span></a></div>
        </header>
    </div>
</div>
<div class="af-nav-container">
    <button class="mask fade show" type="button"></button>
    <nav class="af-nav af-drawer left show" role="navigation" aria-label="Menu principal">
        <div class="af-container af-nav__wrapper">
            <div class="af-nav__aside-header">
                <h4 class="af-nav__aside-title">Menu</h4><a class="af-nav__aside-close" href="#" role="button" aria-haspopup="true" aria-controls="idmenu" id="menubutton">×</a>
            </div>
            <ul class="af-nav__list" role="menubar" aria-labelledby="menubutton" id="idmenu">
                <li class="af-nav__item af-nav__item--active" role="none"><a class="af-nav__link" role="menuitem" href="/home" tabindex="0">Home</a>
                </li>
                <li class="af-nav__item" role="none"><a class="af-nav__link" role="menuitem" href="/form" tabindex="-1">Forms</a>
                </li>
                <li class="af-nav__item" role="none"><a class="af-nav__link" role="menuitem" href="/fileupload" tabindex="-1">Fileupload</a>
                </li>
                <li class="af-nav__item" role="none"><a class="af-nav__link" role="menuitem" href="/table" tabindex="-1">Table</a>
                </li>
                <li class="af-nav__item" role="none"><a class="af-nav__link" role="menuitem" href="/collapse" tabindex="-1">Accordions</a>
                </li>
                <li class="af-nav__item" role="none"><a class="af-nav__link" role="menuitem" href="/table" tabindex="-1"> Drag n drop</a>
                </li>
                <li class="af-nav__item" role="none"><a class="af-nav__link" role="menuitem" href="/alert" tabindex="-1">Alerts</a>
                </li>
                <li class="af-nav__item" role="none"><a class="af-nav__link" role="menuitem" href="/contributing" tabindex="-1">Validation</a>
                </li>
                <li class="af-nav__item af-nav__item--haschild" role="none"><a class="af-nav__link" role="menuitem" href="/doc" tabindex="-1" aria-haspopup="aria-haspopup" aria-expanded="aria-expanded">Doc</a>
                    <svg class="glyphicon glyphicon-arrow-xs-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                        <path d="M86.799 36.75h-73.299l36.654 35.636 36.645-35.636z"></path>
                    </svg>
                    <ul class="af-nav__list af-nav__list--children" role="menu" aria-label="Doc">
                        <li class="af-nav__item" role="none"><a class="af-nav__link" role="menuitem" href="/doc/sous-lien" tabindex="-1">Sous lien</a></li>
                        <li class="af-nav__item" role="none"><a class="af-nav__link" role="menuitem" href="/doc/sous-lien2" tabindex="-1">Sous lien 2</a></li>
                        <li class="af-nav__item" role="none"><a class="af-nav__link" role="menuitem" href="/doc/sous-lien3" tabindex="-1">Sous lien 3</a></li>
                        <li class="af-nav__item" role="none"><a class="af-nav__link" role="menuitem" href="/doc/sous-lien4" tabindex="-1">Sous lien 4</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>
</div>
<div class="af-title-bar">
    <div class="af-title-bar__wrapper af-container">
        <button class="af-btn-circle af-title-bar__mobile-menu">
            <div class="af-btn__wrapper">
                <svg class="glyphicon glyphicon-menu-hamburger" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                    <path d="M3.649,1.21h92.701c0.65,0,1.222,0.243,1.708,0.73c0.487,0.49,0.732,1.057,0.732,1.71v14.638
	c0,0.65-0.245,1.221-0.732,1.707c-0.486,0.488-1.058,0.732-1.708,0.732H3.649c-0.653,0-1.219-0.244-1.708-0.732
	c-0.489-0.486-0.732-1.057-0.732-1.707V3.65c0-0.653,0.243-1.22,0.732-1.71C2.431,1.453,2.996,1.21,3.649,1.21L3.649,1.21z
	 M3.649,40.241h92.701c0.65,0,1.222,0.244,1.708,0.729c0.487,0.486,0.732,1.059,0.732,1.709v14.638c0,0.65-0.245,1.222-0.732,1.708
	c-0.486,0.488-1.058,0.736-1.708,0.736H3.649c-0.653,0-1.219-0.248-1.708-0.736c-0.489-0.486-0.732-1.058-0.732-1.708V42.679
	c0-0.65,0.243-1.223,0.732-1.709C2.431,40.485,2.996,40.241,3.649,40.241L3.649,40.241z M3.649,79.272h92.701
	c0.65,0,1.222,0.241,1.708,0.731c0.487,0.49,0.732,1.058,0.732,1.712v14.638c0,0.65-0.245,1.219-0.732,1.708
	c-0.486,0.485-1.058,0.729-1.708,0.729H3.649c-0.653,0-1.219-0.243-1.708-0.729c-0.489-0.489-0.732-1.058-0.732-1.708V81.716
	c0-0.654,0.243-1.222,0.732-1.712S2.996,79.272,3.649,79.272L3.649,79.272z"></path>
                </svg>
            </div>
        </button>
        <h1 class="af-title-bar__title">Slash Design System<small class="af-title-bar__subtitle">Sous titre</small></h1>
        <div class="af-title-bar__actions"><a class="af-title-bar__link" href="#lien" title="lien titlebar">lien titlebar</a><a class="af-btn--circle" href="#enregistrer" title="Enregistrer" role="button" tabindex="0">
                <svg class="glyphicon glyphicon-floppy-disk" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                    <path d="M3.125 92.5v-83.333q0-1.667 1.208-2.917t2.958-1.25h20.833v25h41.667v-25h8.333l16.667 16.667v70.833q0 1.75-1.25 2.958t-2.917 1.208h-12.5v-33.333h-58.333v33.333h-12.5q-1.75 0-2.958-1.208t-1.208-2.958zM53.125 21.667h8.333v-16.667h-8.333v16.667z"></path>
                </svg></a><a class="af-btn--circle" href="#imprimer" title="Imprimer" role="button" tabindex="0">
                <svg class="glyphicon glyphicon-print" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                    <path d="M1.563 90.667v-56.51h16.146l8.073 16.146h48.438l8.073-16.146h16.146v56.51h-16.146v-16.146h-64.583v16.146h-16.146zM21.987 31.816l3.229 10.010h47.792l5.005-10.010-7.588-27.932q-0.162-0.888-0.807-1.453t-1.453-0.565h-36.328q-0.807 0-1.453 0.565t-0.807 1.453zM24.247 96.803l3.068-12.271q0.162-0.807 0.928-1.372t1.574-0.565h40.365q0.807 0 1.574 0.565t0.928 1.372l3.068 12.271q0.162 0.807-0.283 1.372t-1.251 0.565h-48.438q-0.807 0-1.251-0.565t-0.283-1.372z"></path>
                </svg></a></div>
    </div>
</div>
<div class="af-container">
    <div class="row">
        <div class="col col-md-12">
            <div class="af-steps">
                <ol class="af-steps-list">
                    <li class="af-steps-list-step past" title="Etape 1">
                        <div class="af-steps-list-stepLabel">
                            <div class="af-steps-list-stepNumber">1</div>
                            <div class="af-steps-list-stepTitle">Previous step</div>
                        </div>
                    </li>
                    <li class="af-steps-list-step past" title="Etape 2">
                        <div class="af-steps-list-stepLabel">
                            <div class="af-steps-list-stepNumber">2</div>
                            <div class="af-steps-list-stepTitle">Previous step</div>
                        </div>
                    </li>
                    <li class="af-steps-list-step on" title="Etape 3">
                        <div class="af-steps-list-stepLabel">
                            <div class="af-steps-list-stepNumber">3</div>
                            <div class="af-steps-list-stepTitle">Current step</div>
                        </div>
                    </li>
                    <li class="af-steps-list-step" title="Etape 3">
                        <div class="af-steps-list-stepLabel">
                            <div class="af-steps-list-stepNumber">4</div>
                            <div class="af-steps-list-stepTitle">Next step</div>
                        </div>
                    </li>
                    <li class="af-steps-list-step" title="Etape finale">
                        <div class="af-steps-list-stepLabel">
                            <div class="af-steps-list-stepNumber">
                                <svg class="glyphicon glyphicon-ok" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 100">
                                    <path d="M0.854 57.792l34.917 35 68.167-68.333-17.667-17.667-50.583 50.583-17.167-17.25z"></path>
                                </svg>
                            </div>
                            <div class="af-steps-list-stepTitle">Confirmation</div>
                        </div>
                    </li>
                </ol>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col col-sm-12 col-md-12 col-lg-8 col-xl-8">
            <form class="af-form" name="myform">
                <h1 class="af-title--content">Form Element</h1>
                <div class="row af-form__group af-form__group--label-top">
                    <div class="col-md-2">
                        <label class="af-form__group-label">Classic checkbox</label>
                    </div>
                    <div class="col-md-10">
                        <div class="af-form__checkbox">
                            <input class="af-form__input-checkbox" name="classic" type="checkbox" id="checkbox1" />
                            <label class="af-form__label" for="checkbox1"><span class="af-form__indicator">
                                    <svg class="glyphicon glyphicon-ok" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 100">
                                        <path d="M0.854 57.792l34.917 35 68.167-68.333-17.667-17.667-50.583 50.583-17.167-17.25z"></path>
                                    </svg></span><span class="af-form__description">lorem ipsum dolor sit amet</span></label>
                        </div>
                        <div class="af-form__checkbox">
                            <input class="af-form__input-checkbox" name="classic" type="checkbox" id="checkbox2" />
                            <label class="af-form__label" for="checkbox2"><span class="af-form__indicator">
                                    <svg class="glyphicon glyphicon-ok" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 100">
                                        <path d="M0.854 57.792l34.917 35 68.167-68.333-17.667-17.667-50.583 50.583-17.167-17.25z"></path>
                                    </svg></span><span class="af-form__description">Nam sem nisi, auctor sit amet massa sit amet</span></label>
                        </div>
                        <div class="af-form__checkbox">
                            <input class="af-form__input-checkbox" name="classic" type="checkbox" id="checkbox3" />
                            <label class="af-form__label" for="checkbox3"><span class="af-form__indicator">
                                    <svg class="glyphicon glyphicon-ok" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 100">
                                        <path d="M0.854 57.792l34.917 35 68.167-68.333-17.667-17.667-50.583 50.583-17.167-17.25z"></path>
                                    </svg></span><span class="af-form__description">Ut sollicitudin eleifend tincidunt</span></label>
                        </div>
                        <div class="af-form__checkbox  af-form__checkbox--disabled">
                            <input class="af-form__input-checkbox" name="classic" type="checkbox" id="checkbox4" disabled="disabled" />
                            <label class="af-form__label" for="checkbox4"><span class="af-form__indicator">
                                    <svg class="glyphicon glyphicon-ok" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 100">
                                        <path d="M0.854 57.792l34.917 35 68.167-68.333-17.667-17.667-50.583 50.583-17.167-17.25z"></path>
                                    </svg></span><span class="af-form__description">disabled</span></label>
                        </div>
                    </div>
                </div>
                <div class="row af-form__group af-form__group--label-top">
                    <div class="col-md-2">
                        <label class="af-form__group-label">Inline checkbox</label>
                    </div>
                    <div class="col-md-10">
                        <div class="af-form__checkbox-inline">
                            <input class="af-form__input-checkbox" name="classic" type="checkbox" id="checkbox25" />
                            <label class="af-form__label" for="checkbox25"><span class="af-form__indicator">
                                    <svg class="glyphicon glyphicon-ok" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 100">
                                        <path d="M0.854 57.792l34.917 35 68.167-68.333-17.667-17.667-50.583 50.583-17.167-17.25z"></path>
                                    </svg></span><span class="af-form__description">Check 1</span></label>
                        </div>
                        <div class="af-form__checkbox-inline">
                            <input class="af-form__input-checkbox" name="classic" type="checkbox" id="checkbox26" />
                            <label class="af-form__label" for="checkbox26"><span class="af-form__indicator">
                                    <svg class="glyphicon glyphicon-ok" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 100">
                                        <path d="M0.854 57.792l34.917 35 68.167-68.333-17.667-17.667-50.583 50.583-17.167-17.25z"></path>
                                    </svg></span><span class="af-form__description">Check 2</span></label>
                        </div>
                        <div class="af-form__checkbox-inline">
                            <input class="af-form__input-checkbox" name="classic" type="checkbox" id="checkbox27" />
                            <label class="af-form__label" for="checkbox27"><span class="af-form__indicator">
                                    <svg class="glyphicon glyphicon-ok" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 100">
                                        <path d="M0.854 57.792l34.917 35 68.167-68.333-17.667-17.667-50.583 50.583-17.167-17.25z"></path>
                                    </svg></span><span class="af-form__description">Check 3</span></label>
                        </div>
                        <div class="af-form__checkbox-inline  af-form__checkbox-inline--disabled">
                            <input class="af-form__input-checkbox" name="classic" type="checkbox" id="checkbox28" disabled="disabled" />
                            <label class="af-form__label" for="checkbox28"><span class="af-form__indicator">
                                    <svg class="glyphicon glyphicon-ok" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 100">
                                        <path d="M0.854 57.792l34.917 35 68.167-68.333-17.667-17.667-50.583 50.583-17.167-17.25z"></path>
                                    </svg></span><span class="af-form__description">Disabled</span></label>
                        </div>
                    </div>
                </div>
                <div class="row af-form__group af-form__group--label-top">
                    <div class="col-md-2">
                        <label class="af-form__group-label">Classic checkbox</label>
                    </div>
                    <div class="col-md-10">
                        <div class="af-form__checkbox-custom">
                            <input class="af-form__input-checkbox" name="classic" type="checkbox" id="checkbox13" />
                            <label class="af-form__label" for="checkbox13"><span class="af-form__indicator">
                                    <svg class="glyphicon glyphicon-ok" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 100">
                                        <path d="M0.854 57.792l34.917 35 68.167-68.333-17.667-17.667-50.583 50.583-17.167-17.25z"></path>
                                    </svg></span><span class="af-form__description">Check 1</span></label>
                        </div>
                        <div class="af-form__checkbox-custom">
                            <input class="af-form__input-checkbox" name="classic" type="checkbox" id="checkbox14" />
                            <label class="af-form__label" for="checkbox14"><span class="af-form__indicator">
                                    <svg class="glyphicon glyphicon-ok" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 100">
                                        <path d="M0.854 57.792l34.917 35 68.167-68.333-17.667-17.667-50.583 50.583-17.167-17.25z"></path>
                                    </svg></span><span class="af-form__description">Check 2</span></label>
                        </div>
                        <div class="af-form__checkbox-custom">
                            <input class="af-form__input-checkbox" name="classic" type="checkbox" id="checkbox15" />
                            <label class="af-form__label" for="checkbox15"><span class="af-form__indicator">
                                    <svg class="glyphicon glyphicon-ok" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 100">
                                        <path d="M0.854 57.792l34.917 35 68.167-68.333-17.667-17.667-50.583 50.583-17.167-17.25z"></path>
                                    </svg></span><span class="af-form__description">Check 3</span></label>
                        </div>
                        <div class="af-form__checkbox-custom  af-form__checkbox-custom--disabled">
                            <input class="af-form__input-checkbox" name="classic" type="checkbox" id="checkbox16" disabled="disabled" />
                            <label class="af-form__label" for="checkbox16"><span class="af-form__indicator">
                                    <svg class="glyphicon glyphicon-ok" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 100">
                                        <path d="M0.854 57.792l34.917 35 68.167-68.333-17.667-17.667-50.583 50.583-17.167-17.25z"></path>
                                    </svg></span><span class="af-form__description">Disabled</span></label>
                        </div>
                    </div>
                </div>
                <div class="row af-form__group af-form__group--label-top">
                    <div class="col-md-2">
                        <label class="af-form__group-label">Classic radio</label>
                    </div>
                    <div class="col-md-10">
                        <div class="af-form__radio">
                            <input class="af-form__input-radio" name="classic" type="radio" id="radio1" />
                            <label class="af-form__label" for="radio1"><span class="af-form__description"> lorem ipsum dolor sit amet</span></label>
                        </div>
                        <div class="af-form__radio">
                            <input class="af-form__input-radio" name="classic" type="radio" id="radio2" />
                            <label class="af-form__label" for="radio2"><span class="af-form__description"> Nam sem nisi, auctor sit amet massa sit amet</span></label>
                        </div>
                        <div class="af-form__radio">
                            <input class="af-form__input-radio" name="classic" type="radio" id="radio3" />
                            <label class="af-form__label" for="radio3"><span class="af-form__description"> Ut sollicitudin eleifend tincidunt</span></label>
                        </div>
                        <div class="af-form__radio  af-form__radio--disabled">
                            <input class="af-form__input-radio" name="classic" type="radio" id="radio4" disabled="disabled" />
                            <label class="af-form__label" for="radio4"><span class="af-form__description"> disabled</span></label>
                        </div>
                    </div>
                </div>
                <div class="row af-form__group af-form__group--label-top">
                    <div class="col-md-2">
                        <label class="af-form__group-label">Inline radio</label>
                    </div>
                    <div class="col-md-10">
                        <div class="af-form__radio-inline">
                            <input class="af-form__input-radio" name="classic-inline" type="radio" id="radio25" />
                            <label class="af-form__label" for="radio25"><span class="af-form__description"> Radio 1</span></label>
                        </div>
                        <div class="af-form__radio-inline">
                            <input class="af-form__input-radio" name="classic-inline" type="radio" id="radio26" />
                            <label class="af-form__label" for="radio26"><span class="af-form__description"> Radio 2</span></label>
                        </div>
                        <div class="af-form__radio-inline">
                            <input class="af-form__input-radio" name="classic-inline" type="radio" id="radio27" />
                            <label class="af-form__label" for="radio27"><span class="af-form__description"> Radio 3</span></label>
                        </div>
                        <div class="af-form__radio-inline  af-form__radio-inline--disabled">
                            <input class="af-form__input-radio" name="classic-inline" type="radio" id="radio28" disabled="disabled" />
                            <label class="af-form__label" for="radio28"><span class="af-form__description"> Disabled</span></label>
                        </div>
                    </div>
                </div>
                <div class="row af-form__group af-form__group--label-top">
                    <div class="col-md-2">
                        <label class="af-form__group-label">Custom Radio</label>
                    </div>
                    <div class="col-md-10">
                        <div class="af-form__radio-custom">
                            <input class="af-form__input-radio" name="classic-custom" type="radio" id="radio13" />
                            <label class="af-form__label" for="radio13"><span class="af-form__description"> Radio 1</span></label>
                        </div>
                        <div class="af-form__radio-custom">
                            <input class="af-form__input-radio" name="classic-custom" type="radio" id="radio14" />
                            <label class="af-form__label" for="radio14"><span class="af-form__description"> Radio 2</span></label>
                        </div>
                        <div class="af-form__radio-custom">
                            <input class="af-form__input-radio" name="classic-custom" type="radio" id="radio15" />
                            <label class="af-form__label" for="radio15"><span class="af-form__description"> Radio 3</span></label>
                        </div>
                        <div class="af-form__radio-custom  af-form__radio-custom--disabled">
                            <input class="af-form__input-radio" name="classic-custom" type="radio" id="radio16" disabled="disabled" />
                            <label class="af-form__label" for="radio16"><span class="af-form__description"> Disabled</span></label>
                        </div>
                    </div>
                </div>
                <div class="af-form__group row">
                    <div class="col-md-2">
                        <label class="af-form__group-label" for="radioswitch">Switch radios *</label>
                    </div>
                    <div class="col-md-10">
                        <div class="af-form-switch">
                            <div class="af-form__radio-custom">
                                <input class="af-form__input-radio" id="check0" name="placeName" value="0" type="radio" />
                                <label class="af-form__label" for="check0"><span class="af-form__description">Choix 1</span></label>
                            </div>
                            <div class="af-form__radio-custom">
                                <input class="af-form__input-radio" id="check1" name="placeName" value="1" type="radio" checked="checked" />
                                <label class="af-form__label" for="check1"><span class="af-form__description">Choix 2</span></label>
                            </div>
                            <div class="af-form__radio-custom">
                                <input class="af-form__input-radio" id="check2" name="placeName" value="2" type="radio" />
                                <label class="af-form__label" for="check2"><span class="af-form__description">Choix 3</span></label>
                            </div>
                            <div class="af-form__radio-custom">
                                <input class="af-form__input-radio" id="check3" name="placeName" value="3" type="radio" />
                                <label class="af-form__label" for="check3"><span class="af-form__description">Choix 44444444444444</span></label>
                            </div><span class="af-btn-switch-slider" style="left:64px;width:64px;"></span>
                        </div>
                    </div>
                </div>
                <div class="af-form__group row">
                    <div class="col-md-2">
                        <label class="af-form__group-label" for="inputtext1">Input text *</label>
                    </div>
                    <div class="col-md-10">
                        <div class="af-form__text">
                            <div class="af-form__text-wrapper">
                                <input class="af-form__input-text" name="inputtextname" type="text" />
                            </div><small class="af-form__message">Aide à la saisie</small>
                        </div>
                    </div>
                </div>
                <div class="af-form__group row">
                    <div class="col-md-2">
                        <label class="af-form__group-label" for="inputtext1">Input text *</label>
                    </div>
                    <div class="col-md-10">
                        <div class="af-form__text  af-form__text--hasinfobulle">
                            <div class="af-form__text-wrapper">
                                <input class="af-form__input-text  af-form__input-text--hasinfobulle" name="inputtextname" type="text" />
                                <button class="btn af-btn--circle-small" type="button"><span class="af-more-help">i</span></button>
                            </div><small class="af-form__message">Aide à la saisie</small>
                        </div>
                    </div>
                </div>
                <div class="af-form__group row">
                    <div class="col-md-2">
                        <label class="af-form__group-label" for="inputtext1">Input text *</label>
                    </div>
                    <div class="col-md-10">
                        <div class="af-form__text  af-form__text--disabled">
                            <div class="af-form__text-wrapper">
                                <input class="af-form__input-text" name="inputtextname" type="text" disabled="disabled" />
                            </div><small class="af-form__message">Aide à la saisie</small>
                        </div>
                    </div>
                </div>
                <div class="af-form__group row">
                    <div class="col-md-2">
                        <label class="af-form__group-label" for="select1">Input Select *</label>
                    </div>
                    <div class="col-md-10">
                        <div class="af-form__select">
                            <div class="af-form__select-container">
                                <select class="af-form__input-select" name="inputtextname" type="text">
                                    <option value="0">-Sélectionner-</option>
                                    <option value="1">Option 1</option>
                                    <option value="2">Option 2</option>
                                    <option value="3">Option 3</option>
                                    <option value="4">Option 4</option>
                                </select>
                                <svg class="glyphicon glyphicon-menu-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                                    <path d="M98.4,16.2c0.7,0.3,1.1,1,1.1,2.1v15.9c0,0.9-0.3,1.6-0.9,2.3L51.8,83.2c-0.5,0.5-1.1,0.7-1.8,0.7
	s-1.3-0.2-1.8-0.7L1.4,36.5c-0.6-0.7-0.9-1.4-0.9-2.3V18.3c0-1.1,0.4-1.8,1.1-2.1c0.7-0.3,1.5-0.1,2.3,0.7L50,63l46.1-46.1
	C96.9,16.1,97.6,15.9,98.4,16.2L98.4,16.2z"></path>
                                </svg>
                            </div><small class="af-form__message">Aide à la saisie</small>
                        </div>
                    </div>
                </div>
                <div class="af-form__group row">
                    <div class="col-md-2">
                        <label class="af-form__group-label" for="select1">Inline fields *</label>
                    </div>
                    <div class="col-md-10">
                        <div class="af-form__fields-inline">
                            <div class="af-form__select af-form__input-inline">
                                <div class="af-form__select-container">
                                    <select class="af-form__input-select" name="inputtextname" type="text">
                                        <option value="0">-Sélectionner-</option>
                                        <option value="1">Option 1</option>
                                        <option value="2">Option 2</option>
                                        <option value="3">Option 3</option>
                                        <option value="4">Option 4</option>
                                    </select>
                                    <svg class="glyphicon glyphicon-menu-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                                        <path d="M98.4,16.2c0.7,0.3,1.1,1,1.1,2.1v15.9c0,0.9-0.3,1.6-0.9,2.3L51.8,83.2c-0.5,0.5-1.1,0.7-1.8,0.7
	s-1.3-0.2-1.8-0.7L1.4,36.5c-0.6-0.7-0.9-1.4-0.9-2.3V18.3c0-1.1,0.4-1.8,1.1-2.1c0.7-0.3,1.5-0.1,2.3,0.7L50,63l46.1-46.1
	C96.9,16.1,97.6,15.9,98.4,16.2L98.4,16.2z"></path>
                                    </svg>
                                </div><small class="af-form__message">Aide à la saisie</small>
                            </div>
                            <div class="af-form__text  af-form__text--hasinfobulle">
                                <div class="af-form__text-wrapper">
                                    <input class="af-form__input-text  af-form__input-text--hasinfobulle" name="inputtextname" type="text" />
                                    <button class="btn af-btn--circle-small" type="button"><span class="af-more-help">i</span></button>
                                </div><small class="af-form__message">Aide à la saisie</small>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="af-form__group row">
                    <div class="col-md-2">
                        <label class="af-form__group-label" for="select1">Input Select *</label>
                    </div>
                    <div class="col-md-10">
                        <div class="af-form__select  af-form__select--disabled">
                            <div class="af-form__select-container">
                                <select class="af-form__input-select" name="inputtextname" type="text" disabled="disabled">
                                    <option value="0">-Sélectionner-</option>
                                    <option value="1">Option 1</option>
                                    <option value="2">Option 2</option>
                                    <option value="3">Option 3</option>
                                    <option value="4">Option 4</option>
                                </select>
                                <svg class="glyphicon glyphicon-menu-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                                    <path d="M98.4,16.2c0.7,0.3,1.1,1,1.1,2.1v15.9c0,0.9-0.3,1.6-0.9,2.3L51.8,83.2c-0.5,0.5-1.1,0.7-1.8,0.7
	s-1.3-0.2-1.8-0.7L1.4,36.5c-0.6-0.7-0.9-1.4-0.9-2.3V18.3c0-1.1,0.4-1.8,1.1-2.1c0.7-0.3,1.5-0.1,2.3,0.7L50,63l46.1-46.1
	C96.9,16.1,97.6,15.9,98.4,16.2L98.4,16.2z"></path>
                                </svg>
                            </div><small class="af-form__message">Aide à la saisie</small>
                        </div>
                    </div>
                </div>
                <div class="row af-form__group af-form__group--label-top">
                    <div class="col-md-2">
                        <label class="af-form__group-label" for="textarea1">Input Textarea *</label>
                    </div>
                    <div class="col-md-10">
                        <div class="af-form__textarea">
                            <textarea class="af-form__input-textarea" name="textarea1" rows="5" cols="50" placeholder="Texte long long long"></textarea>
                        </div>
                    </div>
                </div>
                <div class="row af-form__group af-form__group--label-top">
                    <div class="col-md-2">
                        <label class="af-form__group-label" for="textarea1">Input Textarea *</label>
                    </div>
                    <div class="col-md-10">
                        <div class="af-form__textarea af-form__textarea--disabled">
                            <textarea class="af-form__input-textarea" name="textarea1" rows="5" cols="50" placeholder="Texte long long long" disabled="disabled"></textarea>
                        </div>
                    </div>
                </div>
                <div class="af-form__group row">
                    <div class="col-md-2">
                        <label class="af-form__group-label" for="inputtext1">Input File *</label>
                    </div>
                    <div class="col-md-10">
                        <div class="af-form__file">
                            <div class="af-form__file-input">
                                <div class="drop-box hidden-mobile" id="uniqueid" style="position: relative;" aria-disabled="false">
                                    <div>Glissez/d&eacute;posez vos fichiers</div>
                                    <input accept="image/jpeg, image/png, application/*" type="file" style="position: absolute; inset: 0px; opacity: 0.00001; pointer-events: none;" multiple="" autocomplete="off" name="placeImage" />
                                </div>
                                <button class="af-btn af-btn--file af-btn--hasiconLeft" type="button">
                                    <svg class="glyphicon glyphicon-open" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                                        <path d="M3.125 101.875v-22.917q0-0.917 0.583-1.5t1.5-0.583h87.333q0.917 0 1.583 0.625t0.667 1.458v22.917h-91.667zM11.458 43.542h25v25h25v-25h24.583l-37.083-41.667zM78.125 89.375h8.333v-4.167h-8.333v4.167z"></path>
                                    </svg> Parcourir
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="af-form__group row">
                    <div class="col-md-2">
                        <label class="af-form__group-label" for="inputpassword">Input password *</label>
                    </div>
                    <div class="col-md-10">
                        <div class="af-form__pass-container">
                            <div class="af-form__pass af-form__pass--hasinfobulle">
                                <div class="af-form__pass-strength"></div>
                                <input class="af-form__input-text" id="uniqueid" name="inputpassword" value="" tabindex="" type="password" />
                                <button class="af-form__pass-btn" type="button">
                                    <svg class="glyphicon glyphicon-eye-open" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 113 100">
                                        <path d="M1.167 48.75l2.167-3.333q0.5-0.833 1.667-2.5t4.083-5.292 6.208-7.125 8.083-7.5 9.708-6.958 11.042-4.917 12.125-1.958 12.125 1.958 11.042 4.917 9.708 6.958 8.083 7.5 6.208 7.125 4.083 5.292 1.667 2.5l2.167 3.333-2.167 3.333q-0.5 0.833-1.667 2.5t-4.083 5.292-6.208 7.125-8.083 7.5-9.708 6.958-11.042 4.917-12.125 1.958-12.125-1.958-11.042-4.917-9.708-6.958-8.083-7.5-6.208-7.125-4.083-5.292-1.667-2.5zM16.25 48.75q0.583 0.833 3.375 4.833t4.667 6.542 5.667 6.458 7.292 6.25 8.583 4.125 10.417 1.792 10.292-1.667 8.375-3.792 7.125-5.958 5.542-6.292 4.833-6.792 3.917-5.5q-0.083-0.083-2.375-3.125t-3.5-4.583-3.625-4.417-4.792-5.292-4.875-4.5q4.083 6.167 4.083 13.583 0 10.333-7.333 17.667t-17.667 7.333-17.667-7.333-7.333-17.667q0-7.083 3.833-13.167-8.5 7.25-18.833 21.5zM37.667 44.083q4.083 10.333 12.833 15.917l8.75-8.75q-3.083-2-6.25-6t-4.75-7l-1.667-3z"></path>
                                    </svg>
                                </button>
                            </div>
                            <div class="af-popover__container">
                                <div class="af-popover__container-over">
                                    <button class="af-btn--circle-small"><span class="af-more-help">i</span></button>
                                </div>
                            </div><small class="af-form__help">8 caractères minimum</small>
                        </div>
                    </div>
                </div>
                <div class="af-form__group row af-form__group--bad">
                    <div class="col-md-2">
                        <label class="af-form__group-label" for="inputpassword">Input password *</label>
                    </div>
                    <div class="col-md-10">
                        <div class="af-form__pass-container">
                            <div class="af-form__pass af-form__pass--hasinfobulle af-form__pass--bad">
                                <div class="af-form__pass-strength"></div>
                                <input class="af-form__input-text" id="uniqueid" name="inputpassword" value="" tabindex="" type="password" />
                                <button class="af-form__pass-btn" type="button">
                                    <svg class="glyphicon glyphicon-eye-open" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 113 100">
                                        <path d="M1.167 48.75l2.167-3.333q0.5-0.833 1.667-2.5t4.083-5.292 6.208-7.125 8.083-7.5 9.708-6.958 11.042-4.917 12.125-1.958 12.125 1.958 11.042 4.917 9.708 6.958 8.083 7.5 6.208 7.125 4.083 5.292 1.667 2.5l2.167 3.333-2.167 3.333q-0.5 0.833-1.667 2.5t-4.083 5.292-6.208 7.125-8.083 7.5-9.708 6.958-11.042 4.917-12.125 1.958-12.125-1.958-11.042-4.917-9.708-6.958-8.083-7.5-6.208-7.125-4.083-5.292-1.667-2.5zM16.25 48.75q0.583 0.833 3.375 4.833t4.667 6.542 5.667 6.458 7.292 6.25 8.583 4.125 10.417 1.792 10.292-1.667 8.375-3.792 7.125-5.958 5.542-6.292 4.833-6.792 3.917-5.5q-0.083-0.083-2.375-3.125t-3.5-4.583-3.625-4.417-4.792-5.292-4.875-4.5q4.083 6.167 4.083 13.583 0 10.333-7.333 17.667t-17.667 7.333-17.667-7.333-7.333-17.667q0-7.083 3.833-13.167-8.5 7.25-18.833 21.5zM37.667 44.083q4.083 10.333 12.833 15.917l8.75-8.75q-3.083-2-6.25-6t-4.75-7l-1.667-3z"></path>
                                    </svg>
                                </button>
                            </div>
                            <div class="af-popover__container">
                                <div class="af-popover__container-over">
                                    <button class="af-btn--circle-small"><span class="af-more-help">i</span></button>
                                </div>
                            </div><small class="af-form__help">8 caractères minimum</small>
                        </div>
                    </div>
                </div>
                <div class="af-form__group row af-form__group--okay">
                    <div class="col-md-2">
                        <label class="af-form__group-label" for="inputpassword">Input password *</label>
                    </div>
                    <div class="col-md-10">
                        <div class="af-form__pass-container">
                            <div class="af-form__pass af-form__pass--hasinfobulle af-form__pass--okay">
                                <div class="af-form__pass-strength"></div>
                                <input class="af-form__input-text" id="uniqueid" name="inputpassword" value="" tabindex="" type="password" />
                                <button class="af-form__pass-btn" type="button">
                                    <svg class="glyphicon glyphicon-eye-open" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 113 100">
                                        <path d="M1.167 48.75l2.167-3.333q0.5-0.833 1.667-2.5t4.083-5.292 6.208-7.125 8.083-7.5 9.708-6.958 11.042-4.917 12.125-1.958 12.125 1.958 11.042 4.917 9.708 6.958 8.083 7.5 6.208 7.125 4.083 5.292 1.667 2.5l2.167 3.333-2.167 3.333q-0.5 0.833-1.667 2.5t-4.083 5.292-6.208 7.125-8.083 7.5-9.708 6.958-11.042 4.917-12.125 1.958-12.125-1.958-11.042-4.917-9.708-6.958-8.083-7.5-6.208-7.125-4.083-5.292-1.667-2.5zM16.25 48.75q0.583 0.833 3.375 4.833t4.667 6.542 5.667 6.458 7.292 6.25 8.583 4.125 10.417 1.792 10.292-1.667 8.375-3.792 7.125-5.958 5.542-6.292 4.833-6.792 3.917-5.5q-0.083-0.083-2.375-3.125t-3.5-4.583-3.625-4.417-4.792-5.292-4.875-4.5q4.083 6.167 4.083 13.583 0 10.333-7.333 17.667t-17.667 7.333-17.667-7.333-7.333-17.667q0-7.083 3.833-13.167-8.5 7.25-18.833 21.5zM37.667 44.083q4.083 10.333 12.833 15.917l8.75-8.75q-3.083-2-6.25-6t-4.75-7l-1.667-3z"></path>
                                    </svg>
                                </button>
                            </div>
                            <div class="af-popover__container">
                                <div class="af-popover__container-over">
                                    <button class="af-btn--circle-small"><span class="af-more-help">i</span></button>
                                </div>
                            </div><small class="af-form__help">8 caractères minimum</small>
                        </div>
                    </div>
                </div>
                <div class="af-form__group row af-form__group--good">
                    <div class="col-md-2">
                        <label class="af-form__group-label" for="inputpassword">Input password *</label>
                    </div>
                    <div class="col-md-10">
                        <div class="af-form__pass-container">
                            <div class="af-form__pass af-form__pass--hasinfobulle af-form__pass--good">
                                <div class="af-form__pass-strength"></div>
                                <input class="af-form__input-text" id="uniqueid" name="inputpassword" value="" tabindex="" type="password" />
                                <button class="af-form__pass-btn" type="button">
                                    <svg class="glyphicon glyphicon-eye-open" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 113 100">
                                        <path d="M1.167 48.75l2.167-3.333q0.5-0.833 1.667-2.5t4.083-5.292 6.208-7.125 8.083-7.5 9.708-6.958 11.042-4.917 12.125-1.958 12.125 1.958 11.042 4.917 9.708 6.958 8.083 7.5 6.208 7.125 4.083 5.292 1.667 2.5l2.167 3.333-2.167 3.333q-0.5 0.833-1.667 2.5t-4.083 5.292-6.208 7.125-8.083 7.5-9.708 6.958-11.042 4.917-12.125 1.958-12.125-1.958-11.042-4.917-9.708-6.958-8.083-7.5-6.208-7.125-4.083-5.292-1.667-2.5zM16.25 48.75q0.583 0.833 3.375 4.833t4.667 6.542 5.667 6.458 7.292 6.25 8.583 4.125 10.417 1.792 10.292-1.667 8.375-3.792 7.125-5.958 5.542-6.292 4.833-6.792 3.917-5.5q-0.083-0.083-2.375-3.125t-3.5-4.583-3.625-4.417-4.792-5.292-4.875-4.5q4.083 6.167 4.083 13.583 0 10.333-7.333 17.667t-17.667 7.333-17.667-7.333-7.333-17.667q0-7.083 3.833-13.167-8.5 7.25-18.833 21.5zM37.667 44.083q4.083 10.333 12.833 15.917l8.75-8.75q-3.083-2-6.25-6t-4.75-7l-1.667-3z"></path>
                                    </svg>
                                </button>
                            </div>
                            <div class="af-popover__container">
                                <div class="af-popover__container-over">
                                    <button class="af-btn--circle-small"><span class="af-more-help">i</span></button>
                                </div>
                            </div><small class="af-form__help">8 caractères minimum</small>
                        </div>
                    </div>
                </div>
                <div class="af-form__group row af-form__group--verygood">
                    <div class="col-md-2">
                        <label class="af-form__group-label" for="inputpassword">Input password *</label>
                    </div>
                    <div class="col-md-10">
                        <div class="af-form__pass-container">
                            <div class="af-form__pass af-form__pass--hasinfobulle af-form__pass--verygood">
                                <div class="af-form__pass-strength"></div>
                                <input class="af-form__input-text" id="uniqueid" name="inputpassword" value="" tabindex="" type="password" />
                                <button class="af-form__pass-btn" type="button">
                                    <svg class="glyphicon glyphicon-eye-open" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 113 100">
                                        <path d="M1.167 48.75l2.167-3.333q0.5-0.833 1.667-2.5t4.083-5.292 6.208-7.125 8.083-7.5 9.708-6.958 11.042-4.917 12.125-1.958 12.125 1.958 11.042 4.917 9.708 6.958 8.083 7.5 6.208 7.125 4.083 5.292 1.667 2.5l2.167 3.333-2.167 3.333q-0.5 0.833-1.667 2.5t-4.083 5.292-6.208 7.125-8.083 7.5-9.708 6.958-11.042 4.917-12.125 1.958-12.125-1.958-11.042-4.917-9.708-6.958-8.083-7.5-6.208-7.125-4.083-5.292-1.667-2.5zM16.25 48.75q0.583 0.833 3.375 4.833t4.667 6.542 5.667 6.458 7.292 6.25 8.583 4.125 10.417 1.792 10.292-1.667 8.375-3.792 7.125-5.958 5.542-6.292 4.833-6.792 3.917-5.5q-0.083-0.083-2.375-3.125t-3.5-4.583-3.625-4.417-4.792-5.292-4.875-4.5q4.083 6.167 4.083 13.583 0 10.333-7.333 17.667t-17.667 7.333-17.667-7.333-7.333-17.667q0-7.083 3.833-13.167-8.5 7.25-18.833 21.5zM37.667 44.083q4.083 10.333 12.833 15.917l8.75-8.75q-3.083-2-6.25-6t-4.75-7l-1.667-3z"></path>
                                    </svg>
                                </button>
                            </div>
                            <div class="af-popover__container">
                                <div class="af-popover__container-over">
                                    <button class="af-btn--circle-small"><span class="af-more-help">i</span></button>
                                </div>
                            </div><small class="af-form__help">8 caractères minimum</small>
                        </div>
                    </div>
                </div>
                <div class="af-form__group row af-form__group--excellent">
                    <div class="col-md-2">
                        <label class="af-form__group-label" for="inputpassword">Input password *</label>
                    </div>
                    <div class="col-md-10">
                        <div class="af-form__pass-container">
                            <div class="af-form__pass af-form__pass--hasinfobulle af-form__pass--excellent">
                                <div class="af-form__pass-strength"></div>
                                <input class="af-form__input-text" id="uniqueid" name="inputpassword" value="" tabindex="" type="password" />
                                <button class="af-form__pass-btn" type="button">
                                    <svg class="glyphicon glyphicon-eye-open" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 113 100">
                                        <path d="M1.167 48.75l2.167-3.333q0.5-0.833 1.667-2.5t4.083-5.292 6.208-7.125 8.083-7.5 9.708-6.958 11.042-4.917 12.125-1.958 12.125 1.958 11.042 4.917 9.708 6.958 8.083 7.5 6.208 7.125 4.083 5.292 1.667 2.5l2.167 3.333-2.167 3.333q-0.5 0.833-1.667 2.5t-4.083 5.292-6.208 7.125-8.083 7.5-9.708 6.958-11.042 4.917-12.125 1.958-12.125-1.958-11.042-4.917-9.708-6.958-8.083-7.5-6.208-7.125-4.083-5.292-1.667-2.5zM16.25 48.75q0.583 0.833 3.375 4.833t4.667 6.542 5.667 6.458 7.292 6.25 8.583 4.125 10.417 1.792 10.292-1.667 8.375-3.792 7.125-5.958 5.542-6.292 4.833-6.792 3.917-5.5q-0.083-0.083-2.375-3.125t-3.5-4.583-3.625-4.417-4.792-5.292-4.875-4.5q4.083 6.167 4.083 13.583 0 10.333-7.333 17.667t-17.667 7.333-17.667-7.333-7.333-17.667q0-7.083 3.833-13.167-8.5 7.25-18.833 21.5zM37.667 44.083q4.083 10.333 12.833 15.917l8.75-8.75q-3.083-2-6.25-6t-4.75-7l-1.667-3z"></path>
                                    </svg>
                                </button>
                            </div>
                            <div class="af-popover__container">
                                <div class="af-popover__container-over">
                                    <button class="af-btn--circle-small"><span class="af-more-help">i</span></button>
                                </div>
                            </div><small class="af-form__help">8 caractères minimum</small>
                        </div>
                    </div>
                </div>
                <div class="af-form__slider">
                    <div class="md-10">
                        <div style="width: 100%; margin: 0px;">
                            <div class="rc-slider rc-slider-with-marks">
                                <div class="rc-slider-rail"></div>
                                <div class="rc-slider-track" style="visibility: visible; left: 0%; width: 33.3333%;"></div>
                                <div class="rc-slider-step"><span class="rc-slider-dot rc-slider-dot-active" style="left: 0%;"></span><span class="rc-slider-dot rc-slider-dot-active" style="left: 33.3333%;"></span><span class="rc-slider-dot" style="left: 66.6667%;"></span><span class="rc-slider-dot" style="left: 100%;"></span></div>
                                <div class="rc-slider-handle" role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="3" aria-valuenow="1" aria-disabled="false" style="left: 33.3333%;"></div>
                                <div class="rc-slider-mark"><span class="rc-slider-mark-text rc-slider-mark-text-active" style="width: 30%; margin-left: -15%; left: 0%;">VERY BAD</span><span class="rc-slider-mark-text rc-slider-mark-text-active" style="width: 30%; margin-left: -15%; left: 33.3333%;">BAD</span><span class="rc-slider-mark-text" style="width: 30%; margin-left: -15%; left: 66.6667%;">NICE</span><span class="rc-slider-mark-text" style="width: 30%; margin-left: -15%; left: 100%;">VERY NICE</span></div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class="col col-sm-12 col-md-12 col-lg-4 col-xl-4">
            <article class="af-panel af-panel--selection">
                <header class="af-panel__header"><span class="af-panel__title">Votre sélection</span></header>
                <section class="af-panel__content">
                    <dl class="af-panel__def-list">
                        <dt class="af-panel__terme">Socle de garanties</dt>
                        <dd class="af-panel__def">7,00 € / mois</dd>
                    </dl>
                    <dl class="af-panel__def-list">
                        <dt class="af-panel__terme">Mes proches et moi</dt>
                        <dd class="af-panel__def">12,00 € / mois</dd>
                        <dt class="af-panel__terme">Mes travaux</dt>
                        <dd class="af-panel__def">15,00 € / mois</dd>
                    </dl>
                    <dl class="af-panel__def-list af-panel__def-list--ajust">
                        <dt class="af-panel__terme">Ajustements</dt>
                        <dd class="af-panel__def">-2,00 € / mois</dd>
                    </dl>
                    <dl class="af-panel__def-list af-panel__def-list--result">
                        <dt class="af-panel__terme">Tarif mensuel</dt>
                        <dd class="af-panel__def"><b class="af-panel__def-price">32,00 €</b><span class="af-panel__def-month">/ mois</span><small class="af-panel__def-byyear">Soit 768,00 € / an</small></dd>
                    </dl>
                </section>
                <footer class="af-panel__footer"><a class="af-panel__footer-link" href="" role="button">
                        <svg class="glyphicon glyphicon-cog" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                            <path d="M2.167 50.229q0 2.75 0.5 6.167l12.583 3.167 0.167 0.5q1.167 4.083 3.167 7.75l0.25 0.417-6.667 11.167q3.75 4.917 8.75 8.75l11.083-6.75 0.417 0.25q3.75 2.167 7.833 3.25l0.417 0.167 3.167 12.583q3.333 0.417 6.167 0.417 2.25 0 6.167-0.417l3.167-12.583 0.5-0.167q3.833-1.083 7.75-3.25l0.417-0.25 11.167 6.75q4.667-3.667 8.667-8.75l-6.667-11.167 0.25-0.417q2-3.667 3.25-7.75l0.083-0.5 12.667-3.167q0.417-3.333 0.417-6.167 0-2.333-0.417-6.083l-12.667-3.167-0.083-0.5q-1.333-4.25-3.25-7.75l-0.25-0.417 6.667-11.167q-3.667-4.833-8.667-8.75l-11.167 6.75-0.417-0.25q-3.75-2.083-7.75-3.25l-0.5-0.083-3.167-12.667q-3.333-0.417-6.167-0.417-2.25 0-6.167 0.417l-3.167 12.667-0.417 0.083q-4.167 1.167-7.833 3.25l-0.417 0.25-11.083-6.75q-4.917 3.917-8.75 8.75l6.667 11.167-0.25 0.417q-2.083 3.917-3.167 7.75l-0.167 0.5-12.583 3.167q-0.5 4-0.5 6.083zM32.083 50.229q0-7.333 5.25-12.583t12.667-5.25 12.667 5.25 5.25 12.583q0 7.417-5.25 12.667t-12.667 5.25-12.667-5.25-5.25-12.667z"></path>
                        </svg><span> Ajustements</span></a></footer>
            </article>
            <article class="af-panel">
                <header class="af-panel__header"><span class="af-panel__title">Synthèse du besoin<span class="af-badge af-badge--info">2</span></span></header>
                <section class="af-panel__content">
                    <ul class="af-panel__list">
                        <li class="af-panel__list-item">Marié, 2 enfants</li>
                        <li class="af-panel__list-item">Artisan</li>
                        <li class="af-panel__list-item">Renault Clio</li>
                        <li class="af-panel__list-item">Achat à crédit</li>
                        <li class="af-panel__list-item">Usage privé/travail</li>
                        <li class="af-panel__list-item">Bonus 35%</li>
                        <li class="af-panel__list-item">Avec antécédent</li>
                        <li class="af-panel__list-item">0 sinitre depuis 3 ans</li>
                        <li class="af-panel__list-item">1 permis de - de 3 ans / 3 véhicules au foyer</li>
                    </ul>
                </section>
            </article>
        </div>
    </div>
</div>
<footer class="af-footer">
    <div class="af-container"><a class="af-logo" href="https://www.axa.fr/" title="Site Axa France" target="blank"><img class="af-logo__brand" src="../../assets/images/slash-logo.svg" alt="Logo Slash Design System" /></a>
        <div class="af-footer-content">@ 2020 AXA Tous droits réservés</div>
    </div>
</footer>

Copied

No style

Slash

Design System

Page Form

Organisms

Source Code HTML / SASS

Sample Form

Nom de l'applicationBaseline

Slash Design SystemSous titre

Form Element

React interactions

Generales Guidelines

Style

Colors

Imports SASS