-
Notifications
You must be signed in to change notification settings - Fork 90
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add grid and column wrappers to constrain summary boxes. These are now 2/3 of the width of the page.
- Loading branch information
1 parent
a37b20e
commit 5421fd3
Showing
2 changed files
with
89 additions
and
77 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,55 +1,61 @@ | ||
| <div class="error-summary" role="group" aria-labelledby="error-summary-heading-example-2" tabindex="-1"> | ||
| <div class="grid-row"> | ||
| <div class="column-two-thirds"> | ||
|
|
||
| <h1 class="heading-medium error-summary-heading" id="error-summary-heading-example-2"> | ||
| Message to alert the user to a problem goes here | ||
| </h1> | ||
| <div class="error-summary" role="group" aria-labelledby="error-summary-heading-example-2" tabindex="-1"> | ||
|
|
||
| <p> | ||
| Optional description of the errors and how to correct them | ||
| </p> | ||
| <h1 class="heading-medium error-summary-heading" id="error-summary-heading-example-2"> | ||
| Message to alert the user to a problem goes here | ||
| </h1> | ||
|
|
||
| <ul class="error-summary-list"> | ||
| <li><a href="#example-full-name">Descriptive link to the question with an error</a></li> | ||
| <li><a href="#example-ni-number">Descriptive link to the question with an error</a></li> | ||
| </ul> | ||
| <p> | ||
| Optional description of the errors and how to correct them | ||
| </p> | ||
|
|
||
| </div> | ||
| <ul class="error-summary-list"> | ||
| <li><a href="#example-full-name">Descriptive link to the question with an error</a></li> | ||
| <li><a href="#example-ni-number">Descriptive link to the question with an error</a></li> | ||
| </ul> | ||
|
|
||
| <h1 class="heading-large"> | ||
| Your personal details | ||
| </h1> | ||
| </div> | ||
|
|
||
| <div class="form-group form-group-error"> | ||
| <h1 class="heading-large"> | ||
| Your personal details | ||
| </h1> | ||
|
|
||
| <label for="example-full-name" id="error-full-name"> | ||
| <div class="form-group form-group-error"> | ||
|
|
||
| <span class="form-label-bold">Full name</span> | ||
| <span class="form-hint">As shown on your birth certificate or passport</span> | ||
| <span class="error-message">Error message about full name goes here</span> | ||
| <label for="example-full-name" id="error-full-name"> | ||
|
|
||
| </label> | ||
| <span class="form-label-bold">Full name</span> | ||
| <span class="form-hint">As shown on your birth certificate or passport</span> | ||
| <span class="error-message">Error message about full name goes here</span> | ||
|
|
||
| <input class="form-control form-control-error" id="example-full-name" type="text" name="fullName" value=""> | ||
| </div> | ||
| </label> | ||
|
|
||
| <div class="form-group form-group-error"> | ||
| <input class="form-control form-control-error" id="example-full-name" type="text" name="fullName" value=""> | ||
| </div> | ||
|
|
||
| <label for="example-ni-number" id="error-ni-number"> | ||
| <div class="form-group form-group-error"> | ||
|
|
||
| <span class="form-label-bold">National Insurance number</span> | ||
| <span class="form-hint"> | ||
| It’s on your National Insurance card, benefit letter, payslip or P60. | ||
| <br> | ||
| For example, ‘QQ 12 34 56 C’. | ||
| </span> | ||
| <span class="error-message"> | ||
| Error message about National Insurance number goes here | ||
| </span> | ||
| <label for="example-ni-number" id="error-ni-number"> | ||
|
|
||
| </label> | ||
| <span class="form-label-bold">National Insurance number</span> | ||
| <span class="form-hint"> | ||
| It’s on your National Insurance card, benefit letter, payslip or P60. | ||
| <br> | ||
| For example, ‘QQ 12 34 56 C’. | ||
| </span> | ||
| <span class="error-message"> | ||
| Error message about National Insurance number goes here | ||
| </span> | ||
|
|
||
| <input class="form-control form-control-error" id="example-ni-number" type="text" name="niNo" value=""> | ||
| </label> | ||
|
|
||
| </div> | ||
| <input class="form-control form-control-error" id="example-ni-number" type="text" name="niNo" value=""> | ||
|
|
||
| <input class="button" type="submit" value="Continue"> | ||
| </div> | ||
|
|
||
| <input class="button" type="submit" value="Continue"> | ||
|
|
||
| </div> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,55 +1,61 @@ | ||
| <div class="error-summary" role="group" aria-labelledby="error-summary-heading-example-1" tabindex="-1"> | ||
| <div class="grid-row"> | ||
| <div class="column-two-thirds"> | ||
|
|
||
| <h1 class="heading-medium error-summary-heading" id="error-summary-heading-example-1"> | ||
| Message to alert the user to a problem goes here | ||
| </h1> | ||
| <div class="error-summary" role="group" aria-labelledby="error-summary-heading-example-1" tabindex="-1"> | ||
|
|
||
| <p> | ||
| Optional description of the errors and how to correct them | ||
| </p> | ||
| <h1 class="heading-medium error-summary-heading" id="error-summary-heading-example-1"> | ||
| Message to alert the user to a problem goes here | ||
| </h1> | ||
|
|
||
| <ul class="error-summary-list"> | ||
| <li><a href="#example-personal-details">Descriptive link to the question with an error</a></li> | ||
| </ul> | ||
| <p> | ||
| Optional description of the errors and how to correct them | ||
| </p> | ||
|
|
||
| </div> | ||
| <ul class="error-summary-list"> | ||
| <li><a href="#example-personal-details">Descriptive link to the question with an error</a></li> | ||
| </ul> | ||
|
|
||
| <h1 class="heading-large"> | ||
| Check your personal details | ||
| </h1> | ||
| </div> | ||
|
|
||
| <p> | ||
| Look at your name, signature and other details. | ||
| </p> | ||
| <h1 class="heading-large"> | ||
| Check your personal details | ||
| </h1> | ||
|
|
||
| <form> | ||
| <div class="form-group form-group-error"> | ||
| <fieldset> | ||
| <p> | ||
| Look at your name, signature and other details. | ||
| </p> | ||
|
|
||
| <legend id="example-personal-details"> | ||
| <form> | ||
| <div class="form-group form-group-error"> | ||
| <fieldset> | ||
|
|
||
| <span class="form-label-bold"> | ||
| Are your personal details correct and up-to-date? | ||
| </span> | ||
| <span class="error-message"> | ||
| Error message about personal details goes here | ||
| </span> | ||
| <legend id="example-personal-details"> | ||
|
|
||
| </legend> | ||
| <span class="form-label-bold"> | ||
| Are your personal details correct and up-to-date? | ||
| </span> | ||
| <span class="error-message"> | ||
| Error message about personal details goes here | ||
| </span> | ||
|
|
||
| <div class="multiple-choice"> | ||
| <input id="personal_details_yes" type="radio" name="personalDetails" value="Yes"> | ||
| <label for="personal_details_yes">Yes, my personal details are correct</label> | ||
| </div> | ||
| </legend> | ||
|
|
||
| <div class="multiple-choice"> | ||
| <input id="personal_details_yes" type="radio" name="personalDetails" value="Yes"> | ||
| <label for="personal_details_yes">Yes, my personal details are correct</label> | ||
| </div> | ||
|
|
||
| <div class="multiple-choice"> | ||
| <input id="personal_details_no" type="radio" name="personalDetails" value="No"> | ||
| <label for="personal_details_no">No, some details are wrong or have changed</label> | ||
| </div> | ||
|
|
||
| <div class="multiple-choice"> | ||
| <input id="personal_details_no" type="radio" name="personalDetails" value="No"> | ||
| <label for="personal_details_no">No, some details are wrong or have changed</label> | ||
| </fieldset> | ||
| </div> | ||
|
|
||
| </fieldset> | ||
| </div> | ||
| <input class="button" type="submit" value="Continue"> | ||
|
|
||
| <input class="button" type="submit" value="Continue"> | ||
| </form> | ||
|
|
||
| </form> | ||
| </div> | ||
| </div> |