When we launch a large new feature or a redesign, we like to gather feedback. A feedback callout should accompany these changes for a few weeks after launching. Put the feedback callout at the top of the page where people will see it.
Feedback callouts are different from other types of callouts because they:
- Only appear on a page for a few weeks after a new feature launch or redesign.
- Are for major new features introduced by the Web Team.
Feedback callouts have a single solid color, rounded corners, an icon, and a subtle fade-in animation to make them more visible. They should never be in the sidebar and are always 100% width.
- Stylesheet location:
- In WordPress, these callouts need to be added in the text editor (there isn’t a shortcode).
<div class="info feedback">
- They shouldn’t include a heading.
- Use the comments Font Awesome icon – use the icon shortcode in WordPress.
<div class="info feedback"> <i class="fas fa-comments" aria-hidden="true" title="comments"></i><i class="visually-hide">comment icon</i> <p>You're looking at the new transfer site! <a href="mailto:firstname.lastname@example.org">Let us know</a> if you have questions, feedback, or praise.</p> </div>
Feedback callout example
You’re looking at the new transfer site! Let us know if you have questions or feedback.