diff --git a/components/alert/assets/Alert.scss b/components/alert/assets/Alert.scss index 4b52863f..87bd60b9 100644 --- a/components/alert/assets/Alert.scss +++ b/components/alert/assets/Alert.scss @@ -28,4 +28,8 @@ @include govuk-font(24, 'bold'); @include govuk-responsive-margin(3, "bottom"); } + + a:not(.govuk-button){ + font-weight: bold; + } } diff --git a/components/alert/spec/Alert.stories.mdx b/components/alert/spec/Alert.stories.mdx index 8cc2fc77..711ba075 100644 --- a/components/alert/spec/Alert.stories.mdx +++ b/components/alert/spec/Alert.stories.mdx @@ -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. @@ -83,7 +85,7 @@ 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. @@ -91,6 +93,8 @@ If the alert is about people, make sure your content is dynamic and personalised 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