# Callout

A highlighted aside: `info`, `tip` or `warning`.



## The block

As the API returns it, from the [example article](https://api.seoforsaas.dev/public/v1/fixtures/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.