Quote Highlight

A quote highlight can be used to highlight a particular quote from a customer or Wiser.

Quote Highlight pattern
When to use

The Quote Highlight can be used to feature a particular quote from a customer of Wiser on the page. It should be used only once on the page. If more quotes or reviews need to be shown, you can use the Carousel component.

  • It has a minimum height to ensure the best visual results for short quotes
  • Don't use very long or full quotes

Quote Highlight pattern with correct UX

It has a minimum height to ensure the best visual results for short quotes

Quote Highlight pattern with incorrect UX

Don't use very long or full quotes

Content & localisation

To ensure that the Quote Highlight component remains visually appealing and accommodates different languages, adhere to the following content limitations:

  • Headline: The headline should be short and precise. Ideally fitting across two lines.

  • Body Copy: The body copy should be precise and clear, keeping in line with our tone of voice. Avoid adding paragraphs of text that might overwhelm the user.

By following these guidelines, you ensure that the Quote Highlight component can comfortably accommodate different languages while maintaining a consistent and visually pleasing design.

Quote Highlight pattern in another language
Translated length +20%
Responsive layout

These are the examples of the Quote Highlight component across different screen sizes.

Quote Highlight pattern on mobile
Mobile - 390px
Quote Highlight pattern on tablet
Tablet - 768px
Quote Highlight pattern on desktop
Desktop - 768px