Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Alert style fix and plain english page error fix #591

Merged
merged 8 commits into from
Aug 7, 2024
4 changes: 4 additions & 0 deletions components/alert/assets/Alert.scss
Original file line number Diff line number Diff line change
Expand Up @@ -28,4 +28,8 @@
@include govuk-font(24, 'bold');
@include govuk-responsive-margin(3, "bottom");
}

a:not(.govuk-button){
font-weight: bold;
}
}
6 changes: 5 additions & 1 deletion 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 Down Expand Up @@ -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
Loading