Skip to main content



A new component 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.

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
Include any personal information beyond first name or twitter handle

Considerations of best practice#


View example on Storybook

Component placement#

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


citeUrlstringThis attribute should point to information explaining the context or the reference for the quote.
authorstringThe name or handle of the author that provided the quote.
mediumstringThe name of the platform that the author used to leave their message eg twitter.
quotestringWhat the author wrote or said.

Design Tokens

You can change the branded look and feel of the ns-testimonial by modifying these options in the design tokens.

Read more about design tokens in our getting started guide.

  "theme": "white",
  "spacer": {
    "inside-top": "0.75rem"
  "quote": {
    "typography": "p-small",
    "spacer": {
      "inside-top": "2.5rem",
      "inside-right": "1.25rem",
      "inside-bottom": "2.5rem",
      "inside-left": "1.25rem",
      "outside-bottom": "1.5rem"
  "author": {
    "typography": "p-small-bold",
    "spacer": {
      "outside-top": "0.25rem"
  "icon": {
    "background-color": "#005EB8",
    "fill": "#FFFFFF"
  "drop-shadow": [
    "0px 0px 3px rgba(51, 51, 51, 0.1)",
    "-10px 10px 10px rgba(170, 170, 170, .2)"


  • 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.