Quote

src/components/card/Card.style.scss

@@ -2,10 +2,10 @@
 
 .card {
   padding: .5rem;
+  position: relative;
   overflow: hidden;
 
-  > * {
-
+  * {
 
     &.card__section > img {
       border-radius: .5rem;

src/components/quote/Quote.stories.tsx

@@ -0,0 +1,61 @@
+import {Meta, StoryObj} from "@storybook/react";
+import {Quote} from "./Quote";
+import React from "react";
+import {Colors} from "../../utils/types";
+
+const meta: Meta = {
+    title: "Quote",
+    component: Quote,
+    argTypes: {
+        color: {
+            options: Colors,
+            control: {type: "radio"}
+        },
+        variant: {
+            options: ['none', 'normal', 'filled', 'outlined'],
+            control: {type: 'radio'},
+        },
+        gradient: {
+            type: "boolean"
+        },
+        gradientPosition: {
+            options: ["top-left", "top-right", "bottom-right", "bottom-left"],
+            control: {type: 'radio'},
+        },
+        outline: {
+            type: "boolean"
+        },
+        inlineBorder: {
+            type: "boolean"
+        }
+    }
+}
+
+export default meta;
+
+type QuoteStory = StoryObj<typeof Quote>;
+
+
+export const QuoteSample: QuoteStory = {
+    render: (args) => {
+        return <Quote  {...args} name={"Nico Sammito"}
+                      logo={"https://avatars.githubusercontent.com/u/150623800?s=200&v=4"}
+                      position={"Co-founder"}
+                      style={{width: "300px"}}>
+            My favorite UX feedback from customers is:
+            "How is the app so fast?"
+            Because we’ve built on Next.js and Vercel since day one, our pages load in an instant,
+            which is important when it comes to mission-critical software.
+        </Quote>
+    },
+    args: {
+        variant: "outlined",
+        color: "secondary",
+        outline: false,
+        gradient: true,
+        gradientPosition: "bottom-left",
+        inlineBorder: true
+    }
+}
+
+

src/components/quote/Quote.style.scss

@@ -0,0 +1,17 @@
+.quote {
+
+  position: relative;
+
+  &__text {
+    &:before, &:after {
+      position: relative;
+      content: "\”";
+    }
+  }
+
+  &__img {
+    width: 20%;
+    max-width: 100px;
+    filter: brightness(0) invert(1);
+  }
+}

src/components/quote/Quote.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import {TablerIconsProps} from "@tabler/icons-react";
+import Card, {CardType} from "../card/Card";
+import "./Quote.style.scss"
+import Text from "../FontSizes/Text";
+
+export interface QuoteType extends Omit<CardType, "children"> {
+    children: string
+    logo: string
+    name: string
+    position: string
+    // defaults to true
+    inlineBorder?: boolean
+}
+
+export const Quote: React.FC<QuoteType> = (props) => {
+    const {logo, name, position, inlineBorder = true, children, ...args} = props;
+    return <Card {...args}>
+        <div className={"quote"}>
+            <Card.Section border={inlineBorder}>
+                <div className={"quote__text"}>
+                    {children}
+                </div>
+            </Card.Section>
+            <Card.Section>
+                <img className={"quote__img"} src={logo} alt={"logo of quote"}/>
+            </Card.Section>
+            <Card.Section>
+                <Text size={"md"} hierarchy={"primary"}>{name}</Text><br/>
+                <Text size={"sm"}>{position}</Text>
+            </Card.Section>
+        </div>
+    </Card>
+}