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.

Warning text with a text argument

Input

= govuk_warning_text(text: "You can be fined up to £5,000 if you do not register.")

<%= govuk_warning_text(text: "You can be fined up to £5,000 if you do not register.") %>

Output

<div class="govuk-warning-text">
  <span class="govuk-warning-text__icon" aria-hidden="true">
    !
  </span>
  <strong class="govuk-warning-text__text">
    <span class="govuk-visually-hidden">
      Warning
    </span>
    You can be fined up to £5,000 if you do not register.
  </strong>
</div>

Warning text provided by a block with custom icon fallback text

Input

= govuk_warning_text(icon_fallback_text: "Danger") do
  | You can be fined up to £5,000 if you do not register.

<%= govuk_warning_text(icon_fallback_text: "Danger") do %>You can be fined up to £5,000 if you do not register.
<% end %>

Output

<div class="govuk-warning-text">
  <span class="govuk-warning-text__icon" aria-hidden="true">
    !
  </span>
  <strong class="govuk-warning-text__text">
    <span class="govuk-visually-hidden">
      Danger
    </span>
    You can be fined up to £5,000 if you do not register.
  </strong>
</div>