Neoclassic
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 name="2" data-border="true" data-framer-name="STAR-4" style="--border-bottom-width: 2px; --border-color: var(--token-14825bd6-f9b4-4846-afef-1af0cbf8c065, rgb(0, 0, 0)); --border-left-width: 2px; --border-right-width: 2px; --border-style: solid; --border-top-width: 2px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(253, 253, 150); height: 250px; width: 292px; box-shadow: rgb(0, 0, 0) 6px 6px 0px 0px; opacity: 1; display: flex; position: relative; padding: 20px; border: 0px none rgb(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: column; justify-content: center; align-items: flex-start; gap: 20px; overflow: hidden; cursor: crosshair;"><div data-framer-name="wrapper" style="opacity: 1; display: flex; position: relative; width: 252px; height: 20px; 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: 8px; overflow: visible; cursor: crosshair;"><div data-framer-component-type="SVG" data-framer-name="Graphic" aria-hidden="true" style="image-rendering: pixelated; flex: 0 0 auto; fill: var(--token-14825bd6-f9b4-4846-afef-1af0cbf8c065, rgb(0, 0, 0)); color: rgb(0, 0, 0); opacity: 1; display: block; position: relative; width: 20px; height: 20px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex-flow: row; overflow: visible; cursor: crosshair;"><div style="width: 20px; height: 20px; aspect-ratio: inherit; display: block; 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: visible; cursor: crosshair;"><svg style="width: 20px; height: 20px; display: block; 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: hidden; cursor: crosshair;" viewBox="0 0 48 48" preserveAspectRatio="none" width="100%" height="100%"><use href="#svg-1137254925_1079" style="display: inline; 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;"></use></svg></div></div><div data-framer-component-type="SVG" data-framer-name="Graphic" aria-hidden="true" style="image-rendering: pixelated; flex: 0 0 auto; fill: var(--token-14825bd6-f9b4-4846-afef-1af0cbf8c065, rgb(0, 0, 0)); color: rgb(0, 0, 0); opacity: 1; display: block; position: relative; width: 20px; height: 20px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex-flow: row; overflow: visible; cursor: crosshair;"><div style="width: 20px; height: 20px; aspect-ratio: inherit; display: block; 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: visible; cursor: crosshair;"><svg style="width: 20px; height: 20px; display: block; 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: hidden; cursor: crosshair;" viewBox="0 0 48 48" preserveAspectRatio="none" width="100%" height="100%"><use href="#svg-1137254925_1079" style="display: inline; 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;"></use></svg></div></div><div data-framer-component-type="SVG" data-framer-name="Graphic" aria-hidden="true" style="image-rendering: pixelated; flex: 0 0 auto; fill: var(--token-14825bd6-f9b4-4846-afef-1af0cbf8c065, rgb(0, 0, 0)); color: rgb(0, 0, 0); opacity: 1; display: block; position: relative; width: 20px; height: 20px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex-flow: row; overflow: visible; cursor: crosshair;"><div style="width: 20px; height: 20px; aspect-ratio: inherit; display: block; 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: visible; cursor: crosshair;"><svg style="width: 20px; height: 20px; display: block; 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: hidden; cursor: crosshair;" viewBox="0 0 48 48" preserveAspectRatio="none" width="100%" height="100%"><use href="#svg-1137254925_1079" style="display: inline; 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;"></use></svg></div></div><div data-framer-component-type="SVG" data-framer-name="Graphic" aria-hidden="true" style="image-rendering: pixelated; flex: 0 0 auto; fill: var(--token-14825bd6-f9b4-4846-afef-1af0cbf8c065, rgb(0, 0, 0)); color: rgb(0, 0, 0); opacity: 1; display: block; position: relative; width: 20px; height: 20px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex-flow: row; overflow: visible; cursor: crosshair;"><div style="width: 20px; height: 20px; aspect-ratio: inherit; display: block; 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: visible; cursor: crosshair;"><svg style="width: 20px; height: 20px; display: block; 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: hidden; cursor: crosshair;" viewBox="0 0 48 48" preserveAspectRatio="none" width="100%" height="100%"><use href="#svg-1137254925_1079" style="display: inline; 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;"></use></svg></div></div></div><div data-framer-component-type="RichTextContainer" style="outline: none; display: flex; flex-flow: column; justify-content: flex-start; flex: 1 0 0px; --extracted-r6o4lv: var(--token-14825bd6-f9b4-4846-afef-1af0cbf8c065, rgb(0, 0, 0)); --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; transform: none; opacity: 1; position: relative; width: 252px; height: 126px; 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; overflow: visible; cursor: crosshair;"><p data-styles-preset="yWUJk0B4D" style="--framer-text-alignment: left; --framer-text-color: var(--extracted-r6o4lv, var(--token-14825bd6-f9b4-4846-afef-1af0cbf8c065, rgb(0, 0, 0))); display: block; position: static; width: 252px; height: 96px; 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: Epilogue, "Epilogue Placeholder", sans-serif; font-size: 16px; font-weight: 500; line-height: 24px; text-align: left; letter-spacing: -0.64px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">Managing team training is now smooth and fully automated I don’t need to chase anyone or worry about updates.</p></div><div data-framer-component-type="RichTextContainer" style="outline: none; display: flex; flex-flow: column; justify-content: flex-start; flex: 0 0 auto; --extracted-r6o4lv: var(--token-14825bd6-f9b4-4846-afef-1af0cbf8c065, rgb(0, 0, 0)); --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; transform: none; opacity: 1; position: relative; width: 252px; height: 24px; 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; overflow: visible; cursor: crosshair;"><p data-styles-preset="BXtz3AAGm" style="--framer-text-color: var(--extracted-r6o4lv, var(--token-14825bd6-f9b4-4846-afef-1af0cbf8c065, rgb(0, 0, 0))); display: block; position: static; width: 252px; height: 24px; 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: Epilogue, "Epilogue Placeholder", sans-serif; font-size: 16px; font-weight: 700; line-height: 24px; text-align: left; letter-spacing: -0.64px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">Kevin Moretti</p></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
