Component

Warning text

Use the warning text component when you need to warn users about something important, such as legal consequences of an action, or lack of action, that they might take.

Search for usage of this component on GitHub.

How it looks (preview) (preview all)

Warning You can be fined up to £5,000 if you don’t register.

How to call this component

<%= render "govuk_publishing_components/components/warning_text", {
  text: "You can be fined up to £5,000 if you don’t register."
} %>

GOV.UK Design System

This component incorporates components from the GOV.UK Design System:

Accessibility acceptance criteria

All text must have a contrast ratio higher than 4.5:1 against the background colour to meet WCAG AA

Other examples

Custom assistive text (preview)

Danger You can be fined up to £5,000 if you don’t register.
<%= render "govuk_publishing_components/components/warning_text", {
  text_assistive: "Danger",
  text: "You can be fined up to £5,000 if you don’t register."
} %>

Custom icon text (preview)

Warning You can be fined up to £5,000 if you don’t register.
<%= render "govuk_publishing_components/components/warning_text", {
  text_icon: "£",
  text: "You can be fined up to £5,000 if you don’t register."
} %>

Without icon (preview)

Warning You can be fined up to £320 if you don't register.
<%= render "govuk_publishing_components/components/warning_text", {
  text_icon: "",
  text: "You can be fined up to £320 if you don't register."
} %>

With larger font (preview)

Warning This content was updated on the 24th of November 2018
<%= render "govuk_publishing_components/components/warning_text", {
  text: "This content was updated on the 24th of November 2018",
  large_font: true
} %>

With red font (preview)

Warning This content has changed
<%= render "govuk_publishing_components/components/warning_text", {
  text: "This content has changed",
  highlight_text: true
} %>

As a heading (preview)

Warning This is a heading 3

<%= render "govuk_publishing_components/components/warning_text", {
  text: "This is a heading 3",
  heading_level: 3
} %>