1. Collections Component Guide
  2. Contextual guidance
  3. Default
Contextual guidance example

Default

Reveals a contextul 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 %>
  <div class="govuk-form-group">
  <label class="gem-c-label govuk-label" for="news-title">News title</label>
  <input id="news-title" type="text" class="gem-c-input govuk-input" aria-describedby="news-title-guidance">
</div>
<% end %>