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-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">- 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
comments
You’re looking at the new transfer site! Let us know if you have questions or feedback.