diff --git a/drupal_cms_olivero/components/accordion-item/accordion-item.component.yml b/drupal_cms_olivero/components/accordion-item/accordion-item.component.yml
new file mode 100644
index 0000000000000000000000000000000000000000..382e50d5d53ef3b8597b745920c7d21ac868b4aa
--- /dev/null
+++ b/drupal_cms_olivero/components/accordion-item/accordion-item.component.yml
@@ -0,0 +1,16 @@
+$schema: https://git.drupalcode.org/project/drupal/-/raw/HEAD/core/assets/schemas/v1/metadata.schema.json
+name: Accordion Item
+status: experimental
+props:
+  type: object
+  required:
+    - title
+  properties:
+    title:
+      type: string
+      title: Accordion item title
+      examples:
+        - 'The title of the accordion item'
+slots:
+  accordion_content:
+    title: Accordion content
diff --git a/drupal_cms_olivero/components/accordion-item/accordion-item.css b/drupal_cms_olivero/components/accordion-item/accordion-item.css
new file mode 100644
index 0000000000000000000000000000000000000000..6b379d06d7f61a17c6c37a7d9064e86c5558d319
--- /dev/null
+++ b/drupal_cms_olivero/components/accordion-item/accordion-item.css
@@ -0,0 +1,84 @@
+.accordion-item {
+  --accordion-start-padding: 32px;
+
+  interpolate-size: allow-keywords;
+
+  &:not(:last-child) {
+    margin-bottom: 27px;
+  }
+
+  /* Animate the opening and closing if browser support and user preference allows. */
+  @media (prefers-reduced-motion: no-preference) {
+    @supports selector(::details-content) {
+      &::details-content {
+        height: 0px;
+        transition: height 0.2s linear;
+        content-visibility: auto !important;
+        overflow: clip;
+      }
+
+      &[open]::details-content {
+        height: auto;
+      }
+    }
+  }
+}
+
+.accordion-item__header {
+  position: relative;
+  padding-inline-start: var(--accordion-start-padding);
+  list-style: none;
+  font-weight: 700;
+  font-size: 1.32rem;
+  color: var(--color--gray-5);
+  cursor: pointer;
+}
+
+.accordion-item__icon {
+  position: absolute;
+  inset-inline-start: 0;
+  inset-block-start: 2px;
+  width: 20px;
+  height: 20px;
+  background: var(--color-text-primary-medium);
+
+  &::before {
+    position: absolute;
+    inset: 0;
+    margin: auto;
+    content: "";
+    rotate: 225deg;
+    translate: -1px 0;
+    width: 6px;
+    height: 6px;
+    border-left: solid 1px var(--color--white);
+    border-bottom: solid 1px var(--color--white);
+    transition: all 0.2s;
+  }
+
+  :dir(rtl) &::before {
+    rotate: 45deg;
+    translate: 1px 0;
+  }
+
+  .accordion-item[open] &::before {
+    rotate: 315deg;
+    translate: 0 -2px;
+  }
+
+  .accordion-item[open]:dir(rtl) &::before {
+    rotate: -45deg;
+    translate: 0 -2px;
+  }
+}
+
+.accordion-item__content {
+  margin-top: var(--sp0-5);
+  padding-inline-start: var(--accordion-start-padding);
+  font-size: 1rem;
+  line-height: 1.5rem;
+
+  @container (min-width: 600px) {
+    line-height: 2.25rem;
+  }
+}
diff --git a/drupal_cms_olivero/components/accordion-item/accordion-item.twig b/drupal_cms_olivero/components/accordion-item/accordion-item.twig
new file mode 100644
index 0000000000000000000000000000000000000000..254cb5856c58fd5b644e07c9f9490b2e44eb687b
--- /dev/null
+++ b/drupal_cms_olivero/components/accordion-item/accordion-item.twig
@@ -0,0 +1,9 @@
+<details class="accordion-item">
+  <summary class="accordion-item__header">
+  <div class="accordion-item__icon"></div>
+    {{ title }}
+  </summary>
+  <div class="text-content accordion-item__content">
+    {% block accordion_content %}{% endblock %}
+  </div>
+</details>
diff --git a/drupal_cms_olivero/components/accordion/accordion.component.yml b/drupal_cms_olivero/components/accordion/accordion.component.yml
new file mode 100644
index 0000000000000000000000000000000000000000..71c33ac2005376ec942ae916a01afece8071ba40
--- /dev/null
+++ b/drupal_cms_olivero/components/accordion/accordion.component.yml
@@ -0,0 +1,22 @@
+$schema: https://git.drupalcode.org/project/drupal/-/raw/HEAD/core/assets/schemas/v1/metadata.schema.json
+name: Accordion
+status: experimental
+props:
+  type: object
+  properties:
+    title:
+      type: string
+      title: Title
+      examples:
+        - 'Section Title'
+    description:
+      $ref: json-schema-definitions://experience_builder.module/textarea
+      type: string
+      title: Description
+      description: A brief description for the accordion Section
+      examples:
+        - 'A text content for the accordion section.'
+slots:
+  items:
+    title: Items
+    description: The accordion items
diff --git a/drupal_cms_olivero/components/accordion/accordion.css b/drupal_cms_olivero/components/accordion/accordion.css
new file mode 100644
index 0000000000000000000000000000000000000000..dba15408f3c138c23be7ac2fac315367054c10b5
--- /dev/null
+++ b/drupal_cms_olivero/components/accordion/accordion.css
@@ -0,0 +1,27 @@
+.accordion-header {
+  container-type: inline-size;
+  padding-inline-start: 20px;
+  border-inline-start: 6px solid var(--color--primary-50);
+  margin-bottom: 25px;
+
+  @container (min-width: 600px) {
+    margin-bottom: 45px;
+    padding-inline-start: 36px;
+  }
+}
+
+.accordion-header__title {
+  margin: 0;
+  padding: 0;
+  font-weight: 800;
+  color: var(--color--gray-5);
+  letter-spacing: -0.045rem;
+  font-size: 24px;
+  line-height: var(--sp2);
+
+  @container (min-width: 600px) {
+    font-size: 36px;
+    line-height: var(--sp3);
+    margin-bottom: 9px;
+  }
+}
diff --git a/drupal_cms_olivero/components/accordion/accordion.twig b/drupal_cms_olivero/components/accordion/accordion.twig
new file mode 100644
index 0000000000000000000000000000000000000000..206917dd5b2def46f6fa8114c800de2a481362e8
--- /dev/null
+++ b/drupal_cms_olivero/components/accordion/accordion.twig
@@ -0,0 +1,12 @@
+{% if title or header %}
+  <div class="accordion-header">
+    {% if title %}
+      <h2 class="accordion-header__title">{{ title }}</h2>
+    {% endif %}
+    {% if description %}
+      <p class="text-content">{{ description }}</p>
+    {% endif %}
+  </div>
+{% endif %}
+
+{% block items %}{% endblock %}