From 313838a027c1906c53b7056c01b350c224a229e5 Mon Sep 17 00:00:00 2001
From: Maximilian Blazek <68336485+dgtlntv@users.noreply.github.com>
Date: Mon, 29 Apr 2024 09:45:33 +0200
Subject: [PATCH] Update index.md

---
 .../docs/components/accordion/react/index.md  | 38 ++++++++++---------
 1 file changed, 21 insertions(+), 17 deletions(-)

diff --git a/vanilla/templates/docs/components/accordion/react/index.md b/vanilla/templates/docs/components/accordion/react/index.md
index f4a9d8c..4cb1663 100644
--- a/vanilla/templates/docs/components/accordion/react/index.md
+++ b/vanilla/templates/docs/components/accordion/react/index.md
@@ -19,28 +19,32 @@ The sidebar accordion, used in listing pages or as navigation, can hold multiple
 
 ## Default
 
-<iframe
-  src="https://canonical.github.io/react-components/iframe.html?args=&id=accordion--default-story&viewMode=story"
-  width="800"
-  height="260"
-></iframe>
-
+<div>
+  <iframe
+    src="https://canonical.github.io/react-components/iframe.html?args=&id=accordion--default-story&viewMode=story"
+    width="800"
+    height="260"
+  / >
+</div>
 ## External state
 
 The expanded accordion section can be controlled by external state.
 
-<iframe
-  src="https://canonical.github.io/react-components/iframe.html?args=&id=accordion--external-state&viewMode=story"
-  width="800"
-  height="260"
-></iframe>
-
+<div>
+  <iframe
+    src="https://canonical.github.io/react-components/iframe.html?args=&id=accordion--external-state&viewMode=story"
+    width="800"
+    height="260"
+  / >
+</div>
 ## Headings
 
 `titleElement` prop can be used to define heading element for section titles.
 
-<iframe
-  src="https://canonical.github.io/react-components/iframe.html?args=&id=accordion--headings&viewMode=story"
-  width="800"
-  height="260"
-></iframe>
+<div>
+  <iframe
+    src="https://canonical.github.io/react-components/iframe.html?args=&id=accordion--headings&viewMode=story"
+    width="800"
+    height="260"
+  / >
+</div>