Pincards
Category: Testimonials
I'm sharing you a component below for reference the HTML structure with the exact COMPUTED CSS styles inlined into the style tags. Use this to understand exactly how it looks (dimensions, colors, flexbox behavior):
<div data-framer-name="Testimonial List" style="display: flex; position: relative; width: 1460.8px; height: 752.8px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: row; justify-content: flex-start; align-items: center; gap: 60px; opacity: 1; overflow: visible;"><div data-framer-name="List Inner" style="display: flex; position: relative; width: 390px; height: 752.8px; max-width: 390px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 1 0 0px; flex-flow: column; justify-content: flex-start; align-items: flex-start; gap: 160px; opacity: 1; overflow: visible;"><div style="display: contents; position: static; width: auto; height: auto; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible;"><div data-framer-name="Testimonial Item" draggable="false" tabindex="0" style="will-change: transform; opacity: 1; transform: none; user-select: none; touch-action: none; display: flex; position: relative; width: 315px; height: 295.6px; padding: 80px 40px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: column; justify-content: flex-start; align-items: flex-start; gap: 30px; overflow: visible; cursor: grab;"><div data-framer-name="BG Shape" style="display: block; position: absolute; left: -0.4875px; right: 0.4875px; width: 315px; height: 295.6px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: row; opacity: 1; z-index: 0; overflow: hidden; cursor: grab;"><div style="position: absolute; border-radius: inherit; corner-shape: inherit; inset: 0px; display: block; width: 315px; height: 295.6px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: grab;" data-framer-background-image-wrapper="true"><img decoding="auto" width="630" height="576" sizes="315px" srcset="https://framerusercontent.com/images/tWCy5E7KC7XVt5Iy0BrHs1UdU.png?scale-down-to=512&width=630&height=576 512w,https://framerusercontent.com/images/tWCy5E7KC7XVt5Iy0BrHs1UdU.png?width=630&height=576 630w" src="https://framerusercontent.com/images/tWCy5E7KC7XVt5Iy0BrHs1UdU.png?width=630&height=576" alt="BG Shape" style="display: block; width: 315px; height: 295.6px; border-radius: inherit; corner-shape: inherit; object-position: center center; object-fit: contain; position: static; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: clip; cursor: grab;"></div></div><div data-framer-component-type="RichTextContainer" style="transform: none; display: flex; position: relative; width: 235px; height: 86.4px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: column; justify-content: flex-start; opacity: 1; overflow: visible; cursor: grab;"><p data-styles-preset="M4VKByVbJ" style="--framer-text-alignment: left; --framer-text-color: var(--token-2869e542-b811-438d-9253-a0fb694a1ff1, rgb(61, 33, 1)); display: block; position: static; width: 235px; height: 86.4px; border: 0px none rgb(61, 33, 1); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(61, 33, 1); font-family: "Inter Display", "Inter Display Placeholder", sans-serif; font-size: 18px; font-weight: 500; line-height: 21.6px; text-align: left; letter-spacing: 1px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: grab;">I'm not usually a dessert person, but that Nutella pizza changed my life. Unreal!</p></div><div data-framer-component-type="RichTextContainer" style="transform: none; display: flex; position: relative; width: 235px; height: 19.2px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: column; justify-content: flex-start; opacity: 1; overflow: visible; cursor: grab;"><p data-styles-preset="TKFRw1slZ" style="--framer-text-alignment: left; --framer-text-color: var(--token-2869e542-b811-438d-9253-a0fb694a1ff1, rgb(61, 33, 1)); display: block; position: static; width: 235px; height: 19.2px; border: 0px none rgb(61, 33, 1); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(61, 33, 1); font-family: "Inter Display", "Inter Display Placeholder", sans-serif; font-size: 16px; font-weight: 500; line-height: 19.2px; text-align: left; letter-spacing: 1px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: grab;">Sneha T., New york</p></div></div></div><div data-framer-name="Testimonial Wrap" style="display: flex; position: relative; width: 390px; height: 297.2px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: column; justify-content: flex-start; align-items: flex-end; gap: 10px; opacity: 1; overflow: visible;"><div style="display: contents; position: static; width: auto; height: auto; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible;"><div data-framer-name="Testimonial Item" draggable="false" tabindex="0" style="will-change: transform; opacity: 1; transform: none; user-select: none; touch-action: none; display: flex; position: relative; width: 280px; height: 297.2px; padding: 60px 30px 80px 40px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: column; justify-content: flex-start; align-items: flex-start; gap: 30px; overflow: visible; cursor: grab;"><div data-framer-name="BG Shape" style="display: block; position: absolute; left: -0.4375px; right: 0.4375px; width: 280px; height: 297.2px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: row; opacity: 1; z-index: 0; overflow: hidden; cursor: grab;"><div style="position: absolute; border-radius: inherit; corner-shape: inherit; inset: 0px; display: block; width: 280px; height: 297.2px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: grab;" data-framer-background-image-wrapper="true"><img decoding="auto" width="556" height="564" sizes="280px" srcset="https://framerusercontent.com/images/w3wHzQrV2Q7OyPS1RGxdNfIJc.png?width=556&height=564 556w" src="https://framerusercontent.com/images/w3wHzQrV2Q7OyPS1RGxdNfIJc.png?width=556&height=564" alt="BG Shape" style="display: block; width: 280px; height: 297.2px; border-radius: inherit; corner-shape: inherit; object-position: center center; object-fit: contain; position: static; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: clip; cursor: grab;"></div></div><div data-framer-name="Tape" style="display: block; position: absolute; inset: -27px 55px 244.2px; width: 170px; height: 80px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: row; opacity: 1; z-index: 0; overflow: hidden; cursor: grab;"><div style="position: absolute; border-radius: inherit; corner-shape: inherit; inset: 0px; display: block; width: 170px; height: 80px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: grab;" data-framer-background-image-wrapper="true"><img decoding="auto" width="339" height="158" src="https://framerusercontent.com/images/Rk7HQIg1SP5swWnxS3EfMMMpMF8.png?width=339&height=158" alt="Tape" style="display: block; width: 170px; height: 80px; border-radius: inherit; corner-shape: inherit; object-position: center center; object-fit: contain; position: static; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: clip; cursor: grab;"></div></div><div data-framer-component-type="RichTextContainer" style="transform: none; display: flex; position: relative; width: 210px; height: 108px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: column; justify-content: flex-start; opacity: 1; overflow: visible; cursor: grab;"><p data-styles-preset="M4VKByVbJ" style="--framer-text-alignment: left; --framer-text-color: var(--token-2869e542-b811-438d-9253-a0fb694a1ff1, rgb(61, 33, 1)); display: block; position: static; width: 210px; height: 108px; border: 0px none rgb(61, 33, 1); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(61, 33, 1); font-family: "Inter Display", "Inter Display Placeholder", sans-serif; font-size: 18px; font-weight: 500; line-height: 21.6px; text-align: left; letter-spacing: 1px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: grab;">The best crust in town — crispy on the outside, soft inside. I dream about their Paneer Tandoori pizza!</p></div><div data-framer-component-type="RichTextContainer" style="transform: none; display: flex; position: relative; width: 210px; height: 19.2px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: column; justify-content: flex-start; opacity: 1; overflow: visible; cursor: grab;"><p data-styles-preset="TKFRw1slZ" style="--framer-text-alignment: left; --framer-text-color: var(--token-2869e542-b811-438d-9253-a0fb694a1ff1, rgb(61, 33, 1)); display: block; position: static; width: 210px; height: 19.2px; border: 0px none rgb(61, 33, 1); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(61, 33, 1); font-family: "Inter Display", "Inter Display Placeholder", sans-serif; font-size: 16px; font-weight: 500; line-height: 19.2px; text-align: left; letter-spacing: 1px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: grab;">Mark, Vermont</p></div></div></div></div></div><div data-framer-name="Center" style="will-change: transform; opacity: 1; transform: none; display: flex; position: relative; width: 480.8px; height: 405px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 1 0 0px; flex-flow: row; justify-content: center; align-items: center; gap: 10px; overflow: visible;"><div style="display: contents; position: static; width: auto; height: auto; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible;"><div data-framer-name="Image" draggable="false" tabindex="0" style="opacity: 1; transform: rotate(-8deg); user-select: none; touch-action: none; display: flex; position: relative; width: 410px; height: 405px; padding: 10px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: row; justify-content: center; align-items: center; gap: 10px; overflow: visible; cursor: grab;"><div data-framer-name="BG Shape" style="transform: rotate(88deg); display: block; position: absolute; inset: -38px 120px 363px; width: 170px; height: 80px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: row; opacity: 1; z-index: 1; overflow: hidden; cursor: grab;"><div style="position: absolute; border-radius: inherit; corner-shape: inherit; inset: 0px; display: block; width: 170px; height: 80px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: grab;" data-framer-background-image-wrapper="true"><img decoding="auto" width="344" height="171" src="https://framerusercontent.com/images/GpDSnGGqFjI50u9tdJfYrgXA7eI.png?width=344&height=171" alt="BG Shape" style="display: block; width: 170px; height: 80px; border-radius: inherit; corner-shape: inherit; object-position: center center; object-fit: contain; position: static; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: clip; cursor: grab;"></div></div><div style="display: block; position: relative; width: 390px; height: 385px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 1 0 0px; flex-flow: row; opacity: 1; overflow: hidden; cursor: grab;"><div style="position: absolute; border-radius: inherit; corner-shape: inherit; inset: 0px; display: block; width: 390px; height: 385px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: grab;" data-framer-background-image-wrapper="true"><img decoding="auto" width="1000" height="1000" sizes="390px" srcset="https://framerusercontent.com/images/kUtJOcwrFytVT1nzfKIAGIwks.jpg?scale-down-to=512&width=1000&height=1000 512w,https://framerusercontent.com/images/kUtJOcwrFytVT1nzfKIAGIwks.jpg?width=1000&height=1000 1000w" src="https://framerusercontent.com/images/kUtJOcwrFytVT1nzfKIAGIwks.jpg?width=1000&height=1000" alt="Testimonial Image" style="display: block; width: 390px; height: 385px; border-radius: inherit; corner-shape: inherit; object-position: center center; object-fit: cover; position: static; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: clip; cursor: grab;"></div></div></div></div><div style="display: contents; position: static; width: auto; height: auto; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible;"><div data-framer-name="Testimonial Item" draggable="false" tabindex="0" style="opacity: 1; transform: rotate(3deg); user-select: none; touch-action: none; display: flex; position: absolute; inset: 217.8px -110px -90px 330.8px; width: 260px; height: 277.2px; padding: 60px 30px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: column; justify-content: flex-start; align-items: flex-start; gap: 30px; z-index: 1; overflow: visible; cursor: grab;"><div data-framer-name="BG Shape" style="transform: rotate(-3deg); display: block; position: absolute; left: -0.4125px; right: 0.4125px; width: 260px; height: 277.2px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: row; opacity: 1; z-index: 0; overflow: hidden; cursor: grab;"><div style="position: absolute; border-radius: inherit; corner-shape: inherit; inset: 0px; display: block; width: 260px; height: 277.2px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: grab;" data-framer-background-image-wrapper="true"><img decoding="auto" width="514" height="542" sizes="260px" srcset="https://framerusercontent.com/images/36qMoa9WJFiU24hOs7i8YwXA.png?width=514&height=542 514w" src="https://framerusercontent.com/images/36qMoa9WJFiU24hOs7i8YwXA.png?width=514&height=542" alt="BG Shape" style="display: block; width: 260px; height: 277.2px; border-radius: inherit; corner-shape: inherit; object-position: center center; object-fit: contain; position: static; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: clip; cursor: grab;"></div></div><div data-framer-component-type="RichTextContainer" style="transform: none; display: flex; position: relative; width: 200px; height: 108px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: column; justify-content: flex-start; opacity: 1; overflow: visible; cursor: grab;"><p data-styles-preset="M4VKByVbJ" style="--framer-text-alignment: left; --framer-text-color: var(--token-2869e542-b811-438d-9253-a0fb694a1ff1, rgb(61, 33, 1)); display: block; position: static; width: 200px; height: 108px; border: 0px none rgb(61, 33, 1); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(61, 33, 1); font-family: "Inter Display", "Inter Display Placeholder", sans-serif; font-size: 18px; font-weight: 500; line-height: 21.6px; text-align: left; letter-spacing: 1px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: grab;">Tried the BBQ Chicken Blaze and now I can’t go back to regular pizza. It’s dangerously good.</p></div><div data-framer-component-type="RichTextContainer" style="transform: none; display: flex; position: relative; width: 200px; height: 19.2px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: column; justify-content: flex-start; opacity: 1; overflow: visible; cursor: grab;"><p data-styles-preset="TKFRw1slZ" style="--framer-text-alignment: left; --framer-text-color: var(--token-2869e542-b811-438d-9253-a0fb694a1ff1, rgb(61, 33, 1)); display: block; position: static; width: 200px; height: 19.2px; border: 0px none rgb(61, 33, 1); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(61, 33, 1); font-family: "Inter Display", "Inter Display Placeholder", sans-serif; font-size: 16px; font-weight: 500; line-height: 19.2px; text-align: left; letter-spacing: 1px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: grab;">Amanda Reed., Tokyo</p></div></div></div></div><div data-framer-name="List Inner" style="cursor: crosshair; display: flex; position: relative; width: 470px; height: 752.8px; max-width: 470px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 1 0 0px; flex-flow: column; justify-content: space-between; align-items: flex-end; opacity: 1; overflow: visible;"><div style="display: contents; position: static; width: auto; height: auto; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;"><div data-framer-name="Testimonial Item" draggable="false" tabindex="0" style="will-change: transform; opacity: 1; transform: rotate(-6deg); user-select: none; touch-action: none; display: flex; position: relative; width: 270px; height: 316.4px; padding: 50px 40px 90px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: column; justify-content: flex-start; align-items: flex-start; gap: 30px; overflow: visible; cursor: grab;"><div data-framer-name="BG Shape" style="transform: rotate(6deg); display: block; position: absolute; left: -0.425px; right: 0.425px; width: 270px; height: 316.4px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: row; opacity: 1; z-index: 0; overflow: hidden; cursor: grab;"><div style="position: absolute; border-radius: inherit; corner-shape: inherit; inset: 0px; display: block; width: 270px; height: 316.4px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: grab;" data-framer-background-image-wrapper="true"><img decoding="auto" width="556" height="590" sizes="270px" srcset="https://framerusercontent.com/images/aKU9yWqmWNampBls0xKLpRwqfOg.png?width=556&height=590 556w" src="https://framerusercontent.com/images/aKU9yWqmWNampBls0xKLpRwqfOg.png?width=556&height=590" alt="BG Shape" style="display: block; width: 270px; height: 316.4px; border-radius: inherit; corner-shape: inherit; object-position: center center; object-fit: contain; position: static; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: clip; cursor: grab;"></div></div><div data-framer-name="Tape" style="transform: rotate(30deg); display: block; position: absolute; inset: -10px -90px 240.163px 130px; width: 230px; height: 86.2375px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: row; opacity: 1; z-index: 0; overflow: hidden; cursor: grab;"><div style="position: absolute; border-radius: inherit; corner-shape: inherit; inset: 0px; display: block; width: 230px; height: 86.2375px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: grab;" data-framer-background-image-wrapper="true"><img decoding="auto" width="413" height="199" src="https://framerusercontent.com/images/dwrdJeSEiBD6y48fsU2YKWv1bNM.png?width=413&height=199" alt="Tape" style="display: block; width: 230px; height: 86.2375px; border-radius: inherit; corner-shape: inherit; object-position: center center; object-fit: contain; position: static; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: clip; cursor: grab;"></div></div><div data-framer-component-type="RichTextContainer" style="transform: none; display: flex; position: relative; width: 190px; height: 108px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: column; justify-content: flex-start; opacity: 1; overflow: visible; cursor: grab;"><p data-styles-preset="M4VKByVbJ" style="--framer-text-alignment: left; --framer-text-color: var(--token-2869e542-b811-438d-9253-a0fb694a1ff1, rgb(61, 33, 1)); display: block; position: static; width: 190px; height: 108px; border: 0px none rgb(61, 33, 1); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(61, 33, 1); font-family: "Inter Display", "Inter Display Placeholder", sans-serif; font-size: 18px; font-weight: 500; line-height: 21.6px; text-align: left; letter-spacing: 1px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: grab;">"Fast delivery, super fresh, and piping hot! Their combo meal is a weekend ritual for me."</p></div><div data-framer-component-type="RichTextContainer" style="transform: none; display: flex; position: relative; width: 190px; height: 38.4px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: column; justify-content: flex-start; opacity: 1; overflow: visible; cursor: grab;"><p data-styles-preset="TKFRw1slZ" style="--framer-text-alignment: left; --framer-text-color: var(--token-2869e542-b811-438d-9253-a0fb694a1ff1, rgb(61, 33, 1)); display: block; position: static; width: 190px; height: 38.4px; border: 0px none rgb(61, 33, 1); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(61, 33, 1); font-family: "Inter Display", "Inter Display Placeholder", sans-serif; font-size: 16px; font-weight: 500; line-height: 19.2px; text-align: left; letter-spacing: 1px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: grab;">Billy Vasquez., California</p></div></div></div><div data-framer-name="Testimonial Wrap" style="will-change: transform; opacity: 1; transform: none; display: flex; position: relative; width: 470px; height: 380px; min-height: 297px; padding: 380px 0px 0px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: column; justify-content: flex-start; align-items: flex-end; gap: 10px; overflow: visible; cursor: crosshair;"><div style="display: contents; position: static; width: auto; height: auto; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;"><div data-framer-name="Image" draggable="false" tabindex="0" style="opacity: 1; transform: rotate(6deg); user-select: none; touch-action: none; display: flex; position: absolute; inset: 62px -20px -7px 161px; width: 329px; height: 325px; padding: 10px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: row; justify-content: center; align-items: center; gap: 10px; z-index: 1; overflow: visible; cursor: grab;"><div style="display: block; position: relative; width: 309px; height: 305px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 1 0 0px; flex-flow: row; opacity: 1; overflow: hidden; cursor: grab;"><div style="position: absolute; border-radius: inherit; corner-shape: inherit; inset: 0px; display: block; width: 309px; height: 305px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: grab;" data-framer-background-image-wrapper="true"><img decoding="auto" width="800" height="850" sizes="max(min(max((min(100vw, 1660px) - 180px) / 3, 1px), 470px) * 0.7 - 20px, 1px)" srcset="https://framerusercontent.com/images/b18RNrreSzHWiem0CCgicgJmK0.jpg?width=800&height=850 800w" src="https://framerusercontent.com/images/b18RNrreSzHWiem0CCgicgJmK0.jpg?width=800&height=850" alt="Testimonial Image" style="display: block; width: 309px; height: 305px; border-radius: inherit; corner-shape: inherit; object-position: center center; object-fit: cover; position: static; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: clip; cursor: grab;"></div></div><div data-framer-name="Pin" style="display: block; position: absolute; right: 269px; bottom: 265px; width: 60px; height: 60px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: row; opacity: 1; z-index: 1; overflow: hidden; cursor: grab;"><div style="position: absolute; border-radius: inherit; corner-shape: inherit; inset: 0px; display: block; width: 60px; height: 60px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: grab;" data-framer-background-image-wrapper="true"><img decoding="auto" width="123" height="120" src="https://framerusercontent.com/images/btsbKfzzPlRV8WQJhfav9CtSiTI.png?width=123&height=120" alt="Pin" style="display: block; width: 60px; height: 60px; border-radius: inherit; corner-shape: inherit; object-position: center center; object-fit: cover; position: static; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: clip; cursor: grab;"></div></div></div></div></div></div></div>
create a canvas to display a testimonial component. we want the testimonial component to be centered and the space around it to be flexible empty.
reproduce this testimonial component . change the content
Created by: LandingHero
