Quote Block

The Quote block is used to display text quoted from another source. It is typically represented in a visually distinct style.

Data Structure

The Notion API data structure for a Quote block is as follows:

{
  "type": "quote",
  "quote": {
    "rich_text": [
      {
        "type": "text",
        "text": {
          "content": "This is a quote",
          "link": null
        },
        "annotations": {
          "bold": false,
          "italic": false,
          "strikethrough": false,
          "underline": false,
          "code": false,
          "color": "default"
        },
        "plain_text": "This is a quote",
        "href": null
      }
    ],
    "color": "default"
  }
}

• rich_text: An array containing the text content and style information of the quote.
• color: Specifies the color of the quote.

React Component

The component that renders the Quote block in Notionpresso is as follows:

import React from "react";
import type { QuoteArgs } from "../types";
import { getColorCss } from "../utils";
import RichText from "./internal/rich-text";


type QuoteProps = {
children?: React.ReactNode;
} & QuoteArgs;




const Quote: React.FC<QuoteProps> = ({ children, ...props }) => {
const {
quote: { color, rich_text: texts },
} = props;




return (
<div className={notion-block notion-quote ${getColorCss(color)}}>
<div className="notion-quote-content">
<p>
<RichText props={texts} />
</p>
{children}
</div>
</div>
);
};




export default Quote;
export default Quote;

Usage Example

Here's an example of how to use the Quote block:

import { Notion } from "@notionpresso/react";


function MyNotionPage({ blocks }) {
return (
<Notion>
<Notion.Blocks blocks={blocks} />
</Notion>
);
}
function MyNotionPage({ blocks }) {
return (
<Notion>
<Notion.Blocks blocks={blocks} />
</Notion>
);
}

Here, blocks is an array of block data received from the Notion API.

Styling

The style of the Quote block can be customized through the following CSS classes:

• .notion-block: Basic style applied to all Notion blocks
• .notion-quote: Specific style for Quote blocks
• .notion-quote-content: Style for the content of the quote

If additional styling is needed, you can write CSS targeting these classes. Typically, Quote blocks have the following style characteristics:

• Thick border on the left or both sides
• Slight indentation
• Changed background color
• Changed font style (e.g., italics)

For example, you can apply the following CSS:

.notion-quote {
  border-left: 4px solid #ccc;
  padding-left: 16px;
  margin-left: 0;
  margin-right: 0;
  font-style: italic;
  background-color: #f9f9f9;
}

Nesting Support

Quote blocks can contain other blocks. This is handled through the children prop. For example, you can include lists or other text blocks within a quote.

Notes

• Quote blocks are generally used for short quotations. For longer quotes, it might be better to split them into multiple Quote blocks for readability.
• It's good practice to specify the source of the quote. This can be added as a separate Paragraph block below the Quote block.
• For accessibility, it's recommended to add appropriate ARIA attributes for screen reader users. For example, you can use the role="blockquote" attribute.