Portland Community College | Portland, Oregon Portland Community College

Feedback callouts

When we launch a 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
  • are for major new features introduced by the Web Team

Development info

  • Stylesheet location: /source-v6/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"
  • 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>

Styling

Feedback callouts have a single solid color, rounded corners, icon and subtle fade-in animation to make them more visible. They should never be in the sidebar.

Responsive behavior

No change.