diff --git a/playroom/snippets.tsx b/playroom/snippets.tsx
index 5d9f5662c1..0739704307 100644
--- a/playroom/snippets.tsx
+++ b/playroom/snippets.tsx
@@ -135,77 +135,253 @@ const accordionSnippets: Array<Snippet> = [
         </Accordion>
         `,
     },
+    {
+        group: 'Accordion',
+        name: 'Accordion (detail and right)',
+        code: `
+        <Accordion>
+          <AccordionItem
+            asset={<IconInvoicePlanFileRegular />}
+            title="What is Movistar Money"
+            detail="Detail"
+            right={<Placeholder width={32} height={32} />}
+            content={
+              <Text3 color={colors.textSecondary}>
+                It's a loan available to anyone, whether or not you're a Movistar
+                customer. It offers from €2,000 to €15,000 with a simple and fast
+                application process, and you receive the money in less than 48 hours.
+              </Text3>
+            }
+          />
+          <AccordionItem
+            asset={<IconLocationMapRegular />}
+            title="To whom is it aimed?"
+            detail="Detail"
+            right={<Placeholder width={32} height={32} />}
+            content={
+              <Text3 color={colors.textSecondary}>
+                The Movistar Money loan service is aimed at anyone, whether you are a{" "}
+                <TextLink href="https://example.org" newTab>
+                  Movistar
+                </TextLink>{" "}
+                customer or not.
+              </Text3>
+            }
+          />
+          <AccordionItem
+            asset={<IconLockEyeClosedRegular />}
+            title="Who offers Movistar Money?"
+            detail="Detail"
+            right={<Placeholder width={32} height={32} />}
+            content={
+              <Text3 color={colors.textSecondary}>
+                <p>
+                  At Telefónica, we have our own financial institution, Telefonica
+                  Consumer Finance, and agreements with other institutions to assist
+                  you in obtaining your loan.
+                </p>
+                <br />
+                <Image src="https://picsum.photos/1200/1200" aspectRatio="16:9" />
+                <br />
+                <p>
+                  Depending on the characteristics of the information you provide us,
+                  your application will be sent to one of the institutions{" "}
+                  <TextLink href="https://example.org" newTab>
+                    with which Movistar has agreements
+                  </TextLink>
+                  .
+                </p>
+              </Text3>
+            }
+          />
+          <AccordionItem
+            asset={<IconIdCardRegular />}
+            title="How can I hire it?"
+            detail="Detail"
+            right={<Placeholder width={32} height={32} />}
+            content={
+              <Text3 color={colors.textSecondary}>
+                It's a very agile process that you can access through the
+                money.movistar.es website. You can find more detailed information
+                about the process on our "How It Works" page.
+              </Text3>
+            }
+          />
+          <AccordionItem
+            asset={<IconLifeguardFloatRegular />}
+            title="What should I do if I don't receive the SMS with the contracting code?"
+            detail="Detail"
+            right={<Placeholder width={32} height={32} />}
+            content={
+              <Text3 color={colors.textSecondary}>
+                It may take a few minutes until you receive the SMS with the code. If
+                you still haven't received the code, you can request a new one by
+                clicking on "resend SMS."
+              </Text3>
+            }
+          />
+        </Accordion>
+        `,
+    },
     {
         group: 'Accordion',
         name: 'BoxedAccordion',
         code: `
-      <BoxedAccordion>
-        <BoxedAccordionItem
-          asset={<IconInvoicePlanFileRegular />}
-          title="What is Movistar Money"
-          content={
-            <Text3 color={colors.textSecondary}>
-              It's a loan available to anyone, whether or not you're a Movistar
-              customer. It offers from €2,000 to €15,000 with a simple and fast
-              application process, and you receive the money in less than 48 hours.
-            </Text3>
-          }
-        />
-        <BoxedAccordionItem
-          asset={<IconLocationMapRegular />}
-          title="To whom is it aimed?"
-          content={
-            <Text3 color={colors.textSecondary}>
-              The Movistar Money loan service is aimed at anyone, whether you are a{" "}
-              <TextLink href="https://example.org" newTab>Movistar</TextLink> customer or not.
-            </Text3>
-          }
-        />
-        <BoxedAccordionItem
-          asset={<IconLockEyeClosedRegular />}
-          title="Who offers Movistar Money?"
-          content={
-            <Text3 color={colors.textSecondary}>
-              <p>
-                At Telefónica, we have our own financial institution, Telefonica
-                Consumer Finance, and agreements with other institutions to assist
-                you in obtaining your loan.
-              </p>
-              <br />
-              <Image src="${imagePlaceholder}" aspectRatio="16:9" />
-              <br />
-              <p>
-                Depending on the characteristics of the information you provide us,
-                your application will be sent to one of the institutions{" "}
-                <TextLink href="https://example.org" newTab>with which Movistar has agreements</TextLink>.
-              </p>
-            </Text3>
-          }
-        />
-        <BoxedAccordionItem
-          asset={<IconIdCardRegular />}
-          title="How can I hire it?"
-          content={
-            <Text3 color={colors.textSecondary}>
-              It's a very agile process that you can access through the
-              money.movistar.es website. You can find more detailed information
-              about the process on our "How It Works" page.
-            </Text3>
-          }
-        />
-        <BoxedAccordionItem
-          asset={<IconLifeguardFloatRegular />}
-          title="What should I do if I don't receive the SMS with the contracting code?"
-          content={
-            <Text3 color={colors.textSecondary}>
-              It may take a few minutes until you receive the SMS with the code. If
-              you still haven't received the code, you can request a new one by
-              clicking on "resend SMS."
-            </Text3>
-          }
-        />
-      </BoxedAccordion>
-      `,
+        <BoxedAccordion>
+          <BoxedAccordionItem
+            asset={<IconInvoicePlanFileRegular />}
+            title="What is Movistar Money"
+            content={
+              <Text3 color={colors.textSecondary}>
+                It's a loan available to anyone, whether or not you're a Movistar
+                customer. It offers from €2,000 to €15,000 with a simple and fast
+                application process, and you receive the money in less than 48 hours.
+              </Text3>
+            }
+          />
+          <BoxedAccordionItem
+            asset={<IconLocationMapRegular />}
+            title="To whom is it aimed?"
+            content={
+              <Text3 color={colors.textSecondary}>
+                The Movistar Money loan service is aimed at anyone, whether you are a{" "}
+                <TextLink href="https://example.org" newTab>Movistar</TextLink> customer or not.
+              </Text3>
+            }
+          />
+          <BoxedAccordionItem
+            asset={<IconLockEyeClosedRegular />}
+            title="Who offers Movistar Money?"
+            content={
+              <Text3 color={colors.textSecondary}>
+                <p>
+                  At Telefónica, we have our own financial institution, Telefonica
+                  Consumer Finance, and agreements with other institutions to assist
+                  you in obtaining your loan.
+                </p>
+                <br />
+                <Image src="${imagePlaceholder}" aspectRatio="16:9" />
+                <br />
+                <p>
+                  Depending on the characteristics of the information you provide us,
+                  your application will be sent to one of the institutions{" "}
+                  <TextLink href="https://example.org" newTab>with which Movistar has agreements</TextLink>.
+                </p>
+              </Text3>
+            }
+          />
+          <BoxedAccordionItem
+            asset={<IconIdCardRegular />}
+            title="How can I hire it?"
+            content={
+              <Text3 color={colors.textSecondary}>
+                It's a very agile process that you can access through the
+                money.movistar.es website. You can find more detailed information
+                about the process on our "How It Works" page.
+              </Text3>
+            }
+          />
+          <BoxedAccordionItem
+            asset={<IconLifeguardFloatRegular />}
+            title="What should I do if I don't receive the SMS with the contracting code?"
+            content={
+              <Text3 color={colors.textSecondary}>
+                It may take a few minutes until you receive the SMS with the code. If
+                you still haven't received the code, you can request a new one by
+                clicking on "resend SMS."
+              </Text3>
+            }
+          />
+        </BoxedAccordion>
+        `,
+    },
+    {
+        group: 'Accordion',
+        name: 'BoxedAccordion (detail and right)',
+        code: `
+        <BoxedAccordion>
+          <BoxedAccordionItem
+            asset={<IconInvoicePlanFileRegular />}
+            title="What is Movistar Money"
+            detail="Detail"
+            right={<Placeholder width={32} height={32} />}
+            content={
+              <Text3 color={colors.textSecondary}>
+                It's a loan available to anyone, whether or not you're a Movistar
+                customer. It offers from €2,000 to €15,000 with a simple and fast
+                application process, and you receive the money in less than 48 hours.
+              </Text3>
+            }
+          />
+          <BoxedAccordionItem
+            asset={<IconLocationMapRegular />}
+            title="To whom is it aimed?"
+            detail="Detail"
+            right={<Placeholder width={32} height={32} />}
+            content={
+              <Text3 color={colors.textSecondary}>
+                The Movistar Money loan service is aimed at anyone, whether you are a{" "}
+                <TextLink href="https://example.org" newTab>
+                  Movistar
+                </TextLink>{" "}
+                customer or not.
+              </Text3>
+            }
+          />
+          <BoxedAccordionItem
+            asset={<IconLockEyeClosedRegular />}
+            title="Who offers Movistar Money?"
+            detail="Detail"
+            right={<Placeholder width={32} height={32} />}
+            content={
+              <Text3 color={colors.textSecondary}>
+                <p>
+                  At Telefónica, we have our own financial institution, Telefonica
+                  Consumer Finance, and agreements with other institutions to assist
+                  you in obtaining your loan.
+                </p>
+                <br />
+                <Image src="https://picsum.photos/1200/1200" aspectRatio="16:9" />
+                <br />
+                <p>
+                  Depending on the characteristics of the information you provide us,
+                  your application will be sent to one of the institutions{" "}
+                  <TextLink href="https://example.org" newTab>
+                    with which Movistar has agreements
+                  </TextLink>
+                  .
+                </p>
+              </Text3>
+            }
+          />
+          <BoxedAccordionItem
+            asset={<IconIdCardRegular />}
+            title="How can I hire it?"
+            detail="Detail"
+            right={<Placeholder width={32} height={32} />}
+            content={
+              <Text3 color={colors.textSecondary}>
+                It's a very agile process that you can access through the
+                money.movistar.es website. You can find more detailed information
+                about the process on our "How It Works" page.
+              </Text3>
+            }
+          />
+          <BoxedAccordionItem
+            asset={<IconLifeguardFloatRegular />}
+            title="What should I do if I don't receive the SMS with the contracting code?"
+            detail="Detail"
+            right={<Placeholder width={32} height={32} />}
+            content={
+              <Text3 color={colors.textSecondary}>
+                It may take a few minutes until you receive the SMS with the code. If
+                you still haven't received the code, you can request a new one by
+                clicking on "resend SMS."
+              </Text3>
+            }
+          />
+        </BoxedAccordion>
+        `,
     },
 ];
 
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-detail-detail-right-false-over-inverse-false-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-detail-detail-right-false-over-inverse-false-1-snap.png
new file mode 100644
index 0000000000..83be4e1532
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-detail-detail-right-false-over-inverse-false-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-detail-detail-right-true-over-inverse-false-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-detail-detail-right-true-over-inverse-false-1-snap.png
new file mode 100644
index 0000000000..e5f0dbd98a
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-detail-detail-right-true-over-inverse-false-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-detail-detail-right-true-over-inverse-true-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-detail-detail-right-true-over-inverse-true-1-snap.png
new file mode 100644
index 0000000000..c175fa6e7e
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-detail-detail-right-true-over-inverse-true-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-detail-right-false-over-inverse-false-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-detail-right-false-over-inverse-false-1-snap.png
new file mode 100644
index 0000000000..6ffb3aa038
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-detail-right-false-over-inverse-false-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-detail-right-true-over-inverse-false-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-detail-right-true-over-inverse-false-1-snap.png
new file mode 100644
index 0000000000..3f0975b191
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-detail-right-true-over-inverse-false-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-inverse-false-single-open-false-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-inverse-false-single-open-false-1-snap.png
deleted file mode 100644
index a245324914..0000000000
Binary files a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-inverse-false-single-open-false-1-snap.png and /dev/null differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-inverse-false-single-open-false-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-inverse-false-single-open-false-2-snap.png
deleted file mode 100644
index 33601d356b..0000000000
Binary files a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-inverse-false-single-open-false-2-snap.png and /dev/null differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-inverse-false-single-open-true-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-inverse-false-single-open-true-1-snap.png
deleted file mode 100644
index a245324914..0000000000
Binary files a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-inverse-false-single-open-true-1-snap.png and /dev/null differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-inverse-false-single-open-true-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-inverse-false-single-open-true-2-snap.png
deleted file mode 100644
index c701e1858e..0000000000
Binary files a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-inverse-false-single-open-true-2-snap.png and /dev/null differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-inverse-true-single-open-false-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-inverse-true-single-open-false-1-snap.png
deleted file mode 100644
index 15f2510543..0000000000
Binary files a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-inverse-true-single-open-false-1-snap.png and /dev/null differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-inverse-true-single-open-false-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-inverse-true-single-open-false-2-snap.png
deleted file mode 100644
index 3eb96c3fa1..0000000000
Binary files a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-inverse-true-single-open-false-2-snap.png and /dev/null differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-inverse-true-single-open-true-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-inverse-true-single-open-true-1-snap.png
deleted file mode 100644
index 15f2510543..0000000000
Binary files a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-inverse-true-single-open-true-1-snap.png and /dev/null differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-inverse-true-single-open-true-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-inverse-true-single-open-true-2-snap.png
deleted file mode 100644
index b1490666bb..0000000000
Binary files a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-inverse-true-single-open-true-2-snap.png and /dev/null differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-over-inverse-false-single-open-false-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-over-inverse-false-single-open-false-1-snap.png
new file mode 100644
index 0000000000..dfc02b702e
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-over-inverse-false-single-open-false-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-over-inverse-false-single-open-false-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-over-inverse-false-single-open-false-2-snap.png
new file mode 100644
index 0000000000..6ffb3aa038
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-over-inverse-false-single-open-false-2-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-over-inverse-false-single-open-true-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-over-inverse-false-single-open-true-1-snap.png
new file mode 100644
index 0000000000..dfc02b702e
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-over-inverse-false-single-open-true-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-over-inverse-false-single-open-true-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-over-inverse-false-single-open-true-2-snap.png
new file mode 100644
index 0000000000..6d6ce641fc
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-over-inverse-false-single-open-true-2-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-over-inverse-true-single-open-false-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-over-inverse-true-single-open-false-1-snap.png
new file mode 100644
index 0000000000..6b109fb53e
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-over-inverse-true-single-open-false-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-over-inverse-true-single-open-false-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-over-inverse-true-single-open-false-2-snap.png
new file mode 100644
index 0000000000..7009adf376
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-over-inverse-true-single-open-false-2-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-over-inverse-true-single-open-true-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-over-inverse-true-single-open-true-1-snap.png
new file mode 100644
index 0000000000..6b109fb53e
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-over-inverse-true-single-open-true-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-over-inverse-true-single-open-true-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-over-inverse-true-single-open-true-2-snap.png
new file mode 100644
index 0000000000..db63f224d7
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-over-inverse-true-single-open-true-2-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-detail-detail-right-false-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-detail-detail-right-false-1-snap.png
new file mode 100644
index 0000000000..b6edf7d834
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-detail-detail-right-false-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-detail-detail-right-true-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-detail-detail-right-true-1-snap.png
new file mode 100644
index 0000000000..8d7a79b18d
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-detail-detail-right-true-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-detail-right-false-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-detail-right-false-1-snap.png
new file mode 100644
index 0000000000..99fda83712
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-detail-right-false-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-detail-right-true-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-detail-right-true-1-snap.png
new file mode 100644
index 0000000000..95546ea764
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-detail-right-true-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-false-over-inverse-false-single-open-false-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-false-over-inverse-false-single-open-false-1-snap.png
new file mode 100644
index 0000000000..e48f81a0a6
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-false-over-inverse-false-single-open-false-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-false-over-inverse-false-single-open-false-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-false-over-inverse-false-single-open-false-2-snap.png
new file mode 100644
index 0000000000..99fda83712
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-false-over-inverse-false-single-open-false-2-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-false-over-inverse-false-single-open-true-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-false-over-inverse-false-single-open-true-1-snap.png
new file mode 100644
index 0000000000..e48f81a0a6
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-false-over-inverse-false-single-open-true-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-false-over-inverse-false-single-open-true-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-false-over-inverse-false-single-open-true-2-snap.png
new file mode 100644
index 0000000000..d304355baa
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-false-over-inverse-false-single-open-true-2-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-false-over-inverse-true-single-open-false-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-false-over-inverse-true-single-open-false-1-snap.png
new file mode 100644
index 0000000000..a4a6294c83
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-false-over-inverse-true-single-open-false-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-false-over-inverse-true-single-open-false-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-false-over-inverse-true-single-open-false-2-snap.png
new file mode 100644
index 0000000000..488443934b
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-false-over-inverse-true-single-open-false-2-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-false-over-inverse-true-single-open-true-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-false-over-inverse-true-single-open-true-1-snap.png
new file mode 100644
index 0000000000..a4a6294c83
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-false-over-inverse-true-single-open-true-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-false-over-inverse-true-single-open-true-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-false-over-inverse-true-single-open-true-2-snap.png
new file mode 100644
index 0000000000..e17326bc13
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-false-over-inverse-true-single-open-true-2-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-false-single-open-false-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-false-single-open-false-1-snap.png
deleted file mode 100644
index 92fdec3a90..0000000000
Binary files a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-false-single-open-false-1-snap.png and /dev/null differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-false-single-open-false-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-false-single-open-false-2-snap.png
deleted file mode 100644
index 7626ff2c36..0000000000
Binary files a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-false-single-open-false-2-snap.png and /dev/null differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-false-single-open-true-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-false-single-open-true-1-snap.png
deleted file mode 100644
index 92fdec3a90..0000000000
Binary files a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-false-single-open-true-1-snap.png and /dev/null differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-false-single-open-true-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-false-single-open-true-2-snap.png
deleted file mode 100644
index 42c3863989..0000000000
Binary files a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-false-single-open-true-2-snap.png and /dev/null differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-true-over-inverse-false-single-open-false-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-true-over-inverse-false-single-open-false-1-snap.png
new file mode 100644
index 0000000000..b719b3e99a
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-true-over-inverse-false-single-open-false-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-true-over-inverse-false-single-open-false-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-true-over-inverse-false-single-open-false-2-snap.png
new file mode 100644
index 0000000000..95844db292
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-true-over-inverse-false-single-open-false-2-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-true-over-inverse-false-single-open-true-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-true-over-inverse-false-single-open-true-1-snap.png
new file mode 100644
index 0000000000..b719b3e99a
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-true-over-inverse-false-single-open-true-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-true-over-inverse-false-single-open-true-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-true-over-inverse-false-single-open-true-2-snap.png
new file mode 100644
index 0000000000..059044441a
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-true-over-inverse-false-single-open-true-2-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-true-over-inverse-true-single-open-false-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-true-over-inverse-true-single-open-false-1-snap.png
new file mode 100644
index 0000000000..7843c19bc1
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-true-over-inverse-true-single-open-false-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-true-single-open-false-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-true-over-inverse-true-single-open-false-2-snap.png
similarity index 53%
rename from src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-true-single-open-false-2-snap.png
rename to src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-true-over-inverse-true-single-open-false-2-snap.png
index 026d797638..e40ae6ef7b 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-true-single-open-false-2-snap.png and b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-true-over-inverse-true-single-open-false-2-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-true-over-inverse-true-single-open-true-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-true-over-inverse-true-single-open-true-1-snap.png
new file mode 100644
index 0000000000..7843c19bc1
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-true-over-inverse-true-single-open-true-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-true-over-inverse-true-single-open-true-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-true-over-inverse-true-single-open-true-2-snap.png
new file mode 100644
index 0000000000..7201907771
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-true-over-inverse-true-single-open-true-2-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-true-single-open-false-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-true-single-open-false-1-snap.png
deleted file mode 100644
index de75142b29..0000000000
Binary files a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-true-single-open-false-1-snap.png and /dev/null differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-true-single-open-true-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-true-single-open-true-1-snap.png
deleted file mode 100644
index de75142b29..0000000000
Binary files a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-true-single-open-true-1-snap.png and /dev/null differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-true-single-open-true-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-true-single-open-true-2-snap.png
deleted file mode 100644
index 93fa7f2fad..0000000000
Binary files a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-true-single-open-true-2-snap.png and /dev/null differ
diff --git a/src/__screenshot_tests__/accordion-screenshot-test.tsx b/src/__screenshot_tests__/accordion-screenshot-test.tsx
index 346d4e9600..f2b53b4fb6 100644
--- a/src/__screenshot_tests__/accordion-screenshot-test.tsx
+++ b/src/__screenshot_tests__/accordion-screenshot-test.tsx
@@ -1,21 +1,17 @@
 import {openStoryPage, screen} from '../test-utils';
 
 test.each`
-    component            | inverse  | singleOpen
-    ${'Accordion'}       | ${false} | ${false}
-    ${'Accordion'}       | ${false} | ${true}
-    ${'Accordion'}       | ${true}  | ${false}
-    ${'Accordion'}       | ${true}  | ${true}
-    ${'Boxed accordion'} | ${false} | ${false}
-    ${'Boxed accordion'} | ${false} | ${true}
-    ${'Boxed accordion'} | ${true}  | ${false}
-    ${'Boxed accordion'} | ${true}  | ${true}
-`('$component. inverse($inverse) singleOpen($singleOpen)', async ({component, inverse, singleOpen}) => {
+    overInverse | singleOpen
+    ${false}    | ${false}
+    ${false}    | ${true}
+    ${true}     | ${false}
+    ${true}     | ${true}
+`('Accordion. overInverse($overInverse) singleOpen($singleOpen)', async ({overInverse, singleOpen}) => {
     await openStoryPage({
-        id: `components-accordions--${component.toLowerCase().replace(' ', '-')}-story`,
+        id: 'components-accordions--accordion-story',
         device: 'MOBILE_IOS',
         args: {
-            inverse,
+            overInverse,
             singleOpen,
         },
     });
@@ -32,3 +28,99 @@ test.each`
 
     expect(await accordion.screenshot()).toMatchImageSnapshot();
 });
+
+test.each`
+    inverse  | overInverse | singleOpen
+    ${false} | ${false}    | ${false}
+    ${false} | ${false}    | ${true}
+    ${false} | ${true}     | ${false}
+    ${false} | ${true}     | ${true}
+    ${true}  | ${false}    | ${false}
+    ${true}  | ${false}    | ${true}
+    ${true}  | ${true}     | ${false}
+    ${true}  | ${true}     | ${true}
+`(
+    'BoxedAccordion. inverse($inverse) overInverse($overInverse) singleOpen($singleOpen)',
+    async ({inverse, overInverse, singleOpen}) => {
+        await openStoryPage({
+            id: 'components-accordions--boxed-accordion-story',
+            device: 'MOBILE_IOS',
+            args: {
+                inverse,
+                overInverse,
+                singleOpen,
+            },
+        });
+
+        const accordion = await screen.findByTestId('accordion');
+
+        expect(await accordion.screenshot()).toMatchImageSnapshot();
+
+        await (await screen.findByTestId('accordion-item-1')).click();
+        await (await screen.findByTestId('accordion-item-1')).click();
+        await (await screen.findByTestId('accordion-item-2')).click();
+        await (await screen.findByTestId('accordion-item-4')).click();
+        await (await screen.findByTestId('accordion-item-6')).click();
+
+        expect(await accordion.screenshot()).toMatchImageSnapshot();
+    }
+);
+
+test.each`
+    detail      | right    | overInverse
+    ${''}       | ${false} | ${false}
+    ${''}       | ${true}  | ${false}
+    ${'Detail'} | ${false} | ${false}
+    ${'Detail'} | ${true}  | ${false}
+    ${'Detail'} | ${true}  | ${true}
+`(
+    'Accordion. detail($detail) right($right) overInverse($overInverse)',
+    async ({detail, right, overInverse}) => {
+        await openStoryPage({
+            id: 'components-accordions--accordion-story',
+            device: 'MOBILE_IOS',
+            args: {
+                detail,
+                right,
+                overInverse,
+            },
+        });
+
+        const accordion = await screen.findByTestId('accordion');
+
+        await (await screen.findByTestId('accordion-item-1')).click();
+        await (await screen.findByTestId('accordion-item-1')).click();
+        await (await screen.findByTestId('accordion-item-2')).click();
+        await (await screen.findByTestId('accordion-item-4')).click();
+        await (await screen.findByTestId('accordion-item-6')).click();
+
+        expect(await accordion.screenshot()).toMatchImageSnapshot();
+    }
+);
+
+test.each`
+    detail      | right
+    ${''}       | ${false}
+    ${''}       | ${true}
+    ${'Detail'} | ${false}
+    ${'Detail'} | ${true}
+`('BoxedAccordion. detail($detail) right($right)', async ({detail, right}) => {
+    await openStoryPage({
+        id: 'components-accordions--boxed-accordion-story',
+        device: 'MOBILE_IOS',
+        args: {
+            detail,
+            right,
+        },
+    });
+
+    const accordion = await screen.findByTestId('accordion');
+
+    await (await screen.findByTestId('accordion-item-1')).click();
+    await (await screen.findByTestId('accordion-item-1')).click();
+    await (await screen.findByTestId('accordion-item-2')).click();
+    await (await screen.findByTestId('accordion-item-4')).click();
+    await (await screen.findByTestId('accordion-item-6')).click();
+
+    expect(await accordion.screenshot()).toMatchImageSnapshot();
+});
diff --git a/src/__stories__/accordion-story.tsx b/src/__stories__/accordion-story.tsx
index c20d437ed1..eec2f44906 100644
--- a/src/__stories__/accordion-story.tsx
+++ b/src/__stories__/accordion-story.tsx
@@ -25,97 +25,103 @@ export default {
     parameters: {fullScreen: true},
 };
 
-type Args = {title: string; subtitle: string; singleOpen: boolean; inverse: boolean};
+type Args = {
+    title: string;
+    subtitle: string;
+    detail: string;
+    right: boolean;
+    singleOpen: boolean;
+    overInverse: boolean;
+};
+
+type BoxedArgs = Args & {inverse: boolean};
 
-const Template: StoryComponent<Args & {type?: 'boxed'}> = ({title, subtitle, singleOpen, inverse, type}) => {
+const Template: StoryComponent<BoxedArgs & {type?: 'boxed'}> = ({
+    title,
+    subtitle,
+    detail,
+    right,
+    singleOpen,
+    inverse,
+    overInverse,
+    type,
+}) => {
     const content = <Placeholder height={100} />;
 
     const AccordionComponent = type === 'boxed' ? BoxedAccordion : Accordion;
     const ItemComponent = type === 'boxed' ? BoxedAccordionItem : AccordionItem;
 
+    const getAccordionItemContentProps = () => {
+        return {
+            title,
+            subtitle,
+            content,
+            detail,
+            right: right ? (
+                <div style={{display: 'flex', alignItems: 'center', height: '100%'}}>
+                    <div style={{width: 32, height: 32, borderRadius: '50%', background: 'pink'}} />
+                </div>
+            ) : undefined,
+            ...(type === 'boxed' && {isInverse: inverse}),
+        };
+    };
+
     return (
-        <ResponsiveLayout fullWidth isInverse={inverse}>
+        <ResponsiveLayout fullWidth variant={overInverse ? 'inverse' : 'default'}>
             <Box padding={16}>
                 <AccordionComponent singleOpen={singleOpen} dataAttributes={{testid: 'accordion'}}>
                     <ItemComponent
-                        title={title}
-                        subtitle={subtitle}
-                        content={content}
-                        {...(type === 'boxed' && {isInverse: inverse})}
+                        {...getAccordionItemContentProps()}
                         dataAttributes={{testid: 'accordion-item-1'}}
                     />
                     <ItemComponent
-                        title={title}
-                        subtitle={subtitle}
-                        content={content}
+                        {...getAccordionItemContentProps()}
                         asset={<IconThumbUpFilled size={24} />}
-                        {...(type === 'boxed' && {isInverse: inverse})}
                         dataAttributes={{testid: 'accordion-item-2'}}
                     />
                     <ItemComponent
-                        title={title}
-                        subtitle={subtitle}
-                        content={content}
+                        {...getAccordionItemContentProps()}
                         asset={
                             <Circle backgroundColor={skinVars.colors.brandLow} size={40}>
                                 <IconMobileDeviceRegular color={skinVars.colors.brand} />
                             </Circle>
                         }
-                        {...(type === 'boxed' && {isInverse: inverse})}
                         dataAttributes={{testid: 'accordion-item-3'}}
                     />
 
                     <ItemComponent
-                        title={title}
-                        subtitle={subtitle}
-                        content={content}
+                        {...getAccordionItemContentProps()}
                         asset={<Circle size={40} backgroundImage={laptopImg} />}
-                        {...(type === 'boxed' && {isInverse: inverse})}
                         dataAttributes={{testid: 'accordion-item-4'}}
                     />
 
                     <ItemComponent
-                        title={title}
-                        subtitle={subtitle}
-                        content={content}
+                        {...getAccordionItemContentProps()}
                         asset={<Image src={usingVrImg} height={80} aspectRatio="16:9" />}
-                        {...(type === 'boxed' && {isInverse: inverse})}
                         dataAttributes={{testid: 'accordion-item-5'}}
                     />
 
                     <ItemComponent
-                        title={title}
-                        subtitle={subtitle}
-                        content={content}
+                        {...getAccordionItemContentProps()}
                         asset={<Image src={personPortraitImg} width={80} aspectRatio="7:10" />}
-                        {...(type === 'boxed' && {isInverse: inverse})}
                         dataAttributes={{testid: 'accordion-item-6'}}
                     />
 
                     <ItemComponent
-                        title={title}
-                        subtitle={subtitle}
-                        content={content}
+                        {...getAccordionItemContentProps()}
                         asset={<Image src={touchImg} width={80} aspectRatio="1:1" />}
-                        {...(type === 'boxed' && {isInverse: inverse})}
                         dataAttributes={{testid: 'accordion-item-7'}}
                     />
 
                     <ItemComponent
-                        title={title}
-                        subtitle={subtitle}
-                        content={content}
+                        {...getAccordionItemContentProps()}
                         asset={<Avatar size={40} src={avatarImg} />}
-                        {...(type === 'boxed' && {isInverse: inverse})}
                         dataAttributes={{testid: 'accordion-item-8'}}
                     />
 
                     <ItemComponent
-                        title={title}
-                        subtitle={subtitle}
-                        content={content}
+                        {...getAccordionItemContentProps()}
                         asset={<Avatar size={40} initials="MS" />}
-                        {...(type === 'boxed' && {isInverse: inverse})}
                         dataAttributes={{testid: 'accordion-item-9'}}
                     />
                 </AccordionComponent>
@@ -127,14 +133,16 @@ const Template: StoryComponent<Args & {type?: 'boxed'}> = ({title, subtitle, sin
 const defaultArgs = {
     title: 'Title',
     subtitle: 'Subtitle',
+    detail: '',
+    right: false,
     singleOpen: false,
-    inverse: false,
+    overInverse: false,
 };
 
-export const AccordionStory: StoryComponent<Args> = (args) => <Template {...args} />;
+export const AccordionStory: StoryComponent<Args> = (args) => <Template inverse={false} {...args} />;
 AccordionStory.storyName = 'Accordion';
 AccordionStory.args = defaultArgs;
 
-export const BoxedAccordionStory: StoryComponent<Args> = (args) => <Template type="boxed" {...args} />;
+export const BoxedAccordionStory: StoryComponent<BoxedArgs> = (args) => <Template type="boxed" {...args} />;
 BoxedAccordionStory.storyName = 'BoxedAccordion';
-BoxedAccordionStory.args = defaultArgs;
+BoxedAccordionStory.args = {...defaultArgs, inverse: false};
diff --git a/src/__tests__/accordion-test.tsx b/src/__tests__/accordion-test.tsx
index 1abd8ba0ea..753a1f0c8b 100644
--- a/src/__tests__/accordion-test.tsx
+++ b/src/__tests__/accordion-test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import userEvent from '@testing-library/user-event';
 import {render, screen, waitFor} from '@testing-library/react';
-import {ThemeContextProvider, Text3, AccordionItem, Accordion} from '..';
+import {ThemeContextProvider, Text3, AccordionItem, Accordion, Text2} from '..';
 import {makeTheme} from './test-utils';
 
 const items = [
@@ -139,3 +139,28 @@ test('Accordion with singleOpen', async () => {
     });
     expect(screen.getByText('Content 3')).toBeInTheDocument();
 });
+
+test('Accordion with custom labels is accessible', async () => {
+    render(
+        <ThemeContextProvider theme={makeTheme()}>
+            <Accordion>
+                <AccordionItem
+                    title="Title 1"
+                    content={<Text3 regular>Content 1</Text3>}
+                    aria-label="Custom label 1"
+                />
+                <AccordionItem
+                    title="Title 2"
+                    content={<Text3 regular>Content 2</Text3>}
+                    aria-labelledby="item2-id"
+                />
+            </Accordion>
+            <Text2 regular id="item2-id">
+                Custom label 2
+            </Text2>
+        </ThemeContextProvider>
+    );
+
+    expect(screen.getByLabelText('Custom label 1')).toBeInTheDocument();
+    expect(screen.getByLabelText('Custom label 2')).toBeInTheDocument();
+});
diff --git a/src/accordion.css.ts b/src/accordion.css.ts
index f7481b1ca3..5a70b34bba 100644
--- a/src/accordion.css.ts
+++ b/src/accordion.css.ts
@@ -52,6 +52,10 @@ export const touchableBackgroundInverse = style({
     },
 });
 
+export const rightContentContainer = style({
+    height: '100%',
+});
+
 export const chevronContainer = style({
     height: '100%',
     display: 'flex',
diff --git a/src/accordion.tsx b/src/accordion.tsx
index 776ed37790..a2b4850e5c 100644
--- a/src/accordion.tsx
+++ b/src/accordion.tsx
@@ -14,6 +14,7 @@ import {Boxed} from './boxed';
 import {useIsInverseOrMediaVariant} from './theme-variant-context';
 import {CSSTransition} from 'react-transition-group';
 import {isRunningAcceptanceTest} from './utils/platform';
+import Inline from './inline';
 
 import type {ExclusifyUnion} from './utils/utility-types';
 import type {DataAttributes, TrackingEvent} from './utils/types';
@@ -43,6 +44,10 @@ interface AccordionItemContentProps {
     dataAttributes?: DataAttributes;
     trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;
     role?: string;
+    detail?: string;
+    right?: React.ReactNode;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
 }
 
 const useAccordionState = ({
@@ -119,7 +124,18 @@ const getAccordionItemIndex = (element: Element | null) => {
 };
 
 const AccordionItemContent = React.forwardRef<TouchableElement, AccordionItemContentProps>(
-    ({content, dataAttributes, trackingEvent, ...props}, ref) => {
+    (
+        {
+            content,
+            dataAttributes,
+            trackingEvent,
+            right,
+            'aria-label': ariaLabel,
+            'aria-labelledby': ariaLabelledby,
+            ...props
+        },
+        ref
+    ) => {
         const panelContainerRef = React.useRef<HTMLDivElement | null>(null);
         const itemRef = React.useRef<HTMLDivElement | null>(null);
         const {index, toggle} = useAccordionContext();
@@ -148,27 +164,36 @@ const AccordionItemContent = React.forwardRef<TouchableElement, AccordionItemCon
                     trackingEvent={trackingEvent}
                     aria-expanded={isOpen}
                     aria-controls={panelId}
+                    aria-label={ariaLabel}
+                    aria-labelledby={ariaLabelledby}
                 >
                     <Box paddingX={16}>
                         <HeaderContent
                             labelId={labelId}
                             {...props}
-                            right={
-                                <div className={styles.chevronContainer}>
-                                    <IconChevron
-                                        size={24}
-                                        transitionDuration={ACCORDION_TRANSITION_DURATION_IN_MS}
-                                        direction={isOpen ? 'up' : 'down'}
-                                        color={
-                                            isInverse
-                                                ? skinVars.colors.inverse
-                                                : isOpen
-                                                  ? skinVars.colors.neutralHigh
-                                                  : skinVars.colors.neutralMedium
-                                        }
-                                    />
-                                </div>
-                            }
+                            right={({centerY}) => (
+                                <Inline
+                                    space={4}
+                                    alignItems={centerY ? 'center' : undefined}
+                                    className={styles.rightContentContainer}
+                                >
+                                    {right}
+                                    <div className={styles.chevronContainer}>
+                                        <IconChevron
+                                            size={24}
+                                            transitionDuration={ACCORDION_TRANSITION_DURATION_IN_MS}
+                                            direction={isOpen ? 'up' : 'down'}
+                                            color={
+                                                isInverse
+                                                    ? skinVars.colors.inverse
+                                                    : isOpen
+                                                      ? skinVars.colors.neutralHigh
+                                                      : skinVars.colors.neutralMedium
+                                            }
+                                        />
+                                    </div>
+                                </Inline>
+                            )}
                         />
                     </Box>
                 </BaseTouchable>
@@ -272,7 +297,7 @@ interface BoxedAccordionItemProps extends AccordionItemContentProps {
 export const BoxedAccordionItem = React.forwardRef<HTMLDivElement, BoxedAccordionItemProps>(
     ({dataAttributes, isInverse, ...props}, ref) => (
         <Boxed
-            isInverse={isInverse}
+            variant={isInverse ? 'inverse' : 'default'}
             ref={ref}
             dataAttributes={{'component-name': 'BoxedAccordionItem', ...dataAttributes}}
         >