diff --git a/__tests__/migration/callouts.test.ts b/__tests__/migration/callouts.test.ts
new file mode 100644
index 000000000..8503cee60
--- /dev/null
+++ b/__tests__/migration/callouts.test.ts
@@ -0,0 +1,16 @@
+import { migrate } from '../helpers';
+
+describe('migrating callouts', () => {
+  it('retains HTML content that starts a callout body', () => {
+    const md = `> ⚠️ <div><b>hello</b></div>
+    `;
+
+    const mdx = migrate(md);
+    expect(mdx).toMatchInlineSnapshot(`
+      "<Callout icon="⚠️" theme="warn">
+        <div><b>hello</b></div>
+      </Callout>
+      "
+    `);
+  });
+});
diff --git a/processor/transform/migrate-callouts.ts b/processor/transform/migrate-callouts.ts
index b02920397..17bf11c52 100644
--- a/processor/transform/migrate-callouts.ts
+++ b/processor/transform/migrate-callouts.ts
@@ -7,7 +7,11 @@ import { wrapHeading } from './callouts';
 
 const migrateCallouts: Plugin<[], Root> = (): Transformer<Root> => (tree: Root) => {
   visit(tree, 'rdme-callout', callout => {
-    callout.children[0] = wrapHeading(callout);
+    const firstChild = callout.children?.[0];
+    // This will retain the value of the node if it is not a paragraph, e.g. an HTML node
+    if (firstChild && firstChild.type === 'paragraph') {
+      callout.children[0] = wrapHeading(callout);
+    }
   });
 
   return tree;