# Quote

A quotation with an optional attribution.



## The block

As the API returns it, from the [example article](https://api.seoforsaas.dev/public/v1/fixtures/article):

```json
{
  "type": "quote",
  "content": [
    {
      "text": "Our goal is to organize the world’s information and make it universally accessible and useful."
    }
  ],
  "attribution": "Google’s mission statement",
  "id": "quote-11"
}
```

## Replace it

Pass your own component for the type. It receives the block, typed, and every other type keeps its default. The default stays available, so you can wrap it instead of starting over:

```tsx
import { Article, defaultComponents } from "@/components/seoforsaas/article";
import type { QuoteBlock } from "@/lib/seoforsaas/types";

const DefaultQuote = defaultComponents.quote;

function MyQuote({ block }: { block: QuoteBlock }) {
  return (
    <div className="my-quote">
      <DefaultQuote block={block} />
    </div>
  );
}

<Article blocks={article.blocks} components={{ quote: MyQuote }} />
```

## Notes

- Rendered as a `figure` with `blockquote` and `figcaption`.