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)

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:

• Warning-text

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

Standard options

This component uses the component wrapper helper. It accepts the following options and applies them to the parent element of the component. See the component wrapper helper documentation for more detail.

• id - accepts a string for the element ID attribute
• data_attributes - accepts a hash of data attributes
• aria - accepts a hash of aria attributes
• classes - accepts a space separated string of classes, these should not be used for styling and must be prefixed with js-
• margin_bottom - accepts a number from 0 to 9 (0px to 60px) using the GOV.UK Frontend spacing scale (defaults to no margin)
• role - accepts a space separated string of roles
• lang - accepts a language attribute value
• open - accepts an open attribute value (true or false)
• hidden - accepts an empty string, ‘hidden’, or ‘until-found’
• tabindex - accepts an integer. The integer can also be passed as a string
• dir - accepts ‘rtl’, ‘ltr’, or ‘auto’
• type - accepts any valid type attribute e.g. ‘button’, ‘submit’, ‘text’
• rel - accepts any valid rel attribute e.g. ‘nofollow’
• target - accepts a valid target attribute e.g. ‘_blank’
• title - accepts any string
• draggable - accepts a draggable attribute value (“true” or “false”)

Custom assistive text (preview)

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)

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)

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)

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)

This content has changed

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

As a heading (preview)

This is a heading 3

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