Components

Callout

A highlighted aside: info, tip or warning.

A highlighted aside: info, tip or warning.

Callout block

The block

As the API returns it, from the example article:

json

{  "type": "callout",  "variant": "tip",  "content": [    {      "text": "Rebuild your sitemap on our webhook, and new articles are discoverable the moment they are published."    }  ],  "id": "callout-8"}

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 { CalloutBlock } from "@/lib/seoforsaas/types";const DefaultCallout = defaultComponents.callout;function MyCallout({ block }: { block: CalloutBlock }) {  return (    <div className="my-callout">      <DefaultCallout block={block} />    </div>  );}<Article blocks={article.blocks} components={{ callout: MyCallout }} />

Notes

The variant is a data-variant attribute; restyle each one in CSS.