Feedback

Feedback 📸

Open this example in a new tab

Code

Markup

<div class="govuk-feedback govuk-width-container">
  <div class="govuk-grid-row">
    <div class="govuk-grid-column-two-thirds">
      <h2 class="govuk-feedback__title">
        Help us improve this service
      </h2>
        <div class="govuk-feedback__body">
            <p class="govuk-body">Tell us about your experience using this service. <a href="#" class="govuk-link">Give us your feedback</a></p>
        </div>
    </div>
  </div>
</div>

Macro

{% from "govuk/components/feedback/macro.njk" import govukFeedback %}

{{ govukFeedback({
  titleText: "Help us improve this service",
  html: '<p class="govuk-body">Tell us about your experience using this service. <a href="#" class="govuk-link">Give us your feedback</a></p>\n'
}) }}

Feedback silly example

In reality we'd recommend users only use the default example but this is to illustrate if a service team decides they want to add a lot of content

Open this example in a new tab

Code

Markup

<div class="govuk-feedback govuk-width-container">
  <div class="govuk-grid-row">
    <div class="govuk-grid-column-two-thirds">
      <h2 class="govuk-feedback__title">
        Help us improve this service
      </h2>
        <div class="govuk-feedback__body">
            <p class="govuk-body">Tell us about your experience using this service.</p>
    <p class="govuk-body">Click this cool link to <a href="#" class="govuk-link">give us your feedback</a>.</p>
    <p class="govuk-body">There's another paragraph here.</p>
    <ul class="govuk-list govuk-list--bullet">
      <li>There is also a list</li>
      <li>With items in</li>
      <li>How strange!</li>
    </ul>
        </div>
    </div>
  </div>
</div>

Macro

{% from "govuk/components/feedback/macro.njk" import govukFeedback %}

{{ govukFeedback({
  titleText: "Help us improve this service",
  html:
    '<p class="govuk-body">Tell us about your experience using this service.</p>\n' +
    '<p class="govuk-body">Click this cool link to <a href="#" class="govuk-link">give us your feedback</a>.</p>\n' +
    `<p class="govuk-body">There's another paragraph here.</p>\n` +
    '<ul class="govuk-list govuk-list--bullet">\n' +
    "  <li>There is also a list</li>\n" +
    "  <li>With items in</li>\n" +
    "  <li>How strange!</li>\n" +
    "</ul>\n"
}) }}