diff --git a/drupal_cms_olivero/components/testimonial/images/arrow.svg b/drupal_cms_olivero/components/testimonial/images/arrow.svg
new file mode 100644
index 0000000000000000000000000000000000000000..55f9dfa15f5c7290ff99cf397dbc471a40896083
--- /dev/null
+++ b/drupal_cms_olivero/components/testimonial/images/arrow.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path d="M21.0459 12.796L14.2959 19.546C14.0846 19.7573 13.7979 19.8761 13.4991 19.8761C13.2002 19.8761 12.9135 19.7573 12.7022 19.546C12.4908 19.3346 12.3721 19.048 12.3721 18.7491C12.3721 18.4502 12.4908 18.1636 12.7022 17.9522L17.5312 13.125H3.75C3.45163 13.125 3.16548 13.0065 2.9545 12.7955C2.74353 12.5846 2.625 12.2984 2.625 12C2.625 11.7017 2.74353 11.4155 2.9545 11.2045C3.16548 10.9936 3.45163 10.875 3.75 10.875H17.5312L12.7041 6.04504C12.4927 5.8337 12.374 5.54705 12.374 5.24817C12.374 4.94928 12.4927 4.66264 12.7041 4.45129C12.9154 4.23995 13.2021 4.12122 13.5009 4.12122C13.7998 4.12122 14.0865 4.23995 14.2978 4.45129L21.0478 11.2013C21.1527 11.3059 21.2359 11.4303 21.2926 11.5672C21.3493 11.7041 21.3784 11.8508 21.3782 11.999C21.3781 12.1472 21.3486 12.2939 21.2916 12.4307C21.2346 12.5674 21.1511 12.6916 21.0459 12.796Z"/>
+</svg>
\ No newline at end of file
diff --git a/drupal_cms_olivero/components/testimonial/images/example-gizmo.jpg b/drupal_cms_olivero/components/testimonial/images/example-gizmo.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..a401026bca7c8651239827cf3859661b1d404200
Binary files /dev/null and b/drupal_cms_olivero/components/testimonial/images/example-gizmo.jpg differ
diff --git a/drupal_cms_olivero/components/testimonial/testimonial.component.yml b/drupal_cms_olivero/components/testimonial/testimonial.component.yml
new file mode 100644
index 0000000000000000000000000000000000000000..80e617545a5894b0a36699209f570adff8845f0a
--- /dev/null
+++ b/drupal_cms_olivero/components/testimonial/testimonial.component.yml
@@ -0,0 +1,51 @@
+$schema: https://git.drupalcode.org/project/drupal/-/raw/HEAD/core/assets/schemas/v1/metadata.schema.json
+name: Testimonial
+status: experimental
+props:
+ type: object
+ required:
+ - content
+ - name
+ properties:
+ image:
+ $ref: json-schema-definitions://experience_builder.module/image
+ type: object
+ title: Image
+ examples:
+ - src: images/example-gizmo.jpg
+ alt: 'Gizmo (an ugly dog) smiling for the camera'
+ width: 400
+ height: 400
+ content:
+ $ref: json-schema-definitions://experience_builder.module/textarea
+ type: string
+ title: Content
+ description: The testimonial content
+ examples:
+ - "I don't always require pets. But when I do, I insist they be bestowed upon my belly."
+ name:
+ type: string
+ title: Name
+ description: The name associated with the testimonial
+ examples:
+ - Gizmo Main
+ role:
+ type: string
+ title: Role
+ description: Role / Extra info
+ examples:
+ - "The most interesting dog in the world"
+ link_text:
+ type: string
+ title: Link text
+ description: "The optional link text, default: Learn more"
+ default: Learn more
+ examples:
+ - Learn more
+ link_url:
+ type: string
+ format: uri-reference
+ title: Link URL
+ description: The link URL for the link text
+ examples:
+ - https://example.com
diff --git a/drupal_cms_olivero/components/testimonial/testimonial.css b/drupal_cms_olivero/components/testimonial/testimonial.css
new file mode 100644
index 0000000000000000000000000000000000000000..557fa67050cbe7fddc025eeb5a34ef7c555c3e4a
--- /dev/null
+++ b/drupal_cms_olivero/components/testimonial/testimonial.css
@@ -0,0 +1,123 @@
+.testimonial {
+ --indent-start: var(--sp4);
+
+ container-type: inline-size;
+ margin-block: var(--sp3);
+}
+
+.testimonial__top {
+ margin-block-start: var(--sp2);
+
+ @container (min-width: 600px) {
+ display: flex;
+ flex-direction: row-reverse;
+ align-items: center;
+ gap: var(--sp4);
+ }
+}
+
+.testimonial__image {
+ max-width: 100px;
+ margin-block-end: var(--sp1);
+ margin-inline-start: var(--indent-start);
+
+ @container (min-width: 600px) {
+ max-width: 200px;
+ margin-block-end: unset;
+ margin-inline-start: unset;
+ }
+}
+
+.testimonial__source {
+ display: block;
+ margin-inline-start: var(--indent-start);
+ font-style: normal;
+ font-size: 14px;
+}
+
+.testimonial__name {
+ display: inline-block;
+ font-weight: 600;
+ color: var(--color--gray-60);
+}
+
+.testimonial__role {
+ font-weight: 400;
+ color: var(--color--gray-45);
+
+ &::before {
+ margin-inline: var(--sp1);
+ content: "|";
+ color: var(--color--gray-70);
+ }
+}
+
+.testimonial__content {
+ flex: 2;
+ position: relative;
+ word-break: auto-phrase;
+ margin-block: var(--sp1);
+ margin-inline: 0;
+ padding-inline-start: var(--indent-start);
+ letter-spacing: -0.01em;
+ font-family: var(--font-serif);
+ font-size: 21px;
+ line-height: var(--sp2);
+
+ @container (min-width: 400px) {
+ margin-block: 0 var(--sp2);
+ font-size: 1.5rem;
+ line-height: var(--sp2);
+ }
+
+ &::before {
+ position: absolute;
+ inset-block-start: 0;
+ inset-inline-start: 0;
+ content: "\201C";
+ color: var(--color--primary-60);
+ font-size: 3.5rem;
+ }
+
+ &:dir(rtl)::before {
+ scale: -1;
+ z-index: 1;
+ translate: 0 -50%;
+ }
+
+ &::after {
+ position: absolute;
+ inset-block-end: 0;
+ inset-inline-start: 0;
+ width: var(--sp1);
+ height: calc(100% - 1.875rem);
+ margin-inline-start: 0.25rem;
+ content: "";
+ background: var(--color--gray-100);
+ }
+}
+
+.testimonial__footer {
+ padding-inline-start: var(--indent-start);
+}
+
+.testimonial__link[class][class] {
+ display: inline-flex;
+ align-items: center;
+ gap: 4px;
+ height: auto;
+ margin-block: var(--sp1-5) 0;
+ font-size: 16px;
+
+ svg {
+ width: 16px;
+
+ &:dir(rtl) {
+ scale: -1;
+ }
+ }
+
+ path {
+ fill: currentColor;
+ }
+}
diff --git a/drupal_cms_olivero/components/testimonial/testimonial.twig b/drupal_cms_olivero/components/testimonial/testimonial.twig
new file mode 100644
index 0000000000000000000000000000000000000000..d703351b77eadfc619d3423b9e53b506d398bc39
--- /dev/null
+++ b/drupal_cms_olivero/components/testimonial/testimonial.twig
@@ -0,0 +1,39 @@
+{%
+ set classes = [
+ 'testimonial',
+ not image ? 'testimonial--has-no-image',
+ ]
+%}
+
+<div{{attributes.addClass(classes)}}>
+ <div class="testimonial__top">
+ {% if image.src %}
+ <div>
+ <img class="testimonial__image" loading="lazy" src="{{ image.src }}" alt="{{ image.alt }}" width="{{ image.width }}" height="{{ image.height }}">
+ </div>
+ {% endif %}
+ <blockquote class="testimonial__content">
+ {{ content }}
+ </blockquote>
+ </div>
+
+ {% if name or source %}
+ <cite class="testimonial__source">
+ {%- if name -%}
+ <span class="testimonial__name">{{ name }}</span>
+ {%- endif -%}
+ {%- if role -%}
+ <span class="testimonial__role">{{ role }}</span>
+ {%- endif -%}
+ </cite>
+ {% endif %}
+
+ {% if link_url %}
+ <div class="testimonial__footer">
+ <a href="{{ link_url }}" class="testimonial__link button button--link">
+ {{ link_text|default('Learn more'|t) }}
+ {{ include (componentMetadata.path ~ '/images/arrow.svg') }}
+ </a>
+ </div>
+ {% endif %}
+</div>