Web services

Feedback callouts

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.

Styling

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.

Responsive behavior

No change.

Development info
  • Stylesheet location: /_source/styles/components/_callouts.scss
  • 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:webteam@pcc.edu">Let us know</a> if you have questions, feedback, or praise.</p>
</div>

Feedback callout example