diff --git a/packages/react/src/components/Quote/Quote.module.css b/packages/react/src/components/Quote/Quote.module.css
new file mode 100644
index 0000000..fca2288
--- /dev/null
+++ b/packages/react/src/components/Quote/Quote.module.css
@@ -0,0 +1,27 @@
+.quoteWrapper {
+ border-radius: var(--fds-border_radius-interactive);
+ background: var(--fds-brand-tertiary-600);
+ padding-left: var(--fds-spacing-2);
+ box-shadow: 0 1px 4px 0 rgba(0 0 0 / 0.1);
+ overflow: hidden;
+ width: 100%;
+}
+
+.quoteInfo {
+ display: flex;
+ background: var(--fds-semantic-background-default);
+ flex-direction: column;
+ padding: var(--fds-spacing-8);
+}
+
+.quote {
+ color: var(--semantic-text-neutral-default);
+ font: var(--fds-typography-interactive-large);
+ margin-top: 0;
+ margin-bottom: var(--fds-spacing-2);
+}
+
+.author {
+ font: var(--fds-typography-paragraph-small);
+ color: var(--semantic-text-neutral-subtle);
+}
diff --git a/packages/react/src/components/Quote/Quote.stories.tsx b/packages/react/src/components/Quote/Quote.stories.tsx
new file mode 100644
index 0000000..c214772
--- /dev/null
+++ b/packages/react/src/components/Quote/Quote.stories.tsx
@@ -0,0 +1,34 @@
+import { Quote } from './Quote';
+
+export default {
+ title: 'Components/Quote',
+ component: Quote,
+ tags: ['autodocs'],
+ argTypes: {
+ children: { control: 'text' },
+ },
+ parameters: {
+ layout: 'centered',
+ backgrounds: {
+ default: 'Light',
+ values: [
+ {
+ name: 'Dark',
+ value: '#1E2B3C',
+ },
+ {
+ name: 'Light',
+ value: '#00000',
+ },
+ ],
+ },
+ },
+};
+
+export const Normal = {
+ args: {
+ children:
+ 'Do not go where the path may lead, go instead where there is no path and leave a trail.',
+ author: 'Ralph Waldo Emerson',
+ },
+};
diff --git a/packages/react/src/components/Quote/Quote.test.tsx b/packages/react/src/components/Quote/Quote.test.tsx
new file mode 100644
index 0000000..a62a80b
--- /dev/null
+++ b/packages/react/src/components/Quote/Quote.test.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { render as renderRtl, screen } from '@testing-library/react';
+
+import type { QuoteProps } from './Quote';
+import { Quote } from './Quote';
+
+describe('Quote', () => {
+ it('should render the quote text and author correctly', () => {
+ const author = 'John Doe';
+ const quoteText = 'This is a test quote';
+
+ render({
+ author: author,
+ children: quoteText,
+ });
+ expect(screen.getByText(quoteText)).toBeInTheDocument();
+ expect(screen.getByText(author)).toBeInTheDocument();
+ });
+
+ it('should apply the "quoteWrapper" class', () => {
+ const { container } = render({
+ author: 'Author',
+ children: 'Quote Text',
+ });
+ expect(container.querySelector('.quoteWrapper')).toBeInTheDocument();
+ });
+});
+
+const render = (props: QuoteProps) =>
+ renderRtl({props.children}
);
diff --git a/packages/react/src/components/Quote/Quote.tsx b/packages/react/src/components/Quote/Quote.tsx
new file mode 100644
index 0000000..d37a666
--- /dev/null
+++ b/packages/react/src/components/Quote/Quote.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import cn from 'classnames';
+
+import classes from './Quote.module.css';
+
+interface QuoteProps {
+ author: string;
+ children: React.ReactNode;
+}
+
+const Quote = ({ children, author }: QuoteProps) => {
+ return (
+
{children}
+ {author} +