Linegrid
Category: Footers
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):
<form data-hs-cf-bound="true" style="display: flex; position: relative; width: 1520.8px; height: 302.062px; padding: 25px 26.6667px 26.6667px; border: 0px solid rgb(30, 30, 30); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(30, 30, 30); font-family: __doconomySans_a8e1a7, __doconomySans_Fallback_a8e1a7, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 19.2px; font-weight: 400; line-height: 21.12px; text-align: start; flex: 0 1 auto; flex-flow: column; opacity: 1; overflow: visible;"><label for="newsletter-input" style="display: block; position: absolute; inset: 26.6667px 1259.6px 264px 26.6667px; width: 234.538px; height: 11.4px; border: 0px solid rgb(30, 30, 30); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(30, 30, 30); font-family: __doconomySans_a8e1a7, __doconomySans_Fallback_a8e1a7, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 12px; font-weight: 400; line-height: 11.4px; text-align: start; text-transform: uppercase; letter-spacing: 0.24px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: default;">Get the latest news from Doconomy</label><div style="display: flex; position: static; width: 1487.47px; height: 226.4px; margin: 0px -10px; border: 0px solid rgb(30, 30, 30); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(30, 30, 30); font-family: __doconomySans_a8e1a7, __doconomySans_Fallback_a8e1a7, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 188.8px; font-weight: 300; line-height: 160.48px; text-align: start; text-transform: uppercase; letter-spacing: -3.776px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible;"><div style="display: block; position: relative; width: 1307.47px; height: 226.4px; border: 0px solid rgb(30, 30, 30); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(30, 30, 30); font-family: __doconomySans_a8e1a7, __doconomySans_Fallback_a8e1a7, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 188.8px; font-weight: 300; line-height: 160.48px; text-align: start; text-transform: uppercase; letter-spacing: -3.776px; flex: 1 1 0%; flex-flow: row; opacity: 1; overflow: visible;"><input placeholder="E-mail" required="" type="email" style="cursor: crosshair; display: inline-block; position: relative; width: 1307.47px; height: 226.4px; padding: 0px 101.008px 0px 0px; border: 0px solid rgb(30, 30, 30); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(30, 30, 30); font-family: __doconomySans_a8e1a7, __doconomySans_Fallback_a8e1a7, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 188.8px; font-weight: 300; line-height: 188.8px; text-align: start; text-transform: uppercase; letter-spacing: -3.776px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: clip;"><div aria-hidden="true" style="display: flex; position: absolute; width: 1307.47px; height: 226.4px; border: 0px solid rgb(30, 30, 30); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(30, 30, 30); font-family: __doconomySans_a8e1a7, __doconomySans_Fallback_a8e1a7, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 188.8px; font-weight: 300; line-height: 188.8px; text-align: start; text-transform: uppercase; letter-spacing: -3.776px; flex: 0 1 auto; flex-flow: row; align-items: center; opacity: 1; overflow: visible;"><div style="display: block; position: static; width: 536.388px; height: 188.8px; border: 0px solid rgb(30, 30, 30); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(30, 30, 30); font-family: __doconomySans_a8e1a7, __doconomySans_Fallback_a8e1a7, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 188.8px; font-weight: 300; line-height: 188.8px; text-align: start; text-transform: uppercase; letter-spacing: -3.776px; flex: 0 1 auto; flex-flow: row; opacity: 0; overflow: visible;">E-mail</div><div style="display: block; position: static; width: 94.4px; height: 8.4875px; margin: 160.48px 0px 0px 6.608px; border: 0px solid rgb(30, 30, 30); background: none 0% 0% / auto repeat scroll padding-box border-box rgb(30, 30, 30); color: rgb(30, 30, 30); font-family: __doconomySans_a8e1a7, __doconomySans_Fallback_a8e1a7, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 188.8px; font-weight: 300; line-height: 188.8px; text-align: start; text-transform: uppercase; letter-spacing: -3.776px; flex: 0 0 auto; flex-flow: row; opacity: 0; overflow: visible;"></div></div></div><button type="submit" style="display: block; position: static; width: 180px; height: 226.4px; padding: 0px 0px 0px 60px; border: 0px solid rgb(30, 30, 30); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(30, 30, 30); font-family: __doconomySans_a8e1a7, __doconomySans_Fallback_a8e1a7, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 188.8px; font-weight: 300; line-height: 160.48px; text-align: center; flex: 0 0 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;"><span style="display: block; position: absolute; inset: 53.2px 61px 174.2px 1427.47px; width: 1px; height: 1px; margin: -1px; border: 0px solid rgb(30, 30, 30); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(30, 30, 30); font-family: __doconomySans_a8e1a7, __doconomySans_Fallback_a8e1a7, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 188.8px; font-weight: 300; line-height: 160.48px; text-align: center; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: hidden; cursor: pointer;">Submit and subscribe</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="display: block; position: static; width: 120px; height: 120px; border: 0px solid rgb(30, 30, 30); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(30, 30, 30); font-family: __doconomySans_a8e1a7, __doconomySans_Fallback_a8e1a7, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 188.8px; font-weight: 300; line-height: 160.48px; text-align: center; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: hidden; cursor: pointer;"><path d="M22.35 12 12 1.65 10.95 2.7l8.54 8.55H1.75v1.5h17.74l-8.55 8.55L12 22.35 22.35 12Z" style="display: inline; position: static; width: auto; height: auto; border: 0px solid rgb(30, 30, 30); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(30, 30, 30); font-family: __doconomySans_a8e1a7, __doconomySans_Fallback_a8e1a7, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 188.8px; font-weight: 300; line-height: 160.48px; text-align: center; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;"></path></svg></button></div><div style="cursor: crosshair; display: flex; position: static; width: 1467.47px; height: 24px; border: 0px solid rgb(30, 30, 30); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(30, 30, 30); font-family: __doconomySans_a8e1a7, __doconomySans_Fallback_a8e1a7, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 19.2px; font-weight: 400; line-height: 21.12px; text-align: start; flex: 0 1 auto; flex-flow: row; align-items: center; opacity: 1; overflow: visible;"><input required="" type="checkbox" name="privacy_policy" style="display: block; position: static; width: 24px; height: 24px; margin: 0px 10px 0px 0px; border: 0.8px solid rgb(30, 30, 30); border-radius: 9999px; background: none 0% 0% / auto repeat scroll border-box border-box rgba(0, 0, 0, 0); color: rgb(30, 30, 30); font-family: __doconomySans_a8e1a7, __doconomySans_Fallback_a8e1a7, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 19.2px; font-weight: 400; line-height: 21.12px; text-align: start; flex: 0 0 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: default;"><label for="newsletter-policy" style="cursor: crosshair; display: block; position: static; width: 568.588px; height: 21.1125px; border: 0px solid rgb(30, 30, 30); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(30, 30, 30); font-family: __doconomySans_a8e1a7, __doconomySans_Fallback_a8e1a7, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 19.2px; font-weight: 400; line-height: 21.12px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible;">By submitting this form you have read and accepted our <a href="/legal/privacy-policy" style="display: inline-block; position: relative; width: 110.488px; height: 21.1125px; border: 0px solid rgb(30, 30, 30); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(30, 30, 30); font-family: __doconomySans_a8e1a7, __doconomySans_Fallback_a8e1a7, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 19.2px; font-weight: 400; line-height: 21.12px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;">Privacy Policy</a>.</label></div></form>
create a canvas to display a FOOTERcomponent. we want the FOOTERcomponent to be centered and the space around it to be flexible empty.
reproduce this FOTERcomponent
Created by: LandingHero
