Skip to main content

ns-testimonial

Introduction#

The ns-testimonial component is used to display all the lovely things that people say about us.

The testimonial should be used as an enticement to buy British Gas products and services. It works by providing the customer with confidence.

Content guidance#

Labelled diagram of the ns-testimonial component

KeyField typeGuidelines
AQuoteVerbatim comment by the author. This should be positive and giving confidence to others. Avoid sarcastic comments.
BAuthor (name/handle)The name or handle of the author that provided the quote. Consider if it is suitable - some pseudo names may be inappropriate.
CMediumThe name of the platform that the author originally used to leave their message eg. twitter. (Also see citeUrl below).

Best practice#

๐Ÿ’š Do's๐Ÿ’” Don'ts
Use a single sentenceUse multiple paragraphs
Use <b> to highlight key phrasesLink to a live twitter handle
Use positive feedbackInclude anything negative, rude or which may be misconstrued
Use multiple quotes in a rowInclude any personal information beyond first name or twitter handle

Considerations of best practice#

Use within ns-column to display the desired layout of multiple testimonials.

Example showing multiple testimonials layout using ns-column

Usage#

View example on Storybook

Component placement#

The ns-testimonial component can only be used in the ns-column component.

Specification#

AttributePropertyTypeDefaultOptionsDescription
cite-urlciteUrlstringThis attribute should point to information explaining the context or the reference for the quote.
authorauthorstringThe name or handle of the author that provided the quote.
mediummediumstringThe name of the platform that the author used to leave their message eg. twitter.
SlotsType
quotep tag

Feedback#

  • Do you have insights or concerns to share? You can raise an issue via Github bugs.
  • See all the issues already raised via Github issues.

๐Ÿ’ฉ ๐ŸŽ‰ ๐Ÿฆ„ If you have any questions, contact us on Microsoft Teams in the Nucleus Design System channels.