diff --git a/.changeset/tidy-rockets-chew.md b/.changeset/tidy-rockets-chew.md
new file mode 100644
index 000000000..6592e6fb5
--- /dev/null
+++ b/.changeset/tidy-rockets-chew.md
@@ -0,0 +1,5 @@
+---
+"@ebay/skin": minor
+---
+
+feat(accordion): new component
diff --git a/dist/accordion/accordion.css b/dist/accordion/accordion.css
new file mode 100644
index 000000000..e78ba3479
--- /dev/null
+++ b/dist/accordion/accordion.css
@@ -0,0 +1,58 @@
+ul.accordion {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+}
+ul.accordion ::marker {
+    font-size: 0;
+}
+
+ul.accordion li:not(:last-child) {
+    border-bottom: 1px solid var(--color-stroke-subtle);
+}
+
+ul.accordion summary.details__summary {
+    border-radius: 0;
+    display: flex;
+    font-size: var(--font-size-medium);
+    justify-content: space-between;
+    min-height: 48px;
+    padding: 12px 16px;
+}
+
+ul.accordion details .details__content {
+    margin: 0 16px 6px;
+    opacity: 0;
+    transform: scaleY(0);
+    transform-origin: top;
+    transition:
+        opacity 0.5s cubic-bezier(0.3, 0, 0, 1),
+        transform 0.5s cubic-bezier(0.3, 0, 0, 1);
+}
+
+ul.accordion details[open] .details__content {
+    opacity: 1;
+    transform: scaleY(1);
+}
+
+ul.accordion--large summary.details__summary {
+    font-size: var(--font-size-large-1);
+    min-height: 52px;
+}
+
+ul.accordion details svg.details__expand,
+ul.accordion details[open] svg.details__collapse {
+    display: block;
+}
+
+ul.accordion details svg.details__collapse,
+ul.accordion details[open] svg.details__expand {
+    display: none;
+}
+
+@media (prefers-reduced-motion) {
+    ul.accordion details .details__content,
+    ul.accordion details[open] .details__content {
+        transition: none;
+    }
+}
diff --git a/src/modules/accordion.marko b/src/modules/accordion.marko
new file mode 100644
index 000000000..42cb30f42
--- /dev/null
+++ b/src/modules/accordion.marko
@@ -0,0 +1,617 @@
+<div id="accordion">
+    <section-header metadata=input.metadata name=input.name/>
+
+    <p>
+        An accordion is a series of expandable sections of content. Each section has a summary header that is used to toggle the display of its related content.  
+    </p>
+
+    <h3>Default Accordion</h3>
+    <p>By default, each section is rendered as closed. When opened, the section will stay open until explicitly closed.</p>
+    <div class="demo">
+        <div class="demo__inner">
+            <ul
+                class="accordion"
+                role="list"
+                aria-roledescription="accordion"
+            >
+                <li>
+                    <details class="details">
+                        <summary class="details__summary">
+                            <span class="details__label">
+                                Shipping and returns
+                            </span>
+                            <span class="details__icon" hidden>
+                                <svg class="details__expand" height="16" width="16" aria-hidden="true">
+                                    <use href="#icon-add-16"/>
+                                </svg>
+                                <svg class="details__collapse" height="16" width="16" aria-hidden="true">
+                                    <use href="#icon-remove-16"/>
+                                </svg>
+                            </span>
+                        </summary>
+                        <div class="details__content">
+                            <p>
+                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                            </p>
+                        </div>
+                    </details>
+                </li>
+                <li>
+                    <details class="details">
+                        <summary class="details__summary">
+                            <span class="details__label">
+                                Text wraps on small screen with this long text
+                            </span>
+                            <span class="details__icon" hidden>
+                                <svg class="details__expand" height="16" width="16" aria-hidden="true">
+                                    <use href="#icon-add-16"/>
+                                </svg>
+                                <svg class="details__collapse" height="16" width="16" aria-hidden="true">
+                                    <use href="#icon-remove-16"/>
+                                </svg>
+                            </span>
+                        </summary>
+                        <div class="details__content">
+                            <p>
+                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                            </p>
+                        </div>
+                    </details>
+                </li>
+                <li>
+                    <details class="details">
+                        <summary class="details__summary">
+                            <span class="details__label">
+                                Specifications
+                            </span>
+                            <span class="details__icon" hidden>
+                                <svg class="details__expand" height="16" width="16" aria-hidden="true">
+                                    <use href="#icon-add-16"/>
+                                </svg>
+                                <svg class="details__collapse" height="16" width="16" aria-hidden="true">
+                                    <use href="#icon-remove-16"/>
+                                </svg>
+                            </span>
+                        </summary>
+                        <div class="details__content">
+                            <p>
+                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                            </p>
+                        </div>
+                    </details>
+                </li>
+            </ul>
+        </div>
+    </div>
+    <highlight-code type="html">
+    <ul
+                class="accordion"
+                role="list"
+                aria-roledescription="accordion"
+            >
+                <li>
+                    <details class="details">
+                        <summary class="details__summary">
+                            <span class="details__label">
+                                Shipping and returns
+                            </span>
+                            <span class="details__icon" hidden >
+                                <svg class="details__expand" height="16" width="16" aria-hidden="true">
+                                    <use href="#icon-add-16"/>
+                                </svg>
+                                <svg class="details__collapse" height="16" width="16" aria-hidden="true">
+                                    <use href="#icon-remove-16"/>
+                                </svg>
+                            </span>
+                        </summary>
+                        <div class="details__content">
+                            <p>
+                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                            </p>
+                        </div>
+                    </details>
+                </li>
+                <li>
+                    <details class="details">
+                        <summary class="details__summary">
+                            <span class="details__label">
+                                Description
+                            </span>
+                            <span class="details__icon" hidden>
+                                <svg class="details__expand" height="16" width="16" aria-hidden="true">
+                                    <use href="#icon-add-16"/>
+                                </svg>
+                                <svg class="details__collapse" height="16" width="16" aria-hidden="true">
+                                    <use href="#icon-remove-16"/>
+                                </svg>
+                            </span>
+                        </summary>
+                        <div class="details__content">
+                            <p>
+                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                            </p>
+                        </div>
+                    </details>
+                </li>
+                <li>
+                    <details class="details">
+                        <summary class="details__summary">
+                            <span class="details__label">
+                                Specifications
+                            </span>
+                            <span class="details__icon" hidden>
+                                <svg class="details__expand" height="16" width="16" aria-hidden="true">
+                                    <use href="#icon-add-16"/>
+                                </svg>
+                                <svg class="details__collapse" height="16" width="16" aria-hidden="true">
+                                    <use href="#icon-remove-16"/>
+                                </svg>
+                            </span>
+                        </summary>
+                        <div class="details__content">
+                            <p>
+                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                            </p>
+                        </div>
+                    </details>
+                </li>
+            </ul>
+    </highlight-code>
+
+    <h3>Opened Accordion</h3>
+    <p>Apply the <span class="highlight">open</span> property to render a section in an open state.</p>
+    <div class="demo">
+        <div class="demo__inner">
+            <ul
+                class="accordion"
+                role="list"
+                aria-roledescription="accordion"
+            >
+                <li>
+                    <details class="details" open>
+                        <summary class="details__summary">
+                            <span class="details__label">
+                                Shipping and returns
+                            </span>
+                            <span class="details__icon" hidden>
+                                <svg class="details__expand" height="16" width="16" aria-hidden="true">
+                                    <use href="#icon-add-16"/>
+                                </svg>
+                                <svg class="details__collapse" height="16" width="16" aria-hidden="true">
+                                    <use href="#icon-remove-16"/>
+                                </svg>
+                            </span>
+                        </summary>
+                        <div class="details__content">
+                            <p>
+                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                            </p>
+                        </div>
+                    </details>
+                </li>
+                <li>
+                    <details class="details">
+                        <summary class="details__summary">
+                            <span class="details__label">
+                                Description
+                            </span>
+                            <span class="details__icon" hidden>
+                                <svg class="details__expand" height="16" width="16" aria-hidden="true">
+                                    <use href="#icon-add-16"/>
+                                </svg>
+                                <svg class="details__collapse" height="16" width="16" aria-hidden="true">
+                                    <use href="#icon-remove-16"/>
+                                </svg>
+                            </span>
+                        </summary>
+                        <div class="details__content">
+                            <p>
+                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                            </p>
+                        </div>
+                    </details>
+                </li>
+                <li>
+                    <details class="details">
+                        <summary class="details__summary">
+                            <span class="details__label">
+                                Specifications
+                            </span>
+                            <span class="details__icon" hidden>
+                                <svg class="details__expand" height="16" width="16" aria-hidden="true">
+                                    <use href="#icon-add-16"/>
+                                </svg>
+                                <svg class="details__collapse" height="16" width="16" aria-hidden="true">
+                                    <use href="#icon-remove-16"/>
+                                </svg>
+                            </span>
+                        </summary>
+                        <div class="details__content">
+                            <p>
+                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                            </p>
+                        </div>
+                    </details>
+                </li>
+            </ul>
+        </div>
+    </div>
+
+    <highlight-code type="html">
+    <ul
+                class="accordion"
+                role="list"
+                aria-roledescription="accordion"
+            >
+                <li>
+                    <details class="details" open>
+                        <summary class="details__summary">
+                            <span class="details__label">
+                                Shipping and returns
+                            </span>
+                            <span class="details__icon" hidden>
+                                <svg class="details__expand" height="16" width="16" aria-hidden="true">
+                                    <use href="#icon-add-16"/>
+                                </svg>
+                                <svg class="details__collapse" height="16" width="16" aria-hidden="true">
+                                    <use href="#icon-remove-16"/>
+                                </svg>
+                            </span>
+                        </summary>
+                        <div class="details__content">
+                            <p>
+                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                            </p>
+                        </div>
+                    </details>
+                </li>
+                <li>
+                    <details class="details">
+                        <summary class="details__summary">
+                            <span class="details__label">
+                                Description
+                            </span>
+                            <span class="details__icon" hidden>
+                                <svg class="details__expand" height="16" width="16" aria-hidden="true">
+                                    <use href="#icon-add-16"/>
+                                </svg>
+                                <svg class="details__collapse" height="16" width="16" aria-hidden="true">
+                                    <use href="#icon-remove-16"/>
+                                </svg>
+                            </span>
+                        </summary>
+                        <div class="details__content">
+                            ...
+                        </div>
+                    </details>
+                </li>
+                <li>
+                    <details class="details">
+                        <summary class="details__summary">
+                            <span class="details__label">
+                                Specifications
+                            </span>
+                            <span class="details__icon" hidden>
+                                <svg class="details__expand" height="16" width="16" aria-hidden="true">
+                                    <use href="#icon-add-16"/>
+                                </svg>
+                                <svg class="details__collapse" height="16" width="16" aria-hidden="true">
+                                    <use href="#icon-remove-16"/>
+                                </svg>
+                            </span>
+                        </summary>
+                        <div class="details__content">
+                            ...
+                        </div>
+                    </details>
+                </li>
+            </ul>
+    </highlight-code>
+
+    <h3>Large Accordion</h3>
+    <p>
+        Apply the
+        <span class="highlight">
+            accordion--large
+        </span>
+         modifier to increase the size of each section summary.
+    </p>
+    <div class="demo">
+        <div class="demo__inner">
+            <ul
+                class="accordion accordion--large"
+                role="list"
+                aria-roledescription="accordion"
+            >
+                <li>
+                    <details class="details">
+                        <summary class="details__summary">
+                            <span class="details__label">
+                                Shipping and returns
+                            </span>
+                            <span class="details__icon" hidden>
+                                <svg class="details__expand" height="16" width="16" aria-hidden="true">
+                                    <use href="#icon-add-16"/>
+                                </svg>
+                                <svg class="details__collapse" height="16" width="16" aria-hidden="true">
+                                    <use href="#icon-remove-16"/>
+                                </svg>
+                            </span>
+                        </summary>
+                        <div class="details__content">
+                            <p>
+                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                            </p>
+                        </div>
+                    </details>
+                </li>
+                <li>
+                    <details class="details">
+                        <summary class="details__summary">
+                            <span class="details__label">
+                                Description
+                            </span>
+                            <span class="details__icon" hidden>
+                                <svg class="details__expand" height="16" width="16" aria-hidden="true">
+                                    <use href="#icon-add-16"/>
+                                </svg>
+                                <svg class="details__collapse" height="16" width="16" aria-hidden="true">
+                                    <use href="#icon-remove-16"/>
+                                </svg>
+                            </span>
+                        </summary>
+                        <div class="details__content">
+                            <p>
+                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                            </p>
+                        </div>
+                    </details>
+                </li>
+                <li>
+                    <details class="details">
+                        <summary class="details__summary">
+                            <span class="details__label">
+                                Specifications
+                            </span>
+                            <span class="details__icon" hidden>
+                                <svg class="details__expand" height="16" width="16" aria-hidden="true">
+                                    <use href="#icon-add-16"/>
+                                </svg>
+                                <svg class="details__collapse" height="16" width="16" aria-hidden="true">
+                                    <use href="#icon-remove-16"/>
+                                </svg>
+                            </span>
+                        </summary>
+                        <div class="details__content">
+                            <p>
+                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                            </p>
+                        </div>
+                    </details>
+                </li>
+            </ul>
+        </div>
+    </div>
+    <highlight-code type="html">
+    <ul
+                class="accordion accordion--large"
+                role="list"
+                aria-roledescription="accordion"
+            >
+                <li>
+                    <details class="details">
+                        <summary class="details__summary">
+                            <span class="details__label">
+                                Shipping and returns
+                            </span>
+                            <span class="details__icon" hidden>
+                                <svg class="details__expand" height="16" width="16" aria-hidden="true">
+                                    <use href="#icon-add-16"/>
+                                </svg>
+                                <svg class="details__collapse" height="16" width="16" aria-hidden="true">
+                                    <use href="#icon-remove-16"/>
+                                </svg>
+                            </span>
+                        </summary>
+                        <div class="details__content">
+                            ...
+                        </div>
+                    </details>
+                </li>
+                <li>
+                    <details class="details">
+                        <summary class="details__summary">
+                            <span class="details__label">
+                                Description
+                            </span>
+                            <span class="details__icon" hidden>
+                                <svg class="details__expand" height="16" width="16" aria-hidden="true">
+                                    <use href="#icon-add-16"/>
+                                </svg>
+                                <svg class="details__collapse" height="16" width="16" aria-hidden="true">
+                                    <use href="#icon-remove-16"/>
+                                </svg>
+                            </span>
+                        </summary>
+                        <div class="details__content">
+                            ...
+                        </div>
+                    </details>
+                </li>
+                <li>
+                    <details class="details">
+                        <summary class="details__summary">
+                            <span class="details__label">
+                                Specifications
+                            </span>
+                            <span class="details__icon" hidden>
+                                <svg class="details__expand" height="16" width="16" aria-hidden="true">
+                                    <use href="#icon-add-16"/>
+                                </svg>
+                                <svg class="details__collapse" height="16" width="16" aria-hidden="true">
+                                    <use href="#icon-remove-16"/>
+                                </svg>
+                            </span>
+                        </summary>
+                        <div class="details__content">
+                            ...
+                        </div>
+                    </details>
+                </li>
+            </ul>
+    </highlight-code>
+
+    <h3>Auto-Collapsing Accordion</h3>
+    <p>Use the <span class="highlight">name</span> attribute to ensure only one section can be open at a time, with other sections automatically closing.</p>
+    <p><b>NOTE:</b> For browsers that do not yet support this attribute, Javascript is needed to mimic the behavior as a fallback.</p>
+    <div class="demo">
+        <div class="demo__inner">
+            <ul
+                class="accordion"
+                role="list"
+                aria-roledescription="accordion"
+            >
+                <li>
+                    <details class="details" name="accordion-1">
+                        <summary class="details__summary">
+                            <span class="details__label">
+                                Shipping and returns
+                            </span>
+                            <span class="details__icon" hidden>
+                                <svg class="details__expand" height="16" width="16" aria-hidden="true">
+                                    <use href="#icon-add-16"/>
+                                </svg>
+                                <svg class="details__collapse" height="16" width="16" aria-hidden="true">
+                                    <use href="#icon-remove-16"/>
+                                </svg>
+                            </span>
+                        </summary>
+                        <div class="details__content">
+                            <p>
+                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                            </p>
+                        </div>
+                    </details>
+                </li>
+                <li>
+                    <details class="details" name="accordion-1">
+                        <summary class="details__summary">
+                            <span class="details__label">
+                                Text wraps on small screen with this long text
+                            </span>
+                            <span class="details__icon" hidden>
+                                <svg class="details__expand" height="16" width="16" aria-hidden="true">
+                                    <use href="#icon-add-16"/>
+                                </svg>
+                                <svg class="details__collapse" height="16" width="16" aria-hidden="true">
+                                    <use href="#icon-remove-16"/>
+                                </svg>
+                            </span>
+                        </summary>
+                        <div class="details__content">
+                            <p>
+                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                            </p>
+                        </div>
+                    </details>
+                </li>
+                <li>
+                    <details class="details" name="accordion-1">
+                        <summary class="details__summary">
+                            <span class="details__label">
+                                Specifications
+                            </span>
+                            <span class="details__icon" hidden>
+                                <svg class="details__expand" height="16" width="16" aria-hidden="true">
+                                    <use href="#icon-add-16"/>
+                                </svg>
+                                <svg class="details__collapse" height="16" width="16" aria-hidden="true">
+                                    <use href="#icon-remove-16"/>
+                                </svg>
+                            </span>
+                        </summary>
+                        <div class="details__content">
+                            <p>
+                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                            </p>
+                        </div>
+                    </details>
+                </li>
+            </ul>
+        </div>
+    </div>
+    <highlight-code type="html">
+    <ul
+                class="accordion"
+                role="list"
+                aria-roledescription="accordion"
+            >
+                <li>
+                    <details class="details" name="accordion-1">
+                        <summary class="details__summary">
+                            <span class="details__label">
+                                Shipping and returns
+                            </span>
+                            <span class="details__icon" hidden>
+                                <svg class="details__expand" height="16" width="16" aria-hidden="true">
+                                    <use href="#icon-add-16"/>
+                                </svg>
+                                <svg class="details__collapse" height="16" width="16" aria-hidden="true">
+                                    <use href="#icon-remove-16"/>
+                                </svg>
+                            </span>
+                        </summary>
+                        <div class="details__content">
+                            ...
+                        </div>
+                    </details>
+                </li>
+                <li>
+                    <details class="details" name="accordion-1">
+                        <summary class="details__summary">
+                            <span class="details__label">
+                                Description
+                            </span>
+                            <span class="details__icon" hidden>
+                                <svg class="details__expand" height="16" width="16" aria-hidden="true">
+                                    <use href="#icon-add-16"/>
+                                </svg>
+                                <svg class="details__collapse" height="16" width="16" aria-hidden="true">
+                                    <use href="#icon-remove-16"/>
+                                </svg>
+                            </span>
+                        </summary>
+                        <div class="details__content">
+                            ...
+                        </div>
+                    </details>
+                </li>
+                <li>
+                    <details class="details" name="accordion-1">
+                        <summary class="details__summary">
+                            <span class="details__label">
+                                Specifications
+                            </span>
+                            <span class="details__icon" hidden>
+                                <svg class="details__expand" height="16" width="16" aria-hidden="true">
+                                    <use href="#icon-add-16"/>
+                                </svg>
+                                <svg class="details__collapse" height="16" width="16" aria-hidden="true">
+                                    <use href="#icon-remove-16"/>
+                                </svg>
+                            </span>
+                        </summary>
+                        <div class="details__content">
+                            ...
+                        </div>
+                    </details>
+                </li>
+            </ul>
+    </highlight-code>
+</div>
+export const metadata = {
+    "ds-component": {
+        name: "accordion",
+        version: 1.0,
+    },
+};
diff --git a/src/sass/accordion/accordion.scss b/src/sass/accordion/accordion.scss
new file mode 100644
index 000000000..ccb371811
--- /dev/null
+++ b/src/sass/accordion/accordion.scss
@@ -0,0 +1,66 @@
+@import "../variables/variables";
+@import "../mixins/private/token-mixins";
+
+ul.accordion {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+}
+
+/*
+Safari does not recognize ordered or unordered lists as lists in the accessibility tree if they have a list-style value of none, unless the list is nested within the <nav> navigation element. This behavior is intentional and is not considered a bug. To work around this issue, use the use ::marker.
+*/
+ul.accordion ::marker {
+    font-size: 0;
+}
+
+ul.accordion li:not(:last-child) {
+    border-bottom: 1px solid var(--color-stroke-subtle);
+}
+
+ul.accordion summary.details__summary {
+    border-radius: 0;
+    display: flex;
+    font-size: var(--font-size-medium);
+    justify-content: space-between;
+    min-height: 48px;
+    padding: 12px 16px;
+}
+
+ul.accordion details .details__content {
+    margin: 0 16px 6px;
+    opacity: 0;
+    transform: scaleY(0);
+    transform-origin: top;
+    transition:
+        opacity 500ms cubic-bezier(0.3, 0, 0, 1),
+        transform 500ms cubic-bezier(0.3, 0, 0, 1);
+}
+
+ul.accordion details[open] .details__content {
+    opacity: 1;
+    transform: scaleY(1);
+}
+
+ul.accordion--large summary.details__summary {
+    font-size: var(--font-size-large-1);
+    min-height: 52px;
+}
+
+ul.accordion details svg.details__expand,
+ul.accordion details[open] svg.details__collapse {
+    display: block;
+}
+
+ul.accordion details[open] svg.details__expand,
+ul.accordion details svg.details__collapse {
+    display: none;
+}
+
+@media (prefers-reduced-motion) {
+    /* Remove animations */
+    ul.accordion details .details__content,
+    ul.accordion details[open] .details__content {
+        transition: none;
+    }
+}
diff --git a/src/sass/accordion/stories/accordion.stories.js b/src/sass/accordion/stories/accordion.stories.js
new file mode 100644
index 000000000..f17135019
--- /dev/null
+++ b/src/sass/accordion/stories/accordion.stories.js
@@ -0,0 +1,376 @@
+export default { title: "Skin/Accordion" };
+
+export const closed = () => `
+<ul
+    class="accordion"
+    role="list"
+    aria-roledescription="accordion"
+>
+    <li>
+        <details class="details">
+            <summary class="details__summary">
+                <span class="details__label">
+                    Shipping and returns
+                </span>
+                <span class="details__icon" hidden>
+                                <svg class="details__expand" height="16" width="16" aria-hidden="true">
+                                    <use href="#icon-add-16"/>
+                                </svg>
+                                <svg class="details__collapse" height="16" width="16" aria-hidden="true">
+                                    <use href="#icon-remove-16"/>
+                                </svg>
+                            </span>
+            </summary>
+            <div class="details__content">
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+            </div>
+        </details>
+    </li>
+    <li>
+        <details class="details">
+            <summary class="details__summary">
+                <span class="details__label">
+                    Text wraps on small screen with this long text
+                </span>
+                <span class="details__icon" hidden>
+                                <svg class="details__expand" height="16" width="16" aria-hidden="true">
+                                    <use href="#icon-add-16"/>
+                                </svg>
+                                <svg class="details__collapse" height="16" width="16" aria-hidden="true">
+                                    <use href="#icon-remove-16"/>
+                                </svg>
+                            </span>
+            </summary>
+            <div class="details__content">
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+            </div>
+        </details>
+    </li>
+    <li>
+        <details class="details">
+            <summary class="details__summary">
+                <span class="details__label">
+                    Specifications
+                </span>
+                <span class="details__icon" hidden>
+                                <svg class="details__expand" height="16" width="16" aria-hidden="true">
+                                    <use href="#icon-add-16"/>
+                                </svg>
+                                <svg class="details__collapse" height="16" width="16" aria-hidden="true">
+                                    <use href="#icon-remove-16"/>
+                                </svg>
+                            </span>
+            </summary>
+            <div class="details__content">
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+            </div>
+        </details>
+    </li>
+</ul>
+`;
+
+export const open = () => `
+<ul
+    class="accordion"
+    role="list"
+    aria-roledescription="accordion"
+>
+    <li>
+        <details class="details" open>
+            <summary class="details__summary">
+                <span class="details__label">
+                    Shipping and returns
+                </span>
+                <span class="details__icon" hidden>
+                    <svg class="details__expand" height="16" width="16" aria-hidden="true">
+                        <use href="#icon-add-16"/>
+                    </svg>
+                    <svg class="details__collapse" height="16" width="16" aria-hidden="true">
+                        <use href="#icon-remove-16"/>
+                    </svg>
+                </span>
+            </summary>
+            <div class="details__content">
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+            </div>
+        </details>
+    </li>
+    <li>
+        <details class="details">
+            <summary class="details__summary">
+                <span class="details__label">
+                    Text wraps on small screen with this long text
+                </span>
+                <span class="details__icon" hidden>
+                    <svg class="details__expand" height="16" width="16" aria-hidden="true">
+                        <use href="#icon-add-16"/>
+                    </svg>
+                    <svg class="details__collapse" height="16" width="16" aria-hidden="true">
+                        <use href="#icon-remove-16"/>
+                    </svg>
+                </span>
+            </summary>
+            <div class="details__content">
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+            </div>
+        </details>
+    </li>
+    <li>
+        <details class="details">
+            <summary class="details__summary">
+                <span class="details__label">
+                    Specifications
+                </span>
+                <span class="details__icon" hidden>
+                    <svg class="details__expand" height="16" width="16" aria-hidden="true">
+                        <use href="#icon-add-16"/>
+                    </svg>
+                    <svg class="details__collapse" height="16" width="16" aria-hidden="true">
+                        <use href="#icon-remove-16"/>
+                    </svg>
+                </span>
+            </summary>
+            <div class="details__content">
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+            </div>
+        </details>
+    </li>
+</ul>
+`;
+
+export const textSpacing = () => `
+<ul
+    class="accordion demo-a11y-text-spacing"
+    role="list"
+    aria-roledescription="accordion"
+>
+    <li>
+        <details class="details" open>
+            <summary class="details__summary">
+                <span class="details__label">
+                    Shipping and returns
+                </span>
+                <span class="details__icon" hidden>
+                    <svg class="details__expand" height="16" width="16" aria-hidden="true">
+                        <use href="#icon-add-16"/>
+                    </svg>
+                    <svg class="details__collapse" height="16" width="16" aria-hidden="true">
+                        <use href="#icon-remove-16"/>
+                    </svg>
+                </span>
+            </summary>
+            <div class="details__content">
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+            </div>
+        </details>
+    </li>
+    <li>
+        <details class="details">
+            <summary class="details__summary">
+                <span class="details__label">
+                    Text wraps on small screen with this long text
+                </span>
+                <span class="details__icon" hidden>
+                    <svg class="details__expand" height="16" width="16" aria-hidden="true">
+                        <use href="#icon-add-16"/>
+                    </svg>
+                    <svg class="details__collapse" height="16" width="16" aria-hidden="true">
+                        <use href="#icon-remove-16"/>
+                    </svg>
+                </span>
+            </summary>
+            <div class="details__content">
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+            </div>
+        </details>
+    </li>
+    <li>
+        <details class="details">
+            <summary class="details__summary">
+                <span class="details__label">
+                    Specifications
+                </span>
+                <span class="details__icon" hidden>
+                    <svg class="details__expand" height="16" width="16" aria-hidden="true">
+                        <use href="#icon-add-16"/>
+                    </svg>
+                    <svg class="details__collapse" height="16" width="16" aria-hidden="true">
+                        <use href="#icon-remove-16"/>
+                    </svg>
+                </span>
+            </summary>
+            <div class="details__content">
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+            </div>
+        </details>
+    </li>
+</ul>
+`;
+
+export const large = () => `
+<ul
+  class="accordion accordion--large"
+  role="list"
+  aria-roledescription="accordion"
+>
+  <li>
+      <details class="details">
+          <summary class="details__summary">
+              <span class="details__label">
+                  Shipping and returns
+              </span>
+              <span class="details__icon" hidden>
+                <svg class="details__expand" height="16" width="16" aria-hidden="true">
+                    <use href="#icon-add-16"/>
+                </svg>
+                <svg class="details__collapse" height="16" width="16" aria-hidden="true">
+                    <use href="#icon-remove-16"/>
+                </svg>
+            </span>
+          </summary>
+          <div class="details__content">
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+            </div>
+      </details>
+  </li>
+  <li>
+      <details class="details">
+          <summary class="details__summary">
+              <span class="details__label">
+                  Description
+              </span>
+              <span class="details__icon" hidden>
+                <svg class="details__expand" height="16" width="16" aria-hidden="true">
+                    <use href="#icon-add-16"/>
+                </svg>
+                <svg class="details__collapse" height="16" width="16" aria-hidden="true">
+                    <use href="#icon-remove-16"/>
+                </svg>
+            </span>
+          </summary>
+          <div class="details__content">
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+            </div>
+      </details>
+  </li>
+  <li>
+      <details class="details">
+          <summary class="details__summary">
+              <span class="details__label">
+                  Specifications
+              </span>
+              <span class="details__icon" hidden>
+                <svg class="details__expand" height="16" width="16" aria-hidden="true">
+                    <use href="#icon-add-16"/>
+                </svg>
+                <svg class="details__collapse" height="16" width="16" aria-hidden="true">
+                    <use href="#icon-remove-16"/>
+                </svg>
+            </span>
+          </summary>
+          <div class="details__content">
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+            </div>
+      </details>
+  </li>
+</ul>
+`;
+
+export const autoCollapse = () => `
+<ul
+  class="accordion"
+  role="list"
+  aria-roledescription="accordion"
+>
+  <li>
+      <details class="details" name="accordion-1">
+          <summary class="details__summary">
+              <span class="details__label">
+                  Shipping and returns
+              </span>
+              <span class="details__icon" hidden>
+                <svg class="details__expand" height="16" width="16" aria-hidden="true">
+                    <use href="#icon-add-16"/>
+                </svg>
+                <svg class="details__collapse" height="16" width="16" aria-hidden="true">
+                    <use href="#icon-remove-16"/>
+                </svg>
+            </span>
+          </summary>
+          <div class="details__content">
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+            </div>
+      </details>
+  </li>
+  <li>
+      <details class="details" name="accordion-1">
+          <summary class="details__summary">
+              <span class="details__label">
+                  Text wraps on small screen with this long text
+              </span>
+              <span class="details__icon" hidden>
+                <svg class="details__expand" height="16" width="16" aria-hidden="true">
+                    <use href="#icon-add-16"/>
+                </svg>
+                <svg class="details__collapse" height="16" width="16" aria-hidden="true">
+                    <use href="#icon-remove-16"/>
+                </svg>
+            </span>
+          </summary>
+          <div class="details__content">
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+            </div>
+      </details>
+  </li>
+  <li>
+      <details class="details" name="accordion-1">
+          <summary class="details__summary">
+              <span class="details__label">
+                  Specifications
+              </span>
+              <span class="details__icon" hidden>
+                <svg class="details__expand" height="16" width="16" aria-hidden="true">
+                    <use href="#icon-add-16"/>
+                </svg>
+                <svg class="details__collapse" height="16" width="16" aria-hidden="true">
+                    <use href="#icon-remove-16"/>
+                </svg>
+            </span>
+          </summary>
+          <div class="details__content">
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+            </div>
+      </details>
+  </li>
+</ul>
+`;
diff --git a/src/sass/accordion/stories/cascade.stories.js b/src/sass/accordion/stories/cascade.stories.js
new file mode 100644
index 000000000..670309609
--- /dev/null
+++ b/src/sass/accordion/stories/cascade.stories.js
@@ -0,0 +1,232 @@
+export default { title: "Skin/Accordion/Cascade" };
+
+export const RTL = () => `
+<div dir="rtl">
+  <ul
+    class="accordion"
+    role="list"
+    aria-roledescription="accordion"
+  >
+      <li>
+          <details class="details">
+              <summary class="details__summary">
+                  <span class="details__label">
+                      Shipping and returns
+                  </span>
+                  <span class="details__icon" hidden>
+                    <svg class="details__expand" height="16" width="16" aria-hidden="true">
+                        <use href="#icon-add-16"/>
+                    </svg>
+                    <svg class="details__collapse" height="16" width="16" aria-hidden="true">
+                        <use href="#icon-remove-16"/>
+                    </svg>
+                </span>
+              </summary>
+              <div class="details__content">
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+            </div>
+          </details>
+      </li>
+      <li>
+          <details class="details">
+              <summary class="details__summary">
+                  <span class="details__label">
+                      Text wraps on small screen with this long text
+                  </span>
+                  <span class="details__icon" hidden>
+                    <svg class="details__expand" height="16" width="16" aria-hidden="true">
+                        <use href="#icon-add-16"/>
+                    </svg>
+                    <svg class="details__collapse" height="16" width="16" aria-hidden="true">
+                        <use href="#icon-remove-16"/>
+                    </svg>
+                </span>
+              </summary>
+              <div class="details__content">
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+            </div>
+          </details>
+      </li>
+      <li>
+          <details class="details">
+              <summary class="details__summary">
+                  <span class="details__label">
+                      Specifications
+                  </span>
+                  <span class="details__icon" hidden>
+                    <svg class="details__expand" height="16" width="16" aria-hidden="true">
+                        <use href="#icon-add-16"/>
+                    </svg>
+                    <svg class="details__collapse" height="16" width="16" aria-hidden="true">
+                        <use href="#icon-remove-16"/>
+                    </svg>
+                </span>
+              </summary>
+              <div class="details__content">
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+            </div>
+          </details>
+      </li>
+  </ul>
+</div>
+`;
+
+export const colour = () => `
+<div style="color: red">
+    <ul
+    class="accordion"
+    role="list"
+    aria-roledescription="accordion"
+  >
+      <li>
+          <details class="details">
+              <summary class="details__summary">
+                  <span class="details__label">
+                      Shipping and returns
+                  </span>
+                  <span class="details__icon" hidden>
+                    <svg class="details__expand" height="16" width="16" aria-hidden="true">
+                        <use href="#icon-add-16"/>
+                    </svg>
+                    <svg class="details__collapse" height="16" width="16" aria-hidden="true">
+                        <use href="#icon-remove-16"/>
+                    </svg>
+                </span>
+              </summary>
+              <div class="details__content">
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+            </div>
+          </details>
+      </li>
+      <li>
+          <details class="details">
+              <summary class="details__summary">
+                  <span class="details__label">
+                      Text wraps on small screen with this long text
+                  </span>
+                  <span class="details__icon" hidden>
+                    <svg class="details__expand" height="16" width="16" aria-hidden="true">
+                        <use href="#icon-add-16"/>
+                    </svg>
+                    <svg class="details__collapse" height="16" width="16" aria-hidden="true">
+                        <use href="#icon-remove-16"/>
+                    </svg>
+                </span>
+              </summary>
+              <div class="details__content">
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+            </div>
+          </details>
+      </li>
+      <li>
+          <details class="details">
+              <summary class="details__summary">
+                  <span class="details__label">
+                      Specifications
+                  </span>
+                  <span class="details__icon" hidden>
+                    <svg class="details__expand" height="16" width="16" aria-hidden="true">
+                        <use href="#icon-add-16"/>
+                    </svg>
+                    <svg class="details__collapse" height="16" width="16" aria-hidden="true">
+                        <use href="#icon-remove-16"/>
+                    </svg>
+                </span>
+              </summary>
+              <div class="details__content">
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+            </div>
+          </details>
+      </li>
+  </ul>
+</div>
+`;
+
+export const fontSize = () => `
+<div style="font-size: 200%">
+    <ul
+    class="accordion"
+    role="list"
+    aria-roledescription="accordion"
+  >
+      <li>
+          <details class="details">
+              <summary class="details__summary">
+                  <span class="details__label">
+                      Shipping and returns
+                  </span>
+                  <span class="details__icon" hidden>
+                    <svg class="details__expand" height="16" width="16" aria-hidden="true">
+                        <use href="#icon-add-16"/>
+                    </svg>
+                    <svg class="details__collapse" height="16" width="16" aria-hidden="true">
+                        <use href="#icon-remove-16"/>
+                    </svg>
+                </span>
+              </summary>
+              <div class="details__content">
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+            </div>
+          </details>
+      </li>
+      <li>
+          <details class="details">
+              <summary class="details__summary">
+                  <span class="details__label">
+                      Text wraps on small screen with this long text
+                  </span>
+                  <span class="details__icon" hidden>
+                    <svg class="details__expand" height="16" width="16" aria-hidden="true">
+                        <use href="#icon-add-16"/>
+                    </svg>
+                    <svg class="details__collapse" height="16" width="16" aria-hidden="true">
+                        <use href="#icon-remove-16"/>
+                    </svg>
+                </span>
+              </summary>
+              <div class="details__content">
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+            </div>
+          </details>
+      </li>
+      <li>
+          <details class="details">
+              <summary class="details__summary">
+                  <span class="details__label">
+                      Specifications
+                  </span>
+                  <span class="details__icon" hidden>
+                    <svg class="details__expand" height="16" width="16" aria-hidden="true">
+                        <use href="#icon-add-16"/>
+                    </svg>
+                    <svg class="details__collapse" height="16" width="16" aria-hidden="true">
+                        <use href="#icon-remove-16"/>
+                    </svg>
+                </span>
+              </summary>
+              <div class="details__content">
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+            </div>
+          </details>
+      </li>
+  </ul>
+</div>
+`;
diff --git a/src/sass/bundles/skin-headless.scss b/src/sass/bundles/skin-headless.scss
index bbd25e316..545d6ee87 100644
--- a/src/sass/bundles/skin-headless.scss
+++ b/src/sass/bundles/skin-headless.scss
@@ -2,6 +2,7 @@
 @import "../marketsans/marketsans";
 @import "../global/global";
 @import "../utility/utility";
+@import "../accordion/accordion";
 @import "../alert-dialog/alert-dialog";
 @import "../avatar/avatar";
 @import "../badge/badge";