Skip to main content

Callout

The callout component is used to capture users' attention of an excerpt, testimonial, or a quote cited from the article or other sources. The design style makes the quoted section more distinguishable than the rest of the content in the web page.

Do's​

  • always name the source of the quoted content
  • limit the quote to no longer than 80 characters
  • use the image variant to add a portrait of the quoted person

Don'ts​

  • do not apply more than two callout components on the webpage
  • for the image variant, do not use a photoshopped composition of images

When to use​

  • quoting something important

When not to use​

  • to emphasize text style