Web services

Highlight callouts

About this component

Use highlight callouts to highlight interesting facts, testimonials, or other information related to the page. Their content shouldn’t be necessary or part of the core content.

Highlight?callouts are different from other types of callouts because they:

  • Display information that is related to the page but isn’t part of the page’s core content.
Styling

Highlight callouts have green headings. They are generally 50% width and aligned to the right, but don’t have to be. Highlight callouts are usually located in the main callout area, but can be used in the sidebar below the navigation menu.

Including an image is optional, but the image must be small and floated to the right (see image sizing and alignment). Full-width callout images are reserved for info callouts.

Responsive behavior for Highlight callouts

None by default. If using a 50% width callout, it stretches to 100% width on small screens.

How to use for Highlight callouts

Use the callout shortcode with class="highlight". Use a blockquote when creating a testimonial highlight callout.

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

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

<div class="highlight">  <!-- optional: class="callout-50" -->
  <h4>Callout heading</h4> <!-- or <h5> or <h6> -->
  <img src="" alt="" class="alignright size-percent-25" /> <!-- optional -->
  <p>Callout content</p> <!-- either regular content... -->
  <blockquote>Quote text <cite>Quote citation</cite></blockquote> <!-- ...or a quote -->
</div>
Example of Highlight callouts
Testimonial

This is a quote in a testimonial callout. Highlight callouts are great for testimonials. You can put them in the main content area or in the sidebar.

Person who said the quote

Related components