Contextual guidance example

Default

Reveals a contextual guidance on the side overflowing the container

How it looks (preview)

Writing a news title

The title must make clear what the content offers users. Use the words your users do to help them find this. Avoid wordplay or teases.

How to call this example

<%= render "govuk_publishing_components/components/contextual_guidance", {
  html_for: "news-title",
  title: "Writing a news title",
  guidance_id: "news-title-guidance",
  content: sanitize("<p>The title must make clear what the content offers users. Use the words your users do to help them find this. Avoid wordplay or teases.</p>
    ")
} do %>
  <!-- example content -->
  <%= render "govuk_publishing_components/components/input", { 
      label: {
        text: "News title"
      },
      name: "news-title",
      id: "news-title",
      describedby: "news-title-guidance"
    } 
  %>
  <!-- end of example content -->
<% end %>