Création de compte sur [Nom de service-site]
Chapô — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et.
Intitulé
officiel
Nom du site / service
baseline - précisions sur l‘organisation
Chapô — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et.
<main role="main" id="content">
<div class="fr-container fr-mt-8v fr-mt-md-14v fr-mb-2v fr-mb-md-8v">
<div class="fr-grid-row fr-grid-row--gutters fr-grid-row--center">
<div class="fr-col-12 fr-col-md-10 fr-col-lg-8">
<h2>Création de compte sur [Nom de service-site]</h2>
<p class="fr-text--lead">Chapô — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et.</p>
</div>
</div>
</div>
<div class="fr-container fr-container--fluid fr-mb-md-14v">
<div class="fr-grid-row fr-grid-row-gutters fr-grid-row--center">
<div class="fr-col-12 fr-col-md-10 fr-col-lg-8">
<div class="fr-container fr-background-alt--grey fr-px-md-0 fr-pt-10v fr-pt-md-14v fr-pb-6v fr-pb-md-10v">
<div class="fr-grid-row fr-grid-row-gutters fr-grid-row--center">
<div class="fr-col-12 fr-col-md-10 fr-col-lg-9">
<div class="fr-stepper">
<h3 class="fr-stepper__title">
<span class="fr-stepper__state">Étape 3 sur 3</span>
Saisir des coordonnées
</h3>
<div class="fr-stepper__steps" data-fr-current-step="3" data-fr-steps="3"></div>
</div>
<hr>
<div>
<form class="fr-mb-0" id="identity">
<fieldset class="fr-mb-0 fr-fieldset" id="identity-fieldset" aria-labelledby="identity-fieldset-legend identity-fieldset-messages">
<legend class="fr-fieldset__legend" id="identity-fieldset-legend">
<h5>Coordonnées personnelles</h5>
</legend>
<div class="fr-fieldset__element">
<span class="fr-hint-text">Sauf mention contraire, tous les champs sont obligatoires.</span>
</div>
<div class="fr-fieldset__element">
<fieldset class="fr-fieldset" id="address-6532" aria-labelledby="address-6532-legend address-6532-messages">
<legend class="fr-sr-only" id="address-6532-legend">
Adresse postale
</legend>
<div class="fr-fieldset__element">
<div class="fr-input-group">
<label class="fr-label" for="address-6528">
Adresse
<span class="fr-hint-text">Numéro et voie</span>
</label>
<input class="fr-input" aria-describedby="address-6528-messages" name="address-line1" autocomplete="address-line1" id="address-6528" type="text">
<div class="fr-messages-group" id="address-6528-messages" aria-live="assertive">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div class="fr-input-group">
<label class="fr-label" for="complement-6529">
Complément d’adresse (optionnel)
<span class="fr-hint-text">Bâtiment, immeuble, escalier et numéro d’appartement</span>
</label>
<input class="fr-input" aria-describedby="complement-6529-messages" name="address-line2" autocomplete="address-line2" id="complement-6529" type="text">
<div class="fr-messages-group" id="complement-6529-messages" aria-live="assertive">
</div>
</div>
</div>
<div class="fr-fieldset__element fr-fieldset__element--inline fr-fieldset__element--postal">
<div class="fr-input-group">
<label class="fr-label" for="postal-6530">
Code postal
</label>
<input class="fr-input" aria-describedby="postal-6530-messages" name="postal-code" autocomplete="postal-code" id="postal-6530" type="text">
<div class="fr-messages-group" id="postal-6530-messages" aria-live="assertive">
</div>
</div>
</div>
<div class="fr-fieldset__element fr-fieldset__element--inline@md fr-fieldset__element--inline-grow">
<div class="fr-input-group">
<label class="fr-label" for="city-6531">
Ville ou commune
</label>
<input class="fr-input" aria-describedby="city-6531-messages" name="address-level2" autocomplete="address-level2" id="city-6531" type="text">
<div class="fr-messages-group" id="city-6531-messages" aria-live="assertive">
</div>
</div>
</div>
<div class="fr-messages-group" id="address-6532-messages" aria-live="assertive">
</div>
</fieldset>
</div>
<div class="fr-fieldset__element">
<ul class="fr-mt-2v fr-btns-group fr-btns-group--between fr-btns-group--inline fr-btns-group fr-btns-group--between fr-btns-group--inline">
<li>
<button class="fr-btn fr-btn--secondary">
Précédent
</button>
</li>
<li>
<button class="fr-btn" type="submit">
Valider
</button>
</li>
</ul>
</div>
<div class="fr-messages-group" id="identity-fieldset-messages" aria-live="assertive">
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>