-
Notifications
You must be signed in to change notification settings - Fork 22
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
pushed change which hadn't been applied before. To make links strong …
…for alert
- Loading branch information
Showing
1 changed file
with
7 additions
and
3 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 |
---|---|---|
|
@@ -27,6 +27,8 @@ Alert users to important information. | |
|
||
<Props of={ Alert } /> | ||
|
||
|
||
|
||
## When to use this component | ||
|
||
Use alerts to inform users that something important has happened, notify them of a success or failure or to take action. | ||
|
@@ -50,7 +52,7 @@ Use the green version of the alert to confirm that something they’re expecting | |
<Preview> | ||
<Story name="Success"> | ||
<Alert heading="Payment successful" classModifiers="success"> | ||
We've sent details to [email protected] <br /><a href="#">Download confirmation</a> | ||
We've sent details to [email protected] <br /><strong><a href="#">Download confirmation</a></strong> | ||
</Alert> | ||
</Story> | ||
</Preview> | ||
|
@@ -62,7 +64,7 @@ Use the red version of the alert to confirm that something has gone wrong. | |
<Preview> | ||
<Story name="Error"> | ||
<Alert heading="Payment unsuccessful" classModifiers="error"> | ||
Please try again or contact our <a href="#">support team</a> for assistance. | ||
Please try again or contact our <strong><a href="#">support team</a></strong> for assistance. | ||
</Alert> | ||
</Story> | ||
</Preview> | ||
|
@@ -83,14 +85,16 @@ Try to keep alerts to one or two lines of text and not necessarily in full sente | |
|
||
Tell users what to do next. If you can, give them a link that will take them directly to further support or the next action. | ||
|
||
Only use bold for headings. | ||
Only use bold for headings and links. | ||
|
||
If the alert is about people, make sure your content is dynamic and personalised. Use ‘person’ when it’s about one person and ‘people’ for more than one and include names if you can. | ||
|
||
## Accessibility | ||
|
||
All users benefit from clear, visible notification messages which are presented in a consistent, predictable way. See the <a href="/accessibility/notifications">notifications guidance</a> for more information. | ||
|
||
Make the link text bold so that it contrasts enough with the background colours. | ||
|
||
In the Atlas caseworking system, it was found this alert should sit under the H1 heading level. | ||
|
||
## Research | ||
|