<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>
</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="#">level 1</a></li>
<li class="breadcrumb-item"><a href="#">level 2</a></li>
<li class="breadcrumb-item"><a href="#">level 3</a></li>
<li class="sr-only" aria-current="page">level 4</li>
</ol>
</nav>
<h1 class="mt-0">Page title</h1>
</div>
</div>
<div class="container">
<p class="h3">Etape X sur Y</p>
<div class="row">
<div class="col-md-8">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, obcaecati veritatis ipsam officia necessitatibus fuga, tempora vel unde libero soluta excepturi? Cumque dolorem, atque soluta. Obcaecati vel vero ipsam corporis.</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>
Précédent
</span><span class="sr-only">:</span>
<span class="vd-pagination__label">Nom de l'étape précédente</span></a>
</li>
<li class="vd-pagination__item vd-pagination__item--next">
<a href="#" class="vd-pagination__link">
<span class="vd-pagination__title">
Suivant
<span class="fas fa-chevron-right" aria-hidden="true"></span>
</span><span class="sr-only">:</span>
<span class="vd-pagination__label">Nom de l'étape suivante</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>
{% render '@header-application--default', header, true %}
{% render '@login--logged', { styleModifier: 'container text-end mb-3' }, true %}
<main id="main">
{% render '@page-title-banner', pageTitle, true %}
<div class="container">
{% if stepNumber %}
<p class="h3">{{ stepNumber }}</p>
{% endif %}
<div class="row">
<div class="col-md-8">
{% block main %}
{% render '@paragraph' %}
{% render '@pagination', pagination, true %}
{% endblock %}
</div>
</div>
</div>
</main>
{% render '@footer--securise' %}
{
"stepTitle": "Titre de l'étape",
"stepNumber": "Etape X sur Y",
"pagination": {
"pages": {
"previous": {
"url": "#",
"title": "Précédent",
"label": "Nom de l'étape précédente"
},
"next": {
"url": "#",
"title": "Suivant",
"label": "Nom de l'étape suivante"
}
}
},
"navigation": {
"title": "Menu",
"items": [
{
"text": "rerum aspernatur voluptas",
"title": "autem deleniti voluptate",
"url": "http://pauline.org",
"active": null
},
{
"text": "velit recusandae ducimus",
"title": "quis molestias perferendis",
"url": "http://julien.org",
"active": null
},
{
"text": "nobis sunt quas",
"title": "aut ducimus voluptatem",
"url": "https://laura.net",
"active": null
},
{
"text": "aut doloribus est",
"title": "maiores harum alias",
"url": "https://julien.fr",
"active": true
},
{
"text": "tempore alias eius",
"title": "et iure beatae",
"url": "http://nicolas.net",
"active": null
}
]
}
}
No notes defined.