How to make a quote in a paragraph in rich text?

hellokrittech · April 3, 2021, 4:08pm

I am using "gatsby-source-prismic": "^3.3.3",.

I did not see a quote in rich text but I found this instruction and I already did it.
I went back to create a post in the document using this custom type. I do not understand how this
custom type being use in a paragraph like example below.

The idea is to come across as

pleasantly persistent

Sales experts like Steli Efti recommend a maximum of six touches for completely cold prospects.

I use Gatsby. Do I have to add a JSON un a config file first so I can see a quote in rich text? Can anyone tell me how to make a quote in a paragraph in rich text? Overall setup and usage are confusing. I wish it has a text editor like what we are using here.

Thank you!

hellokrittech · April 6, 2021, 1:17pm

Can anyone from Prismic answer this question please? @levi

Phil · April 6, 2021, 3:54pm

Hi Krittiya,

You said:

But you didn't link anything, which tutorial are you following?

Thanks.

hellokrittech · April 6, 2021, 7:47pm

Sorry - this is a link How to add a quote to your page | Prismic Help Center

Phil · April 7, 2021, 9:16am

Hi Krittiya,

Thank you. OK, so you should have a Slice now that is used ONLY for quotes, that means in the front end of your website you will need to style the output of this Rich Text with CSS so that it appears as a quote.

You can then build your page with these Slices like so:
[Normal Rich Text]
[Quote Rich Text]
[Normal Rich Text]

I don't have a Gatsby example, but this is what the Quote Slice looks like in plain React:

github.com

prismicio/reactjs-website/blob/master/src/components/slices/Quote.js

import React from 'react';
import { RichText } from 'prismic-reactjs';

/**
 * Quote slice component
 */
const Quote = ({ slice }) => (
  <section className="content-section quote">
    <blockquote>
      {RichText.asText(slice.primary.quote_text)}
    </blockquote>
  </section>
);

export default Quote;

hellokrittech · April 7, 2021, 7:03pm

Thank you!

I still do not understand how to make a quote inside a paragraph.
I attached screenshots what I have in Prismic & query.

Phil · April 9, 2021, 8:49am

Hi Krittiya,

This example only works when you building your whole page with Slices because you layer them on top of each other. Your current structure won't allow a quote by just adding one Slice, you need to break your entire page into Slices for this to work. Like that you can dynamically build a page.

You can read more about Slices here:

I would also recommend checking out our Gatsby Blog example which is built with Slices:

Or follow our Step By Step guide for Gatsby & Prismic:

Thanks.