FAQ section with question boxes
Category: FAQ
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="content" style="display: flex; position: relative; width: 600px; height: 892px; max-width: 600px; 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: center; align-items: center; gap: 100px; opacity: 1; overflow: visible;"><div data-framer-name="wrapper" style="display: flex; position: relative; width: 500px; height: 212px; max-width: 500px; 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: center; align-items: center; gap: 28px; opacity: 1; overflow: hidden;"><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 style="display: block; position: relative; width: 49.35px; height: 28px; 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; overflow: visible;"><div data-border="true" data-framer-name="Default" 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(248, 214, 179); box-shadow: rgb(0, 0, 0) 4px 4px 0px 0px; opacity: 1; display: flex; position: relative; width: 49.35px; height: 28px; padding: 8px 12px; 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: row; justify-content: center; align-items: center; gap: 10px; overflow: hidden;"><div style="outline: none; display: flex; flex-flow: column; justify-content: flex-start; flex: 0 0 auto; --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; transform: none; opacity: 1; position: relative; width: 25.35px; height: 12px; 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;" data-framer-component-type="RichTextContainer"><p data-styles-preset="rhkDaosjl" style="display: block; position: static; width: 25.35px; height: 12px; 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: "Lexend Mega", sans-serif; font-size: 10px; font-weight: 900; line-height: 12px; text-align: center; text-transform: uppercase; letter-spacing: -0.4px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible;">Faq</p></div></div></div></div><div data-framer-name="wrapper" style="display: flex; position: relative; width: 500px; height: 156px; 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: center; align-items: center; gap: 12px; opacity: 1; overflow: hidden;"><div style="outline: none; display: flex; flex-flow: column; justify-content: flex-start; flex: 0 0 auto; transform: none; position: relative; width: 500px; 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: sans-serif; font-size: 12px; font-weight: 400; text-align: start; opacity: 1; overflow: visible;" data-framer-component-type="RichTextContainer"><h2 data-styles-preset="iJ0GIKQvm" style="display: block; position: static; width: 500px; 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, sans-serif; font-size: 40px; font-weight: 900; line-height: 48px; text-align: center; text-transform: uppercase; letter-spacing: -1.6px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible;">Common questions answered clearly</h2></div><div style="outline: none; display: flex; flex-flow: column; justify-content: flex-start; flex: 0 0 auto; transform: none; position: relative; width: 450px; height: 48px; max-width: 90%; 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; opacity: 1; overflow: visible;" data-framer-component-type="RichTextContainer"><p data-styles-preset="yWUJk0B4D" style="display: block; position: static; width: 450px; height: 48px; border: 0px none rgb(119, 119, 119); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(119, 119, 119); font-family: Epilogue, "Epilogue Placeholder", sans-serif; font-size: 16px; font-weight: 500; line-height: 24px; text-align: center; letter-spacing: -0.64px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible;">Here are clear answers to the most common questions we get from creators coaches and teams using the platform.</p></div></div></div><div data-framer-name="wrapper" style="display: flex; position: relative; width: 600px; height: 580px; 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: center; align-items: center; gap: 20px; 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 style="display: block; position: relative; width: 600px; height: 580px; 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: visible;"><div data-framer-name="Default" style="width: 600px; transform: none; transform-origin: 50% 50% 0px; display: flex; position: relative; height: 580px; 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: column; justify-content: center; align-items: center; gap: 20px; opacity: 1; overflow: visible;"><div style="transform: none; transform-origin: 50% 50% 0px; display: block; position: relative; width: 600px; 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; overflow: visible;"><div data-border="true" data-framer-name="Close" data-highlight="true" 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(255, 255, 255); width: 600px; box-shadow: rgb(0, 0, 0) 6px 6px 0px 0px; transform: none; transform-origin: 50% 50% 0px; display: flex; position: relative; height: 80px; 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: row; justify-content: flex-start; align-items: flex-start; gap: 20px; opacity: 1; overflow: hidden; cursor: pointer;" tabindex="0"><div data-framer-name="wrapper" style="transform: none; transform-origin: 50% 50% 0px; display: flex; position: relative; width: 600px; height: 80px; padding: 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: 1 0 0px; flex-flow: column; justify-content: center; align-items: center; gap: 20px; opacity: 1; overflow: visible; cursor: pointer;"><div data-framer-name="wrapper" style="transform: none; transform-origin: 50% 50% 0px; display: flex; position: relative; width: 560px; height: 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: row; justify-content: flex-start; align-items: center; gap: 12px; opacity: 1; overflow: hidden; cursor: pointer;"><div style="outline: none; display: flex; flex-flow: column; justify-content: flex-start; flex: 1 0 0px; --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; transform: none; transform-origin: 50% 50% 0px; position: relative; width: 508px; 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; opacity: 1; overflow: visible; cursor: pointer;" data-framer-component-type="RichTextContainer"><p data-styles-preset="paYT5vbnW" style="--framer-text-alignment: left; display: block; position: static; width: 508px; 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, sans-serif; font-size: 20px; font-weight: 900; line-height: 24px; text-align: left; text-transform: uppercase; letter-spacing: -0.8px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;">Can I cancel anytime?</p></div><div data-framer-name="icon" style="transform: rotate(-90deg); will-change: transform; transform-origin: 50% 50% 0px; display: flex; position: relative; width: 40px; height: 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: row; justify-content: center; align-items: center; gap: 10px; opacity: 1; overflow: visible; cursor: pointer;"><div data-framer-component-type="SVG" data-framer-name="Graphic" style="image-rendering: pixelated; flex: 1 0 0px; fill: var(--token-14825bd6-f9b4-4846-afef-1af0cbf8c065, rgb(0, 0, 0)); color: rgb(0, 0, 0); transform: none; transform-origin: 50% 50% 0px; display: block; position: relative; width: 40px; height: 40px; 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; opacity: 1; overflow: visible; cursor: pointer;" aria-hidden="true"><div style="width: 40px; height: 40px; 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: pointer;"><svg style="width: 40px; height: 40px; 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: pointer;" viewBox="0 0 44 44" preserveAspectRatio="none" width="100%" height="100%"><use href="#svg-849996198_1863" 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: pointer;"></use></svg></div></div></div></div></div></div></div><div style="transform: none; transform-origin: 50% 50% 0px; display: block; position: relative; width: 600px; 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; overflow: visible;"><div data-border="true" data-framer-name="Close" data-highlight="true" 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(255, 255, 255); box-shadow: rgb(0, 0, 0) 6px 6px 0px 0px; width: 600px; transform: none; transform-origin: 50% 50% 0px; display: flex; position: relative; height: 80px; 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: row; justify-content: flex-start; align-items: flex-start; gap: 20px; opacity: 1; overflow: hidden; cursor: pointer;" tabindex="0"><div data-framer-name="wrapper" style="transform: none; transform-origin: 50% 50% 0px; display: flex; position: relative; width: 600px; height: 80px; padding: 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: 1 0 0px; flex-flow: column; justify-content: center; align-items: center; gap: 20px; opacity: 1; overflow: visible; cursor: pointer;"><div data-framer-name="wrapper" style="transform: none; transform-origin: 50% 50% 0px; display: flex; position: relative; width: 560px; height: 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: row; justify-content: flex-start; align-items: center; gap: 12px; opacity: 1; overflow: hidden; cursor: pointer;"><div style="outline: none; display: flex; flex-flow: column; justify-content: flex-start; flex: 1 0 0px; --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; transform: none; transform-origin: 50% 50% 0px; position: relative; width: 508px; 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; opacity: 1; overflow: visible; cursor: pointer;" data-framer-component-type="RichTextContainer"><p data-styles-preset="paYT5vbnW" style="--framer-text-alignment: left; display: block; position: static; width: 508px; 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, sans-serif; font-size: 20px; font-weight: 900; line-height: 24px; text-align: left; text-transform: uppercase; letter-spacing: -0.8px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;">Do I need to download or install anything?</p></div><div data-framer-name="icon" style="transform: rotate(-90deg); transform-origin: 50% 50% 0px; display: flex; position: relative; width: 40px; height: 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: row; justify-content: center; align-items: center; gap: 10px; opacity: 1; overflow: visible; cursor: pointer;"><div data-framer-component-type="SVG" data-framer-name="Graphic" style="image-rendering: pixelated; flex: 1 0 0px; fill: var(--token-14825bd6-f9b4-4846-afef-1af0cbf8c065, rgb(0, 0, 0)); color: rgb(0, 0, 0); transform: none; transform-origin: 50% 50% 0px; display: block; position: relative; width: 40px; height: 40px; 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; opacity: 1; overflow: visible; cursor: pointer;" aria-hidden="true"><div style="width: 40px; height: 40px; 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: pointer;"><svg style="width: 40px; height: 40px; 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: pointer;" viewBox="0 0 44 44" preserveAspectRatio="none" width="100%" height="100%"><use href="#svg-849996198_1863" 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: pointer;"></use></svg></div></div></div></div></div></div></div><div style="transform: none; transform-origin: 50% 50% 0px; display: block; position: relative; width: 600px; 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; overflow: visible;"><div data-border="true" data-framer-name="Close" data-highlight="true" 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(255, 255, 255); box-shadow: rgb(0, 0, 0) 6px 6px 0px 0px; width: 600px; transform: none; transform-origin: 50% 50% 0px; display: flex; position: relative; height: 80px; 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: row; justify-content: flex-start; align-items: flex-start; gap: 20px; opacity: 1; overflow: hidden; cursor: pointer;" tabindex="0"><div data-framer-name="wrapper" style="transform: none; transform-origin: 50% 50% 0px; display: flex; position: relative; width: 600px; height: 80px; padding: 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: 1 0 0px; flex-flow: column; justify-content: center; align-items: center; gap: 20px; opacity: 1; overflow: visible; cursor: pointer;"><div data-framer-name="wrapper" style="transform: none; transform-origin: 50% 50% 0px; display: flex; position: relative; width: 560px; height: 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: row; justify-content: flex-start; align-items: center; gap: 12px; opacity: 1; overflow: hidden; cursor: pointer;"><div style="outline: none; display: flex; flex-flow: column; justify-content: flex-start; flex: 1 0 0px; --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; transform: none; transform-origin: 50% 50% 0px; position: relative; width: 508px; 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; opacity: 1; overflow: visible; cursor: pointer;" data-framer-component-type="RichTextContainer"><p data-styles-preset="paYT5vbnW" style="--framer-text-alignment: left; display: block; position: static; width: 508px; 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, sans-serif; font-size: 20px; font-weight: 900; line-height: 24px; text-align: left; text-transform: uppercase; letter-spacing: -0.8px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;">Is there a free trial available?</p></div><div data-framer-name="icon" style="transform: rotate(-90deg); transform-origin: 50% 50% 0px; display: flex; position: relative; width: 40px; height: 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: row; justify-content: center; align-items: center; gap: 10px; opacity: 1; overflow: visible; cursor: pointer;"><div data-framer-component-type="SVG" data-framer-name="Graphic" style="image-rendering: pixelated; flex: 1 0 0px; fill: var(--token-14825bd6-f9b4-4846-afef-1af0cbf8c065, rgb(0, 0, 0)); color: rgb(0, 0, 0); transform: none; transform-origin: 50% 50% 0px; display: block; position: relative; width: 40px; height: 40px; 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; opacity: 1; overflow: visible; cursor: pointer;" aria-hidden="true"><div style="width: 40px; height: 40px; 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: pointer;"><svg style="width: 40px; height: 40px; 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: pointer;" viewBox="0 0 44 44" preserveAspectRatio="none" width="100%" height="100%"><use href="#svg-849996198_1863" 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: pointer;"></use></svg></div></div></div></div></div></div></div><div style="transform: none; transform-origin: 50% 50% 0px; display: block; position: relative; width: 600px; 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; overflow: visible;"><div data-border="true" data-framer-name="Close" data-highlight="true" 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(255, 255, 255); box-shadow: rgb(0, 0, 0) 6px 6px 0px 0px; width: 600px; transform: none; transform-origin: 50% 50% 0px; display: flex; position: relative; height: 80px; 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: row; justify-content: flex-start; align-items: flex-start; gap: 20px; opacity: 1; overflow: hidden; cursor: pointer;" tabindex="0"><div data-framer-name="wrapper" style="transform: none; transform-origin: 50% 50% 0px; display: flex; position: relative; width: 600px; height: 80px; padding: 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: 1 0 0px; flex-flow: column; justify-content: center; align-items: center; gap: 20px; opacity: 1; overflow: visible; cursor: pointer;"><div data-framer-name="wrapper" style="transform: none; transform-origin: 50% 50% 0px; display: flex; position: relative; width: 560px; height: 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: row; justify-content: flex-start; align-items: center; gap: 12px; opacity: 1; overflow: hidden; cursor: pointer;"><div style="outline: none; display: flex; flex-flow: column; justify-content: flex-start; flex: 1 0 0px; --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; transform: none; transform-origin: 50% 50% 0px; position: relative; width: 508px; 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; opacity: 1; overflow: visible; cursor: pointer;" data-framer-component-type="RichTextContainer"><p data-styles-preset="paYT5vbnW" style="--framer-text-alignment: left; display: block; position: static; width: 508px; 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, sans-serif; font-size: 20px; font-weight: 900; line-height: 24px; text-align: left; text-transform: uppercase; letter-spacing: -0.8px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;">Can I upload videos and documents?</p></div><div data-framer-name="icon" style="transform: rotate(-90deg); transform-origin: 50% 50% 0px; display: flex; position: relative; width: 40px; height: 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: row; justify-content: center; align-items: center; gap: 10px; opacity: 1; overflow: visible; cursor: pointer;"><div data-framer-component-type="SVG" data-framer-name="Graphic" style="image-rendering: pixelated; flex: 1 0 0px; fill: var(--token-14825bd6-f9b4-4846-afef-1af0cbf8c065, rgb(0, 0, 0)); color: rgb(0, 0, 0); transform: none; transform-origin: 50% 50% 0px; display: block; position: relative; width: 40px; height: 40px; 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; opacity: 1; overflow: visible; cursor: pointer;" aria-hidden="true"><div style="width: 40px; height: 40px; 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: pointer;"><svg style="width: 40px; height: 40px; 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: pointer;" viewBox="0 0 44 44" preserveAspectRatio="none" width="100%" height="100%"><use href="#svg-849996198_1863" 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: pointer;"></use></svg></div></div></div></div></div></div></div><div style="transform: none; transform-origin: 50% 50% 0px; display: block; position: relative; width: 600px; 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; overflow: visible;"><div data-border="true" data-framer-name="Close" data-highlight="true" 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(255, 255, 255); box-shadow: rgb(0, 0, 0) 6px 6px 0px 0px; width: 600px; transform: none; transform-origin: 50% 50% 0px; display: flex; position: relative; height: 80px; 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: row; justify-content: flex-start; align-items: flex-start; gap: 20px; opacity: 1; overflow: hidden; cursor: pointer;" tabindex="0"><div data-framer-name="wrapper" style="transform: none; transform-origin: 50% 50% 0px; display: flex; position: relative; width: 600px; height: 80px; padding: 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: 1 0 0px; flex-flow: column; justify-content: center; align-items: center; gap: 20px; opacity: 1; overflow: visible; cursor: pointer;"><div data-framer-name="wrapper" style="transform: none; transform-origin: 50% 50% 0px; display: flex; position: relative; width: 560px; height: 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: row; justify-content: flex-start; align-items: center; gap: 12px; opacity: 1; overflow: hidden; cursor: pointer;"><div style="outline: none; display: flex; flex-flow: column; justify-content: flex-start; flex: 1 0 0px; --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; transform: none; transform-origin: 50% 50% 0px; position: relative; width: 508px; 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; opacity: 1; overflow: visible; cursor: pointer;" data-framer-component-type="RichTextContainer"><p data-styles-preset="paYT5vbnW" style="--framer-text-alignment: left; display: block; position: static; width: 508px; 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, sans-serif; font-size: 20px; font-weight: 900; line-height: 24px; text-align: left; text-transform: uppercase; letter-spacing: -0.8px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;">How many students can I add?</p></div><div data-framer-name="icon" style="transform: rotate(-90deg); transform-origin: 50% 50% 0px; display: flex; position: relative; width: 40px; height: 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: row; justify-content: center; align-items: center; gap: 10px; opacity: 1; overflow: visible; cursor: pointer;"><div data-framer-component-type="SVG" data-framer-name="Graphic" style="image-rendering: pixelated; flex: 1 0 0px; fill: var(--token-14825bd6-f9b4-4846-afef-1af0cbf8c065, rgb(0, 0, 0)); color: rgb(0, 0, 0); transform: none; transform-origin: 50% 50% 0px; display: block; position: relative; width: 40px; height: 40px; 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; opacity: 1; overflow: visible; cursor: pointer;" aria-hidden="true"><div style="width: 40px; height: 40px; 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: pointer;"><svg style="width: 40px; height: 40px; 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: pointer;" viewBox="0 0 44 44" preserveAspectRatio="none" width="100%" height="100%"><use href="#svg-849996198_1863" 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: pointer;"></use></svg></div></div></div></div></div></div></div><div style="transform: none; transform-origin: 50% 50% 0px; display: block; position: relative; width: 600px; 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; overflow: visible;"><div data-border="true" data-framer-name="Close" data-highlight="true" 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(255, 255, 255); box-shadow: rgb(0, 0, 0) 6px 6px 0px 0px; width: 600px; transform: none; transform-origin: 50% 50% 0px; display: flex; position: relative; height: 80px; 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: row; justify-content: flex-start; align-items: flex-start; gap: 20px; opacity: 1; overflow: hidden; cursor: pointer;" tabindex="0"><div data-framer-name="wrapper" style="transform: none; transform-origin: 50% 50% 0px; display: flex; position: relative; width: 600px; height: 80px; padding: 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: 1 0 0px; flex-flow: column; justify-content: center; align-items: center; gap: 20px; opacity: 1; overflow: visible; cursor: pointer;"><div data-framer-name="wrapper" style="transform: none; transform-origin: 50% 50% 0px; display: flex; position: relative; width: 560px; height: 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: row; justify-content: flex-start; align-items: center; gap: 12px; opacity: 1; overflow: hidden; cursor: pointer;"><div style="outline: none; display: flex; flex-flow: column; justify-content: flex-start; flex: 1 0 0px; --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; transform: none; transform-origin: 50% 50% 0px; position: relative; width: 508px; 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; opacity: 1; overflow: visible; cursor: pointer;" data-framer-component-type="RichTextContainer"><p data-styles-preset="paYT5vbnW" style="--framer-text-alignment: left; display: block; position: static; width: 508px; 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, sans-serif; font-size: 20px; font-weight: 900; line-height: 24px; text-align: left; text-transform: uppercase; letter-spacing: -0.8px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;">Do students need their own account?</p></div><div data-framer-name="icon" style="transform: rotate(-90deg); transform-origin: 50% 50% 0px; display: flex; position: relative; width: 40px; height: 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: row; justify-content: center; align-items: center; gap: 10px; opacity: 1; overflow: visible; cursor: pointer;"><div data-framer-component-type="SVG" data-framer-name="Graphic" style="image-rendering: pixelated; flex: 1 0 0px; fill: var(--token-14825bd6-f9b4-4846-afef-1af0cbf8c065, rgb(0, 0, 0)); color: rgb(0, 0, 0); transform: none; transform-origin: 50% 50% 0px; display: block; position: relative; width: 40px; height: 40px; 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; opacity: 1; overflow: visible; cursor: pointer;" aria-hidden="true"><div style="width: 40px; height: 40px; 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: pointer;"><svg style="width: 40px; height: 40px; 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: pointer;" viewBox="0 0 44 44" preserveAspectRatio="none" width="100%" height="100%"><use href="#svg-849996198_1863" 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: pointer;"></use></svg></div></div></div></div></div></div></div></div></div></div></div></div>
create a canvas to display a faq component. we want the faq component to be centered and the space around it to be flexible empty.
reproduce this faq component
Created by: LandingHero
