Modales

Les modales sont des modèles de pages qui doivent être utilisées pour des actions précises et ciblées (modification du mémo, hospitalisation, arrêt de suivi, etc.). La largeur de celles-ci doit s'adapter au contenu avec une zone d'affichage mini de (à définir) pour (à définir largeur d'écran). Le sous-header ne doit pas apparaitre sur ces pages.

Point important, l'ordre d'affichage des boutons doit être respecté :

• Sur mobile, le bouton de soumission de l'action .btn-submit doit toujours être affiché en premier,
• Sur desktop, le bouton de soumission de l'action .btn-submit doit toujours être affiché à droite et le bouton d'annulation / retour .btn-cancel à gauche.

<div class="s-modal">
    <div class="s-block-header">
        <div class="s-block-title">
            <h2>Titre de la modale</h2>
        </div>
    </div>
    <div class="s-block-content">
        <form name="memo" method="post" class="js-validation" novalidate="novalidate">
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsum quo velit fugit atque
                exercitationem. Provident, blanditiis eos nostrum odio deleniti, omnis molestias aliquid, natus
                fugit illo doloribus ea similique laudantium ?</p>
            <div class="row">
                <div class="col-12">
                    <div id="memo">
                        <div class="form-group">
                            <label for="memo_memo">Texte du mémo</label>
                            <textarea
                                id="memo_memo" name="memo[memo]" rows="4"
                                placeholder="Exemple : infos sur hospitalisation à prévoir, etc."
                                class="form-control"></textarea>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row mt-3">
                <div class="col-12 col-md-6 text-center text-md-right order-1 order-md-0 mt-3 mt-md-0">
                    <a href="#" class="btn btn-secondary btn-cancel">Annuler</a>
                </div>
                <div class="col-12 col-md-6 text-center text-md-left order-0 order-md-1">
                    <button class="btn btn-primary btn-submit" type="button">Valider</button>
                </div>
            </div>
        </form>
    </div>
</div>