Skip to content

Commit

Permalink
pushed change which hadn't been applied before. To make links strong …
Browse files Browse the repository at this point in the history
…for alert
  • Loading branch information
benjest85 committed Jul 11, 2024
1 parent 30196c0 commit 95b4a23
Showing 1 changed file with 7 additions and 3 deletions.
10 changes: 7 additions & 3 deletions components/alert/spec/Alert.stories.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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
Expand Down

0 comments on commit 95b4a23

Please sign in to comment.