1. Notion original

2. Notion API

{
  "object": "block",
  "id": "d23eafb9-f8cc-4e44-adc1-da84070ac338",
  "created_time": "2022-01-27T22:01:00.000Z",
  "last_edited_time": "2022-01-27T22:03:00.000Z",
  "has_children": false,
  "archived": false,
  "type": "callout",
  "callout": {
    "text": [
      {
        "type": "text",
        "text": {
          "content": "Come on in! The water’s fine 🌊",
          "link": null
        },
        "annotations": {
          "bold": false,
          "italic": false,
          "strikethrough": false,
          "underline": false,
          "code": false,
          "color": "default"
        },
        "plain_text": "Come on in! The water’s fine 🌊",
        "href": null
      }
    ],
    "icon": {
      "type": "emoji",
      "emoji": "🦦"
    }
  }
}
  javascript

3. Svelte output

<Callout emoji="🦦">Come on in! The water’s fine 🌊</Callout><Paragraph
  blockProps={{
    pageId: '1e2eab4c0589489cb6bdbaa0e1f9593f',
    id: '3187f851-b8d2-406f-8f1a-5ddf97b30aef',
    created_time: '2022-01-27T21:57:00.000Z',
    last_edited_time: '2022-01-27T21:57:00.000Z'
  }}
/>
  html

4. Example rendering

🏠 Browse the docs ⚘