Feedback callouts

About this component

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 are light blue (including the content area), have a “comments” icon, and do a subtle fade-in animation to make them more visible. They should never be in the sidebar, are always 100% width, and shouldn’t include a heading.

How to use for Feedback callouts

Use the callout shortcode with class="info feedback". Include a comments icon using the icon shortcode.

欧洲杯决赛竞猜app_欧洲杯足球网-投注|官网ment info for Feedback callouts

Stylesheet location: /_source/homepage/styles/_cards.scss

Make sure there isn’t a paragraph break between the opening callout shortcode tag and the icon shortcode, because WordPress will add space above the image. Edit the code view to remove the space, or add the line break with shift + cmd or shift + ctrl.

<div class="info feedback card">
  <i class="fa-solid fa-comments"></i>
  <p>Text</p>
</div>
Example of Feedback callouts