Guidance
When we ask users for their driver’s licence number, we want to tell them up front where to find it. For users that need more help, we provide a photo of the front of the New Brunswick driver’s licence card to show where this number can be found.
Currently, some New Brunswicker's still have the old style card so we need to show an image of both in the modal content until those older cards have all expired. When they do, this component will be updated to reflect this.
Component
Your driver’s licence number is 7 digits long and can be found on the front of your card.
HTML
<label for="first-name"><a tabindex="0" data-target="modal-driverslicence" aria-haspopup="dialog"
aria-controls="modal-driverslicence" class="modal-button info">Driver’s licence number</a></label>
<div class="gnb-form-helper-text">
Your driver’s licence number is 7 digits long and can be found on the front of your card.
</div>
<input type="text" name="first-name" id="first-name" />
<!-- Field info modal dialog - place this OUTSIDE any <form> element in your 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">Close modal window</span><i class="fa-solid fa-xmark"></i></button>
<div class="gnb-modal-header">
<h2 id="modal-title-driverslicence">Driver’s licence number</h2>
</div>
<div class="gnb-modal-body" id="modal-description-driverslicence">
<p>
Your driver’s licence number is 7 digits and can be found on the front of your card.
</p>
<div class="row">
<div class="col-sm-6 center">
<img src="../../img/nb-licence-number.jpg"
alt="New Brunswick driver’s licence card with number highlighted" />
</div>
<div class="col-sm-6 center">
<img src="../../img/nb-licence-number-old.jpg"
alt="Old style New Brunswick driver’s licence card with number highlighted" />
</div>
</div>
</div>
</dialog>
</div>
<!-- Add this at the bottom of your page before the closing body tag -->
<script src="gnb-modals-1.0.0.js"></script>