Component

Inset prompt

A prompt to users represented as inset content

This is similar to the inset text component, however it has more of an emphasis of informing a user they need to take an action.

Search for usage of this component on GitHub.

How it looks (preview) (preview all)

Please meet these requirements before publishing

Document needs a summary before publishing (at least 10 characters)

How to call this component

<%= render "components/inset_prompt", {
  title: "Please meet these requirements before publishing",
  description: "Document needs a summary before publishing (at least 10 characters)"
} %>

Accessibility acceptance criteria

Links in the component must:

  • accept focus
  • be focusable with a keyboard
  • be usable with a keyboard
  • indicate when they have focus
  • change in appearance when touched (in the touch-down state)
  • change in appearance when hovered
  • be usable with touch
  • be usable with voice commands
  • have visible text
  • have meaningful text

Other examples

With items (preview)

Message to alert the user to a problem goes here

<%= render "components/inset_prompt", {
  title: "Message to alert the user to a problem goes here",
  items: [
    {
      text: "Document needs a title before publishing (at least 10 characters)",
      href: "#content",
      data_attributes: {
        tracking: "GTM-123AA"
      }
    },
    {
      text: "Document needs a summary before publishing (at least 10 characters)",
      data_attributes: {
        tracking: "GTM-123AB"
      }
    }
  ]
} %>

Error (preview)

There is a problem

‘Title here’ was not published

<%= render "components/inset_prompt", {
  error: true,
  title: "There is a problem",
  description: sanitize("<p class=\"govuk-body\">&lsquo;Title here&rsquo; was not published</p>
    ")
} %>

With data attributes (preview)

Message to alert the user to a problem goes here

  • Descriptive link to the question with an error 1 
<%= render "components/inset_prompt", {
  title: "Message to alert the user to a problem goes here",
  data_attributes: {
    tracking: "GTM-123AB"
  },
  items: [
    {
      text: "Descriptive link to the question with an error 1"
    }
  ]
} %>