Email CTA
Category: CTA
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-border="true" data-framer-name="wrapper" style="display: flex; position: relative; width: 1200px; height: 408px; padding: 60px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgb(253, 253, 150); 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: center; gap: 60px; box-shadow: rgb(0, 0, 0) 10px 10px 0px 0px; opacity: 1; overflow: hidden;"><div data-framer-name="wrapper" style="display: flex; position: relative; width: 470px; height: 288px; 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: 0 0 auto; flex-flow: column; justify-content: center; align-items: center; gap: 28px; 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: 111.475px; 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: 111.475px; 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: 87.475px; 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: 87.475px; 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;">Newsletter</p></div></div></div></div><div data-framer-name="wrapper" style="display: flex; position: relative; width: 470px; 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="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="outline: none; display: flex; flex-flow: column; justify-content: flex-start; flex: 0 0 auto; transform: none; position: relative; width: 470px; 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: 470px; 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;">Join our exclusive e-learning newsletter</h2></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 style="outline: none; display: flex; flex-flow: column; justify-content: flex-start; flex: 0 0 auto; transform: none; position: relative; width: 446.5px; height: 48px; max-width: 95%; 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: 446.5px; 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;">Receive insider tips, updates and resources to enhance your teaching, course creation, and platform mastery.</p></div></div></div><form style="display: flex; position: relative; width: 370px; height: 48px; max-width: 370px; 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: flex-start; gap: 12px; opacity: 1; overflow: visible;"><div style="display: block; position: relative; width: 370px; height: 48px; border: 0px none rgb(0, 0, 0); border-radius: 5000px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(249, 245, 246); 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; box-shadow: rgb(0, 0, 0) 4px 4px 0px 0px; opacity: 1; overflow: hidden;"><input type="email" required="" name="Email" placeholder="example@mail.com" value="" style="display: inline-block; position: static; width: 370px; height: 48px; padding: 8px 16px; 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; font-size: 16px; font-weight: 500; line-height: 16px; text-align: start; letter-spacing: -0.64px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: clip; cursor: text;"></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 style="display: block; position: absolute; inset: 8px 8px 8px 330px; width: 32px; height: 32px; 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: visible;"><button type="submit" data-reset="button" style="background: none 0% 0% / auto repeat scroll padding-box border-box rgb(0, 0, 0); height: 32px; width: 32px; opacity: 1; cursor: crosshair; border-radius: 50%; will-change: transform; display: flex; position: relative; border: 0px outset rgb(0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: center; flex: 0 1 auto; flex-flow: row; justify-content: center; align-items: center; overflow: visible;" data-framer-name="Default"><div style="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); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: center; flex: 0 0 auto; flex-flow: row; 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: center; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" focusable="false" color="var(--token-735d697b-5a03-49fe-9b66-80e6a14713f9, rgb(255, 255, 255))" style="user-select: none; width: 20px; height: 20px; display: inline-block; fill: var(--token-735d697b-5a03-49fe-9b66-80e6a14713f9, rgb(255, 255, 255)); color: rgb(255, 255, 255); flex: 0 0 auto; position: static; border: 0px none rgb(255, 255, 255); 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: center; flex-flow: row; opacity: 1; overflow: hidden; cursor: crosshair;"><g color="var(--token-735d697b-5a03-49fe-9b66-80e6a14713f9, rgb(255, 255, 255))" weight="regular" style="display: inline; position: static; width: auto; height: auto; border: 0px none rgb(255, 255, 255); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(255, 255, 255); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: center; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z" style="display: inline; position: static; width: auto; height: auto; border: 0px none rgb(255, 255, 255); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(255, 255, 255); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: center; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;"></path></g></svg></div><!--/$--></div></button></div></div></form></div></div>
create a canvas to display afinal cta component. we want the final cta component to be centered and the space around it to be flexible empty.
reproduce this cta component
Created by: LandingHero
