CTA section in card format
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 style="display: block; position: static; width: 1520.8px; height: 816.287px; margin: 172.8px 0px 0px; padding: 0px 40px; border: 0px none rgb(28, 28, 28); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(28, 28, 28); font-family: NeueHaasGroteskText, Arial, sans-serif; font-size: 15.36px; font-weight: 400; line-height: 19.968px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: clip; cursor: crosshair;"><div style="display: block; position: static; width: 1440.8px; height: 67.175px; border: 0px none rgb(28, 28, 28); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(28, 28, 28); font-family: NeueHaasGroteskText, Arial, sans-serif; font-size: 15.36px; font-weight: 400; line-height: 19.968px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;"><div style="display: block; position: static; width: 1440.8px; height: 67.175px; border: 0px none rgb(28, 28, 28); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(28, 28, 28); font-family: NeueHaasGroteskText, Arial, sans-serif; font-size: 15.36px; font-weight: 400; line-height: 19.968px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: hidden; cursor: crosshair;"><div style="will-change: transform; transform: translate3d(0px, 0em, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d; cursor: crosshair; display: block; position: static; width: 1440.8px; height: 67.175px; border: 0px none rgb(28, 28, 28); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(28, 28, 28); font-family: Drukcyr, Impact, sans-serif; font-size: 74.6496px; font-weight: 700; line-height: 67.1846px; text-align: start; text-transform: uppercase; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible;">Join us</div></div></div><div style="display: block; position: static; width: 1440.8px; height: 1px; margin: 40px 0px; border: 0px none rgb(28, 28, 28); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(28, 28, 28); font-family: NeueHaasGroteskText, Arial, sans-serif; font-size: 15.36px; font-weight: 400; line-height: 19.968px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;"><div style="cursor: crosshair; display: block; position: static; width: 2593.44px; height: 1px; margin: 0px 0px 14.8992px -80px; border: 0px none rgb(28, 28, 28); background: none 0% 0% / auto repeat scroll padding-box border-box rgb(10, 10, 10); color: rgb(28, 28, 28); font-family: NeueHaasGroteskText, Arial, sans-serif; font-size: 15.36px; font-weight: 400; line-height: 19.968px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible;"></div></div><div style="display: flex; position: static; width: 1440.8px; height: 668.112px; border: 0px none rgb(28, 28, 28); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(28, 28, 28); font-family: NeueHaasGroteskText, Arial, sans-serif; font-size: 15.36px; font-weight: 400; line-height: 19.968px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;"><div style="cursor: crosshair; display: block; position: static; width: 230.438px; height: 668.112px; border: 0px none rgb(28, 28, 28); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(28, 28, 28); font-family: NeueHaasGroteskText, Arial, sans-serif; font-size: 15.36px; font-weight: 400; line-height: 19.968px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible;"></div><div style="display: flex; position: relative; width: 1210.36px; height: 556.112px; margin: 0px 0px 112px; border: 0px none rgb(28, 28, 28); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(28, 28, 28); font-family: NeueHaasGroteskText, Arial, sans-serif; font-size: 15.36px; font-weight: 400; line-height: 19.968px; text-align: start; flex: 0 1 auto; flex-flow: column; justify-content: flex-end; align-items: center; opacity: 1; overflow: visible; cursor: crosshair;"><div style="display: flex; position: relative; width: 1210.36px; height: 556.112px; padding: 40px; border: 0px none rgb(28, 28, 28); border-radius: 10px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(28, 28, 28); font-family: NeueHaasGroteskText, Arial, sans-serif; font-size: 15.36px; font-weight: 400; line-height: 19.968px; text-align: start; flex: 0 1 auto; flex-flow: row; justify-content: space-between; opacity: 1; z-index: 0; overflow: visible; cursor: crosshair;"><div style="cursor: crosshair; display: flex; position: static; width: 678.213px; height: 476.112px; border: 0px none rgb(28, 28, 28); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(28, 28, 28); font-family: NeueHaasGroteskText, Arial, sans-serif; font-size: 15.36px; font-weight: 400; line-height: 19.968px; text-align: start; flex: 0 1 auto; flex-flow: column; justify-content: space-between; align-items: flex-start; gap: 80px; opacity: 1; overflow: visible;"><div style="display: block; position: static; width: 81.1px; height: 81.1px; border: 0px none rgb(28, 28, 28); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(28, 28, 28); font-family: NeueHaasGroteskText, Arial, sans-serif; font-size: 15.36px; font-weight: 400; line-height: 19.968px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;"><img loading="lazy" src="https://cdn.prod.website-files.com/63dc103a70f1b868bc6f020d/63dc103a70f1b8fdad6f024b_Smile-cta.svg" alt="hire team for project" style="cursor: crosshair; display: inline-block; position: static; width: 81.1px; height: 81.1px; max-width: 100%; border: 0px none rgb(28, 28, 28); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(28, 28, 28); font-family: NeueHaasGroteskText, Arial, sans-serif; font-size: 15.36px; font-weight: 400; line-height: 19.968px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: clip;"></div><div style="display: flex; position: static; width: 610.388px; height: 311.525px; border: 0px none rgb(28, 28, 28); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(28, 28, 28); font-family: NeueHaasGroteskText, Arial, sans-serif; font-size: 15.36px; font-weight: 400; line-height: 19.968px; text-align: start; flex: 0 1 auto; flex-flow: column; align-items: flex-start; gap: 40px; opacity: 1; overflow: visible; cursor: crosshair;"><div style="display: flex; position: static; width: 610.388px; height: 225.262px; border: 0px none rgb(28, 28, 28); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(28, 28, 28); font-family: NeueHaasGroteskText, Arial, sans-serif; font-size: 15.36px; font-weight: 400; line-height: 19.968px; text-align: start; flex: 0 1 auto; flex-flow: column; gap: 16px; opacity: 1; overflow: visible; cursor: crosshair;"><div style="display: block; position: static; width: 610.388px; height: 24.95px; border: 0px none rgb(28, 28, 28); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(28, 28, 28); font-family: NeueHaasGroteskText, Arial, sans-serif; font-size: 19.2px; font-weight: 400; line-height: 24.96px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">Begin your journey with Unbench</div><div style="display: block; position: static; width: 610.388px; height: 184.312px; border: 0px none rgb(28, 28, 28); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(28, 28, 28); font-family: NeueHaasGroteskText, Arial, sans-serif; font-size: 61.44px; font-weight: 400; line-height: 61.44px; text-align: start; letter-spacing: -2.4576px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">Ready to Launch Your Project Fast - with the Right Talents?</div></div><div style="display: flex; position: static; width: 170.538px; height: 46.2625px; border: 0px none rgb(28, 28, 28); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(28, 28, 28); font-family: NeueHaasGroteskText, Arial, sans-serif; font-size: 15.36px; font-weight: 400; line-height: 19.968px; text-align: start; flex: 0 1 auto; flex-flow: row; justify-content: flex-start; align-items: flex-start; gap: 14.4px; opacity: 1; overflow: visible; cursor: crosshair;"><a href="https://platform.unbench.us/signup" target="_blank" style="display: flex; position: relative; width: 170.538px; height: 46.2625px; max-width: 100%; padding: 15.36px 16.896px; border: 0px none rgb(250, 218, 163); border-radius: 6.4px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(28, 28, 28); color: rgb(250, 218, 163); font-family: NeueHaasGroteskText, Arial, sans-serif; font-size: 15.36px; font-weight: 400; line-height: 19.968px; text-align: start; flex: 0 1 auto; flex-flow: row; justify-content: space-between; align-items: center; gap: 38.4px; opacity: 1; overflow: visible; cursor: pointer;"><div style="display: block; position: static; width: 83.025px; height: 15.5625px; border: 0px none rgb(250, 218, 163); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(250, 218, 163); font-family: NeueHaasGroteskText, Arial, sans-serif; font-size: 15.36px; font-weight: 400; line-height: 19.968px; text-align: start; flex: 0 1 auto; flex-flow: column; align-items: start; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; opacity: 1; overflow: visible; cursor: pointer;"><div style="display: block; position: static; width: 83.025px; height: 15.5625px; border: 0px none rgb(250, 218, 163); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(250, 218, 163); font-family: NeueHaasGroteskText, Arial, sans-serif; font-size: 11.9808px; font-weight: 400; line-height: 15.575px; text-align: start; text-transform: uppercase; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;">Start Today</div></div><div style="display: flex; position: relative; width: 15.35px; height: 7.675px; border: 0px none rgb(250, 218, 163); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(250, 218, 163); font-family: NeueHaasGroteskText, Arial, sans-serif; font-size: 15.36px; font-weight: 400; line-height: 19.968px; text-align: start; flex: 0 1 auto; flex-flow: row; align-items: center; opacity: 1; overflow: hidden; cursor: pointer;"><svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 16 8" fill="none" style="display: block; position: absolute; width: 15.35px; height: 7.675px; border: 0px none rgb(250, 218, 163); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(250, 218, 163); font-family: NeueHaasGroteskText, Arial, sans-serif; font-size: 15.36px; font-weight: 400; line-height: 19.968px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: hidden; cursor: pointer;"><path d="M12.01 3H0V5H12.01V8L16 4L12.01 0V3Z" fill="currentColor" style="display: inline; position: static; width: auto; height: auto; border: 0px none rgb(250, 218, 163); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(250, 218, 163); font-family: NeueHaasGroteskText, Arial, sans-serif; font-size: 15.36px; font-weight: 400; line-height: 19.968px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 16 8" fill="none" style="transform: translate3d(-120%, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d; display: block; position: absolute; width: 15.35px; height: 7.675px; border: 0px none rgb(250, 218, 163); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(250, 218, 163); font-family: NeueHaasGroteskText, Arial, sans-serif; font-size: 15.36px; font-weight: 400; line-height: 19.968px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: hidden; cursor: pointer;"><path d="M12.01 3H0V5H12.01V8L16 4L12.01 0V3Z" fill="currentColor" style="display: inline; position: static; width: auto; height: auto; border: 0px none rgb(250, 218, 163); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(250, 218, 163); font-family: NeueHaasGroteskText, Arial, sans-serif; font-size: 15.36px; font-weight: 400; line-height: 19.968px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;"></path></svg></div></a></div></div></div><div style="display: flex; position: static; width: 435.188px; height: 476.112px; border: 0px none rgb(28, 28, 28); border-radius: 10px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(28, 28, 28); font-family: NeueHaasGroteskText, Arial, sans-serif; font-size: 15.36px; font-weight: 400; line-height: 19.968px; text-align: start; flex: 0 1 auto; flex-flow: row; justify-content: center; align-items: center; opacity: 1; overflow: hidden; cursor: crosshair;"><img sizes="(max-width: 1439px) 100vw, 1211.99658203125px" srcset="https://cdn.prod.website-files.com/63dc103a70f1b868bc6f020d/63ed1117e77e1243fe8e08f5_Cta-img-p-500.webp 500w, https://cdn.prod.website-files.com/63dc103a70f1b868bc6f020d/63ed1117e77e1243fe8e08f5_Cta-img-p-800.webp 800w, https://cdn.prod.website-files.com/63dc103a70f1b868bc6f020d/63ed1117e77e1243fe8e08f5_Cta-img-p-1080.webp 1080w, https://cdn.prod.website-files.com/63dc103a70f1b868bc6f020d/63ed1117e77e1243fe8e08f5_Cta-img.webp 1212w" alt="Committed Partner for IT Outsourcing Services" loading="lazy" src="https://cdn.prod.website-files.com/63dc103a70f1b868bc6f020d/63ed1117e77e1243fe8e08f5_Cta-img.webp" style="display: block; position: static; width: 435.188px; height: 476.112px; max-width: 100%; border: 0px none rgb(28, 28, 28); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(28, 28, 28); font-family: NeueHaasGroteskText, Arial, sans-serif; font-size: 15.36px; font-weight: 400; line-height: 19.968px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: clip; cursor: crosshair;"></div><div style="cursor: crosshair; display: block; position: absolute; width: 1210.36px; height: 556.112px; border: 0px none rgb(28, 28, 28); border-radius: 10px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(250, 218, 163); color: rgb(28, 28, 28); font-family: NeueHaasGroteskText, Arial, sans-serif; font-size: 15.36px; font-weight: 400; line-height: 19.968px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; z-index: -1; overflow: visible;"></div></div><div style="will-change: transform; transform: translate3d(-7.73015em, 2.39842em, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d; display: block; position: absolute; top: -0.675px; width: 1185.01px; height: 556.787px; border: 0px none rgb(28, 28, 28); border-radius: 10px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(249, 228, 193); color: rgb(28, 28, 28); font-family: NeueHaasGroteskText, Arial, sans-serif; font-size: 15.36px; font-weight: 400; line-height: 19.968px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; z-index: -2; overflow: visible; cursor: crosshair;"></div><div style="will-change: transform; transform: translate3d(-13.778em, 4.79683em, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d; display: block; position: absolute; top: -0.675px; width: 1185.01px; height: 556.787px; border: 0px none rgb(28, 28, 28); border-radius: 10px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(248, 235, 213); color: rgb(28, 28, 28); font-family: NeueHaasGroteskText, Arial, sans-serif; font-size: 15.36px; font-weight: 400; line-height: 19.968px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; z-index: -3; overflow: visible; cursor: crosshair;"></div></div></div></div>
create a canvas to display a cta component. we want the ctacomponent to be centered and the space around it to be flexible empty.
reproduce this cta component
Created by: LandingHero
