Skip to main content

Quote Component

The Quote Component displays the text of a quote with a date and a source with special formatting. The component has three different style variations based on how many quotes are added. See the Beauty Playbook Figma for reference on the styling. The three most common will be one quote, two quotes, and three quotes.

Directions​

  • Copy the component below and paste it into content section of your BP Post in Hygraph.
  • Replace the text with the copy of your own quote.
  • Add a date and source of the quote
  • NOTE: If you want to include a clickable link in the source, you can do so with using markdown links. For example: (Aug 15, 2023 - [https://www.g2.com](https://www.g2.com))

The QuoteComponent has three different style variations depending on how many quotes you add. Use the following code:

Single Quote​

Single Quote

<QuoteComponent
  quotes={[
    {
      text: "So easy to use. We have online booking as well as a few of their other services. They now offer Gift Cards, so that should be really useful for our business.",
      dateAndSource:
        "(Aug 15, 2023 - [https://www.g2.com](https://www.g2.com))",
    },
  ]}
/>

Two Quotes​

Double Quote

<QuoteComponent
  quotes={[
    {
      text: "So easy to use. We have online booking as well as a few of their other services. They now offer Gift Cards, so that should be really useful for our business.",
      dateAndSource:
        "(Aug 15, 2023 - [https://www.g2.com](https://www.g2.com))",
    },
    {
      text: "So easy to use. We have online booking as well as a few of their other services. They now offer Gift Cards, so that should be really useful for our business.",
      dateAndSource:
        "(Aug 15, 2023 - [https://www.g2.com](https://www.g2.com))",
    },
  ]}
/>

Three Quotes​

Triple Quote

<QuoteComponent
  quotes={[
    {
      text: "So easy to use. We have online booking as well as a few of their other services. They now offer Gift Cards, so that should be really useful for our business.",
      dateAndSource:
        "(Aug 15, 2023 - [https://www.g2.com](https://www.g2.com))",
    },
    {
      text: "Most of the time the response on email for urgent issues is quick but it is annoying not having a support line to ring.",
      dateAndSource:
        "(December 14, 2023 - [https://www.capterra.com](https://www.capterra.com))",
    },
    {
      text: "It is an easy to use system once you get your head around it, has many free features that allow for the smooth running of our salon. Easy product orders and input of stock, good client information features. Would definitely recommend.",
      dateAndSource:
        "(December 1, 2024 - [https://www.capterra.com](https://www.capterra.com))",
    },
  ]}
/>
Important tip

Adding more than three quotes will wrap to the next line and start another row using a responsive grid layout.