Foehn Design System

Check Answers Page 

<header class="header" role="banner">
    <nav class="container fixed-top access-nav d-print-none" aria-label="menu accessibilité">
        <ul class="list-unstyled mt-3">
            <li>
                <a class="sr-only sr-only-focusable btn btn-dark pt-0" accesskey="0" href="#" title="[Alt+0] Page d'accueil du site">Accueil</a>
            </li>
            <li>
                <a class="sr-only sr-only-focusable btn btn-dark pt-0" accesskey="1" href="#nav-primary" title="[Alt+1] Menu de navigation de la page">Menu de navigation de la page</a>
            </li>
            <li>
                <a class="sr-only sr-only-focusable btn btn-dark pt-0" accesskey="2" href="#main" title="[Alt+2] Debut du contenu de la page">Début du contenu de la page</a>
            </li>
            <li>
                <a class="sr-only sr-only-focusable btn btn-dark pt-0" accesskey="3" href="#" title="[Alt+3] Page de contact">Page de contact</a>
            </li>
            <li>
                <a class="sr-only sr-only-focusable btn btn-dark pt-0" accesskey="4" href="#" title="[Alt+4] Plan du site du Canton de Vaud">Plan du site</a>
            </li>
            <li>
                <a class="sr-only sr-only-focusable btn btn-dark pt-0" accesskey="5" href="#search-form" title="[Alt+5] Accès au champ de recherche">Accès au champ de recherche</a>
            </li>
            <li>
                <a class="sr-only sr-only-focusable btn btn-dark pt-0" accesskey="6" href="#" title="[Alt+6] Accès à l'index thématique">Thèmes</a>
            </li>
            <li>
                <a class="sr-only sr-only-focusable btn btn-dark pt-0" accesskey="7" href="#" title="[Alt+7] Accès à la navigation par autorités">Autorités</a>
            </li>
            <li>
                <a class="sr-only sr-only-focusable btn btn-dark pt-0" accesskey="8" href="#" title="[Alt+8] Page d'aide pour les personnes en situation de handicap">Page d'aide pour les personnes en situation de handicap</a>
            </li>
        </ul>
    </nav>

    <div class="vd-header-application container">
        <a href="../accueil" class="vd-logo" title="Aller à la page d'accueil du Site du Canton de Vaud">
            <img src="../../foehn/svg/ETATVAUD-alt.svg" class="vd-logo__image" alt="État de Vaud" aria-hidden="true" />
        </a>
        <span class="vd-header-application__title">e-ACO : Détermination / modification des acomptes</span>
    </div>
</header>

<section class="small container text-end mb-3">
    <h2 class="sr-only">Votre identité</h2>
    <p class="mb-0">
        <span class="fas fa-lock" aria-hidden="true"></span>

        <a href="#">Jean Villard Gilles</a>

    </p>

    <p class="mb-0">
        <a href="#">Se déconnecter</a>
    </p>

</section>

<main id="main">
    <div class="vd-bg-pattern-gray">
        <div class="container">
            <nav aria-label="Fil d'Ariane">
                <h2 class="sr-only">File d'Ariane</h2>
                <ol class="breadcrumb">

                    <li class="breadcrumb-item"><a href="">vd.ch</a></li>

                    <li class="breadcrumb-item"><a href="">Etat, Droit, Finances</a></li>

                    <li class="breadcrumb-item"><a href="">Impôts</a></li>

                    <li class="breadcrumb-item"><a href="https://www.vd.ch/prestation-detail/prestation/modifier-ses-acomptes-avec-e-aco-pour-les-individus-personnes-physiques/">e-ACO : Détermination / modification des acomptes</a></li>

                    <li class="sr-only" aria-current="page">Merci de vérifier vos données avant de soumettre votre demande</li>

                </ol>
            </nav>

            <h1 class="mt-0">Merci de vérifier vos données avant de soumettre votre demande</h1>
        </div>
    </div>

    <div class="container">

        <p class="h3">Etape 5 sur X</p>

        <div class="row">
            <div class="col-md-8">

                <div>
                    <h2>Informations personnelles</h2>
                    <dl>

                        <div class="row mt-2 border-bottom">
                            <dt class="col-md-4">Nom</dt>

                            <dd class="col-md-6">Clark Kent</dd>
                            <dd class="col-md-2 text-md-end"><a href="#">Modifier</a></dd>

                        </div>

                        <div class="row mt-2 border-bottom">
                            <dt class="col-md-4">Surnom</dt>

                            <dd class="col-md-6">Superman</dd>
                            <dd class="col-md-2 text-md-end"><a href="#">Modifier</a></dd>

                        </div>

                        <div class="row mt-2 border-bottom">
                            <dt class="col-md-4">Adresse</dt>

                            <dd class="col-md-6">34 Kriptionitstrasse <br>9999 Metropolis</dd>
                            <dd class="col-md-2 text-md-end"><a href="#">Modifier</a></dd>

                        </div>

                        <div class="row mt-2 border-bottom">
                            <dt class="col-md-4">Information de contact</dt>

                            <dd class="col-md-8">
                                <p>021 123 45 67</p>
                                <p>prenom.nom@email.com</p>
                            </dd>

                        </div>

                    </dl>
                </div>

                <div>
                    <h2>Détail de la demande</h2>
                    <dl>

                        <div class="row mt-2 border-bottom">
                            <dt class="col-md-4">Numéro de la précédente demande</dt>

                            <dd class="col-md-6">84659830</dd>
                            <dd class="col-md-2 text-md-end"><a href="#">Modifier</a></dd>

                        </div>

                        <div class="row mt-2 border-bottom">
                            <dt class="col-md-4">Type de license</dt>

                            <dd class="col-md-6">Personnelle</dd>
                            <dd class="col-md-2 text-md-end"><a href="#">Modifier</a></dd>

                        </div>

                        <div class="row mt-2 border-bottom">
                            <dt class="col-md-4">Période de validitée</dt>

                            <dd class="col-md-6">6 mois</dd>
                            <dd class="col-md-2 text-md-end"><a href="#">Modifier</a></dd>

                        </div>

                    </dl>
                </div>

                <h2>Vous pouvez, maintenant, soumettre votre demande</h2>

                <p>En soumettant votre demande, vous confirmer que toutes les informations
                    que vous avez saisies sont correctes.</p>
                <nav class="vd-pagination" aria-label="Pagination">
                    <ul class="vd-pagination__list">
                        <li class="vd-pagination__item vd-pagination__item--previous">
                            <a href="#" class="vd-pagination__link">
                                <span class="vd-pagination__title">
                                    <span class="fas fa-chevron-left" aria-hidden="true"></span>
                                    Page précédente
                                </span><span class="sr-only">:</span>
                                <span class="vd-pagination__label">11 sur 244</span></a>
                        </li>
                        <li class="vd-pagination__item vd-pagination__item--next">
                            <a href="#" class="vd-pagination__link">
                                <span class="vd-pagination__title">
                                    Page suivante
                                    <span class="fas fa-chevron-right" aria-hidden="true"></span>
                                </span><span class="sr-only">:</span>
                                <span class="vd-pagination__label">13 sur 244</span></a>
                        </li>
                    </ul>
                </nav>

            </div>
        </div>
    </div>
</main>

<footer class="mt-5">

    <div class="container">
        <div class="text-end">
            <a href="#" class="btn btn-sm btn-dark" title="Retour vers le haut de la page">Haut <span class="fas fa-chevron-up"></span></a>
        </div>
    </div>

    <div class="footer">
        <div class="container">
            <div class="row">
                <div class="col-xs-10">
                    <nav class="row" aria-label="pied de page">

                        <div class="col-sm">

                            <ul class="list-unstyled ">
                                <li><a href="">Contact</a></li>
                                <li><a href="">Pourquoi créer un compte</a></li>
                                <li><a href="">Mentions légales</a></li>
                            </ul>
                        </div>

                    </nav>
                </div>
                <div class="col-xs-2">
                    <div class="d-flex align-items-end flex-column h-100">
                        <div class="mt-auto w-100 end">
                            <a href="#" class="d-inline-block">
                                <span class="sr-only">Retour à la page d'accueil</span>
                                <img aria-hidden="true" class="img-fluid footer-logo" src="../../foehn/svg/logo/logo--white.svg" alt="Canton de Vaud">

                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</footer>
 
{% extends '@espace-securise--form' %}
{% block main %}

    {% render '@check-answers', check1, true %}
    {% render '@check-answers', check2, true %}

    <h2>Vous pouvez, maintenant, soumettre votre demande</h2>

    <p>En soumettant votre demande, vous confirmer que toutes les informations
    que vous avez saisies sont correctes.</p>
    {% render '@pagination', pagination, true %}

{% endblock %}
 
{
  "header": {
    "applicationTitle": "e-ACO : Détermination / modification des acomptes"
  },
  "pageTitle": {
    "pageTitle": {
      "text": "Merci de vérifier vos données avant de soumettre votre demande"
    },
    "breadcrumb": {
      "breadcrumb": [
        {
          "page": "vd.ch"
        },
        {
          "page": "Etat, Droit, Finances"
        },
        {
          "page": "Impôts"
        },
        {
          "page": "e-ACO : Détermination / modification des acomptes",
          "url": "https://www.vd.ch/prestation-detail/prestation/modifier-ses-acomptes-avec-e-aco-pour-les-individus-personnes-physiques/"
        },
        {
          "page": "Merci de vérifier vos données avant de soumettre votre demande",
          "url": "#"
        }
      ]
    }
  },
  "stepTitle": "Titre de l'étape",
  "stepNumber": "Etape 5 sur X",
  "check1": {
    "title": {
      "text": "Informations personnelles"
    },
    "items": [
      {
        "question": "Nom",
        "answer": "Clark Kent",
        "url": "#"
      },
      {
        "question": "Surnom",
        "answer": "Superman",
        "url": "#"
      },
      {
        "question": "Adresse",
        "answer": "34 Kriptionitstrasse <br>9999 Metropolis",
        "url": "#"
      },
      {
        "question": "Information de contact",
        "answer": "<p>021 123 45 67</p><p>prenom.nom@email.com</p>"
      }
    ]
  },
  "check2": {
    "title": {
      "text": "Détail de la demande"
    },
    "items": [
      {
        "question": "Numéro de la précédente demande",
        "answer": "84659830",
        "url": "#"
      },
      {
        "question": "Type de license",
        "answer": "Personnelle",
        "url": "#"
      },
      {
        "question": "Période de validitée",
        "answer": "6 mois",
        "url": "#"
      }
    ]
  }
}

No notes defined.