Pour commencer

Accédez aux outils et aux éléments de base qui permettent de concevoir et de mettre au point des expériences cohérentes et accessibles.

Développer Conception

Numéro de permis de conduire

Comment demander le numéro de permis de conduire.

Conseils

Lorsque nous demandons aux utilisateurs leur numéro de permis de conduire, nous voulons leur dire d'emblée où le trouver. Pour les utilisateurs qui ont besoin de plus d'aide, nous fournissons une photo du recto de la carte de permis de conduire du Nouveau-Brunswick pour montrer où se trouve ce numéro.

Actuellement, certains Néo-Brunswickois possèdent encore l'ancienne carte. Nous devons donc montrer une image des deux dans le contenu modal jusqu'à ce que ces anciennes cartes aient toutes expiré. Lorsqu'elles le seront, ce composant sera mis à jour pour en tenir compte.


Component

Le numéro de votre permis de conduire est composé de 7 chiffres et se trouve au recto de votre carte.

HTML

<label for="first-name"><a tabindex="0" data-target="modal-driverslicence" aria-haspopup="dialog"
	aria-controls="modal-driverslicence" class="modal-button info">Numéro de permis de conduire</a></label>
<div class="gnb-form-helper-text">
Le numéro de votre permis de conduire est composé de 7 chiffres et se trouve au recto de votre carte.
</div>
<input type="text" name="first-name" id="first-name" />

<!-- Boîte de dialogue modale d'informations sur les champs - placez-la à l'EXTÉRIEUR de n'importe quel élément <form> de votre page. -->
<div class="gnb-modal" id="modal-driverslicence" role="dialog" aria-modal="true"
aria-labelledby="modal-title-driverslicence" aria-describedby="modal-description-driverslicence">
<dialog>
	<button class="gnb-btn-close close-modal-button" data-target="modal-driverslicence"><span
			class="sr-only">Fermer la fenêtre modale</span><i class="fa-solid fa-xmark"></i></button>
	<div class="gnb-modal-header">
		<h2 id="modal-title-driverslicence">Numéro de permis de conduire</h2>
	</div>
	<div class="gnb-modal-body" id="modal-description-driverslicence">
		<p>
			Le numéro de votre permis de conduire est composé de 7 chiffres et se trouve au recto de votre carte.
		</p>
		<div class="row">
			<div class="col-sm-6 center">
				<img src="../../img/nb-licence-number.jpg"
					alt="Carte de permis de conduire du Nouveau-Brunswick avec le numéro surligné" />
			</div>
			<div class="col-sm-6 center">
				<img src="../../img/nb-licence-number-old.jpg"
					alt="Ancienne carte de permis de conduire du Nouveau-Brunswick avec le numéro surligné" />
			</div>
		</div>
	</div>
</dialog>
</div>

<!-- Ajoutez ceci en bas de votre page avant la balise de fermeture du corps -->
<script src="gnb-modals-1.0.1.js"></script>