Profile Picture
Julian Galluzzo

PostPilot Hero Section

A light blue hero section with a 2 column grid layout.
Copy component
Download JSON
{"content":[{"id":"lhclur","name":"section","parent":0,"children":["dvmbxx","ikawlj"],"settings":{"_cssGlobalClasses":["lfzfpq","jiaqax"],"_overflow":"clip"},"label":"Hero"},{"id":"dvmbxx","name":"svg","parent":"lhclur","children":[],"settings":{"file":{"id":13,"filename":"66f14b25a707363026887052_PostPilot-logo-mark.svg","url":"http://postpilot.local/wp-content/uploads/2025/01/66f14b25a707363026887052_PostPilot-logo-mark.svg"},"_cssGlobalClasses":["zzcdtp"]},"themeStyles":[]},{"id":"ikawlj","name":"container","parent":"lhclur","children":["fuuykc"],"settings":{"_cssGlobalClasses":["ietguk","dccpwx"]},"label":"Container"},{"id":"fuuykc","name":"div","parent":"ikawlj","children":["ghpvrd","dqccpz"],"settings":{"_cssGlobalClasses":["upgjjt"]},"label":"Grid"},{"id":"ghpvrd","name":"div","parent":"fuuykc","children":["qbbzes","mbwhgh","hmnpqi","rfqxxe"],"settings":{"_cssGlobalClasses":["gvprjn"]},"label":"Content Wrapper"},{"id":"qbbzes","name":"div","parent":"ghpvrd","children":["nmpoeq","hefgwt","vrycpe"],"settings":{"_cssGlobalClasses":["dzvijm"],"_margin":{"bottom":"30"}},"label":"Rating"},{"id":"nmpoeq","name":"svg","parent":"qbbzes","children":[],"settings":{"signature":"08325a2439d2c8fd7398a5e158c89641","user_id":1,"time":1737369926,"file":{"id":70,"filename":"shopify_logo_darkbg.svg","url":"https://postpilot.local/wp-content/uploads/2025/01/shopify_logo_darkbg.svg"},"_height":"24px","_margin":{"right":"10"}},"themeStyles":[]},{"id":"hefgwt","name":"div","parent":"qbbzes","children":["ptshqs","nfscft","cwmhyy","vhnbgq","splmhv"],"settings":{"_cssGlobalClasses":["uymsvy"]}},{"id":"ptshqs","name":"icon","parent":"hefgwt","children":[],"settings":{"icon":{"library":"ionicons","icon":"ion-ios-star"},"iconColor":{"hex":"#ffffff","id":"edddcc","name":"Color #2"},"_cssGlobalClasses":["fekejk"]},"themeStyles":[],"label":"Star"},{"id":"nfscft","name":"icon","parent":"hefgwt","children":[],"settings":{"icon":{"library":"ionicons","icon":"ion-ios-star"},"iconColor":{"hex":"#ffffff","id":"edddcc","name":"Color #2"},"_cssGlobalClasses":["fekejk"]},"themeStyles":[],"label":"Star"},{"id":"cwmhyy","name":"icon","parent":"hefgwt","children":[],"settings":{"icon":{"library":"ionicons","icon":"ion-ios-star"},"iconColor":{"hex":"#ffffff","id":"edddcc","name":"Color #2"},"_cssGlobalClasses":["fekejk"]},"themeStyles":[],"label":"Star"},{"id":"vhnbgq","name":"icon","parent":"hefgwt","children":[],"settings":{"icon":{"library":"ionicons","icon":"ion-ios-star"},"iconColor":{"hex":"#ffffff","id":"edddcc","name":"Color #2"},"_cssGlobalClasses":["fekejk"]},"themeStyles":[],"label":"Star"},{"id":"splmhv","name":"icon","parent":"hefgwt","children":[],"settings":{"icon":{"library":"ionicons","icon":"ion-ios-star"},"iconColor":{"hex":"#ffffff","id":"edddcc","name":"Color #2"},"_cssGlobalClasses":["fekejk"]},"themeStyles":[],"label":"Star"},{"id":"vrycpe","name":"text-basic","parent":"qbbzes","children":[],"settings":{"text":"5.0","_cssGlobalClasses":["htwgzp"]}},{"id":"mbwhgh","name":"heading","parent":"ghpvrd","children":[],"settings":{"text":"Unlock a profitable new growth channel","tag":"h1","_cssGlobalClasses":["limylc"],"_margin":{"bottom":"30"}}},{"id":"hmnpqi","name":"text-basic","parent":"ghpvrd","children":[],"settings":{"text":"Easier than email. Remarkable results. Full-funnel AI targeting. We reinvented direct mail for modern ecommerce.","_cssGlobalClasses":["tlzrgu"]},"label":"Paragraph"},{"id":"rfqxxe","name":"text-link","parent":"ghpvrd","children":[],"settings":{"text":"Try it risk free","_cssGlobalClasses":["dxkwbv"],"_margin":{"top":"30"}},"label":"Button"},{"id":"dqccpz","name":"image","parent":"fuuykc","children":[],"settings":{"image":{"id":15,"filename":"66e99eb80439ce92afdafea6_hp-hero-img.avif","size":"large","full":"http://postpilot.local/wp-content/uploads/2025/01/66e99eb80439ce92afdafea6_hp-hero-img.avif","url":"http://postpilot.local/wp-content/uploads/2025/01/66e99eb80439ce92afdafea6_hp-hero-img-1024x864.avif"}},"themeStyles":[]}],"source":"bricksCopiedElements","sourceUrl":"https://postpilot.local","version":"1.11.1.1","globalClasses":[{"id":"lfzfpq","name":"hero","settings":{"_background":{"color":{"hex":"#6ab1f3","id":"vqhiae","name":"Color #1"}},"_position":"relative","_typography":{"font-family":"Instrument Sans"},"_justifyContent":"center","_justifyContent:mobile_portrait":"flex-end"},"modified":1737214401,"user_id":1},{"id":"jiaqax","name":"section-padding","settings":{"_padding":{"top":"100","bottom":"100","left":"5%","right":"5%"}}},{"id":"zzcdtp","name":"hero__svg","settings":{"_pointerEvents":"none","_opacity":"0.15","_position":"absolute","_right":"-3%","_zIndex":"0","_height":"75%","_top:mobile_portrait":"auto","_right:mobile_portrait":"-3%","_bottom:mobile_portrait":"10%","_height:mobile_portrait":"100%","_display:mobile_landscape":"none"}},{"id":"ietguk","name":"hero__container","settings":{"_widthMax":"1300","_width":"100%"}},{"id":"dccpwx","name":"container-width","settings":{"_width":"100%","_widthMax":"1300px"}},{"id":"upgjjt","name":"hero__grid","settings":{"_display":"grid","_gridGap":"4rem","_gridTemplateColumns":"1fr 1fr","_width":"100%","_alignItemsGrid":"center","_position":"relative","_display:mobile_landscape":"flex","_direction:mobile_landscape":"column","_justifyContent:mobile_landscape":"center"},"modified":1737214401,"user_id":1},{"id":"gvprjn","name":"hero__content-wrapper","settings":{"_display:mobile_landscape":"flex","_direction:mobile_landscape":"column","_justifyContent:mobile_landscape":"center","_alignSelf:mobile_landscape":"center","_alignItems:mobile_landscape":"center","_typography:mobile_landscape":{"text-align":"center"}}},{"id":"dzvijm","name":"rating","settings":{"_display":"flex","_justifyContent":"flex-start","_alignItems":"center"},"modified":1737370371,"user_id":1},{"id":"uymsvy","name":"rating__star-wrap","settings":{"_display":"flex","_justifyContent":"center","_columnGap":"2px"}},{"id":"fekejk","name":"rating__star","settings":{"iconSize":"20"},"modified":1737370371,"user_id":1},{"id":"htwgzp","name":"rating__number","settings":{"_typography":{"font-weight":"600","color":{"hex":"#ffffff","id":"edddcc","name":"Color #2"}},"_margin":{"left":"10"}},"modified":1737370371,"user_id":1},{"id":"limylc","name":"hero__heading","settings":{"_typography":{"font-size":"70","font-family":"Merriweather","color":{"hex":"#ffffff","id":"edddcc","name":"Color #2"},"font-weight":"400","line-height":"1.1"},"_margin":{"bottom":"15"},"_typography:mobile_portrait":{"font-size":"40"}},"modified":1737214401,"user_id":1},{"id":"tlzrgu","name":"hero__paragraph","settings":{"_typography":{"color":{"hex":"#ffffff","id":"edddcc","name":"Color #2"},"font-size":"20"}}},{"id":"dxkwbv","name":"button","settings":{"_typography":{"color":{"hex":"#000000","id":"hcqvca","name":"Color #3"},"font-size":"18px","text-transform":"uppercase","font-weight":"600"},"_background":{"color":{"hex":"#ffffff","id":"edddcc","name":"Color #2"}},"_padding":{"left":"25","right":"25","bottom":"15","top":"15"},"_background:hover":{"color":{"hex":"#000000","id":"hcqvca","name":"Color #3"}},"_typography:hover":{"color":{"hex":"#ffffff","id":"edddcc","name":"Color #2"}},"_cssTransition":"all 200ms ease"},"modified":1737372282,"user_id":1}],"globalElements":[]}

Our notes on this component

This hero section component contains a simple left-to-right layout with a heading, paragraph, and a button. Along with that, it has an SVG (currently the PostPilot logo) as a faint background detail which you can replace with your own logo.

The design from this component was taken from the PostPilot website – so the images are more than likely all owned by them!

Similar components

Profile Picture
Joe Warren

Hero Section with abstract alignment

Hero Section with CTA and an abstract image grid
View now
Copy now
{"content":[{"id":"ohehxn","name":"section","parent":0,"children":["dhpfqh"],"settings":{"_cssGlobalClasses":["qbqcae"],"_overflow":"clip"}},{"id":"dhpfqh","name":"container","parent":"ohehxn","children":["rgrvpx","keaxfe","ujrspu"],"settings":{"_padding":{"bottom":"0"}}},{"id":"rgrvpx","name":"block","parent":"dhpfqh","children":["hyxcfh","poiioz"],"settings":{"_cssGlobalClasses":["ujjitf"],"_direction":"row","_alignItems":"center","_direction:mobile_landscape":"column"},"label":"Heading Wrapper"},{"id":"hyxcfh","name":"block","parent":"rgrvpx","children":["dbphyd","vhdcgn"],"settings":{"_cssGlobalClasses":["cpmejq"]},"label":"Heading Block"},{"id":"dbphyd","name":"heading","parent":"hyxcfh","children":[],"settings":{"text":"Personalized skincare solutions","_cssGlobalClasses":["mgsplv"],"tag":"h1"}},{"id":"vhdcgn","name":"text-basic","parent":"hyxcfh","children":[],"settings":{"text":"Transform your skin with expert care tailored to your unique needs.","_typography:mobile_portrait":{"text-align":"center"}}},{"id":"poiioz","name":"button","parent":"rgrvpx","children":[],"settings":{"text":"Book a consultation","style":"primary","_cssGlobalClasses":["zdpqak"],"icon":{"library":"svg","svg":{"id":264,"filename":"Phonevector.svg","url":"https://darkturquoise-cormorant-212243.hostingersite.com/wp-content/uploads/2025/04/Phonevector.svg"}},"iconPosition":"left","link":{"type":"external","url":"#"}}},{"id":"keaxfe","name":"block","parent":"dhpfqh","children":["xjyifw","mjpntp","jpteso"],"settings":{"_cssGlobalClasses":["vldtpp"]},"label":"Image Wrapper"},{"id":"xjyifw","name":"image","parent":"keaxfe","children":[],"settings":{"image":{"id":310,"filename":"Rectangle-68.png","size":"large","full":"https://darkturquoise-cormorant-212243.hostingersite.com/wp-content/uploads/2025/05/Rectangle-68.png","url":"https://darkturquoise-cormorant-212243.hostingersite.com/wp-content/uploads/2025/05/Rectangle-68-918x1024.png"},"_cssGlobalClasses":["duspvs"],"_border":{"radius":{"top":"200"}}}},{"id":"mjpntp","name":"image","parent":"keaxfe","children":[],"settings":{"image":{"id":309,"filename":"Rectangle-67.png","size":"large","full":"https://darkturquoise-cormorant-212243.hostingersite.com/wp-content/uploads/2025/05/Rectangle-67.png","url":"https://darkturquoise-cormorant-212243.hostingersite.com/wp-content/uploads/2025/05/Rectangle-67-987x1024.png"},"_cssGlobalClasses":["duspvs"],"_border":{"radius":{"top":"200","right":"200","bottom":"200"}}},"themeStyles":[]},{"id":"jpteso","name":"image","parent":"keaxfe","children":[],"settings":{"image":{"id":308,"filename":"Rectangle-66.png","size":"large","full":"https://darkturquoise-cormorant-212243.hostingersite.com/wp-content/uploads/2025/05/Rectangle-66.png","url":"https://darkturquoise-cormorant-212243.hostingersite.com/wp-content/uploads/2025/05/Rectangle-66-987x1024.png"},"_cssGlobalClasses":["duspvs"]}},{"id":"ujrspu","name":"block","parent":"dhpfqh","children":["kwodgo","hgyvka","dozxxr","yakeaz","thmcyf"],"settings":{"_cssGlobalClasses":["ecwtnh"]},"label":"Logos"},{"id":"kwodgo","name":"svg","parent":"ujrspu","children":[],"settings":{"_cssGlobalClasses":["qhtgev"],"file":{"id":318,"filename":"Compnay-logo.svg","url":"https://darkturquoise-cormorant-212243.hostingersite.com/wp-content/uploads/2025/05/Compnay-logo.svg"}}},{"id":"hgyvka","name":"svg","parent":"ujrspu","children":[],"settings":{"_cssGlobalClasses":["qhtgev"],"file":{"id":317,"filename":"Compnay-logo-4.svg","url":"https://darkturquoise-cormorant-212243.hostingersite.com/wp-content/uploads/2025/05/Compnay-logo-4.svg"}}},{"id":"dozxxr","name":"svg","parent":"ujrspu","children":[],"settings":{"_cssGlobalClasses":["qhtgev"],"file":{"id":316,"filename":"Compnay-logo-3.svg","url":"https://darkturquoise-cormorant-212243.hostingersite.com/wp-content/uploads/2025/05/Compnay-logo-3.svg"}}},{"id":"yakeaz","name":"svg","parent":"ujrspu","children":[],"settings":{"_cssGlobalClasses":["qhtgev"],"file":{"id":315,"filename":"Compnay-logo-2.svg","url":"https://darkturquoise-cormorant-212243.hostingersite.com/wp-content/uploads/2025/05/Compnay-logo-2.svg"}}},{"id":"thmcyf","name":"svg","parent":"ujrspu","children":[],"settings":{"_cssGlobalClasses":["qhtgev"],"file":{"id":314,"filename":"Compnay-logo-1.svg","url":"https://darkturquoise-cormorant-212243.hostingersite.com/wp-content/uploads/2025/05/Compnay-logo-1.svg"}}}],"source":"bricksCopiedElements","sourceUrl":"https://darkturquoise-cormorant-212243.hostingersite.com","version":"1.12.3","globalClasses":[{"id":"qbqcae","name":"section-padding-large","settings":{"_padding":{"top":"100","bottom":"100"}}},{"id":"ujjitf","name":"hero__heading-wrapper","settings":{"_justifyContent":"space-between","_margin":{"bottom":"70"},"_direction:mobile_landscape":"column","_rowGap:mobile_landscape":"16","_margin:mobile_landscape":{"bottom":"50"}}},{"id":"cpmejq","name":"heading__wrapper","settings":{"_width":"auto","_rowGap:mobile_landscape":"16"}},{"id":"mgsplv","name":"h1","settings":{"_typography":{"font-family":"Playfair Display","font-weight":"600","font-size":"40"},"_typography:tablet_portrait":{"font-size":"32"},"_typography:mobile_portrait":{"text-align":"center"}}},{"id":"zdpqak","name":"button__hero","settings":{"_background":{"color":{"hex":"#ff835a","id":"kgysyt","name":"Color #4"}},"_border":{"radius":{"right":"20"}},"_cursor":"pointer","_transform:hover":{"scaleX":"1.02","scaleY":"1.02"},"_cssTransition":"transform 0.2s ease"},"modified":1746461125,"user_id":1},{"id":"vldtpp","name":"hero__image-wrapper","settings":{"_direction":"row","_columnGap":"16","_margin":{"bottom":"70"},"_rowGap:mobile_landscape":"16"}},{"id":"duspvs","name":"hero__img","settings":{"_height":"50vh","_objectFit":"cover","_widthMin":"27vw","_widthMin:tablet_portrait":"35vw","_height:mobile_landscape":"30vh"}},{"id":"ecwtnh","name":"logo__wrapper","settings":{"_direction":"row","_justifyContent":"center","_columnGap":"75","_rowGap:mobile_landscape":"25"}},{"id":"qhtgev","name":"logo__svg","settings":[]}],"globalElements":[]}
Profile Picture
Akshay Joshi

Metric Kit – Hero Section

Modern design section with brand logo and clear CTA
View now
Copy now
{"id":403,"name":"metric-hero","title":"Metric Hero","date":"2025-04-22 20:09:17","date_formatted":"April 22, 2025","author":{"name":"AK_Developer_25","avatar":"https:\/\/secure.gravatar.com\/avatar\/4895fa216fc2f1ee16e6575899e50eb2388264a879a9791a3ad02c7bed840715?s=60&d=mm&r=g","url":"https:\/\/gallopbiz.in\/ak-dev"},"permalink":"https:\/\/gallopbiz.in\/ak-dev\/template\/metric-hero\/","thumbnail":null,"bundles":[],"tags":[],"type":"section","content":[{"id":"22a526","name":"section","parent":0,"children":["21559d","14d057"],"settings":{"_cssGlobalClasses":["nnzedl","vneohb"]},"label":"Hero"},{"id":"21559d","name":"container","parent":"22a526","children":["0013f6","88f662","e11000","edd3cc"],"settings":{"_cssGlobalClasses":["jszqyk","qresdr"]}},{"id":"0013f6","name":"block","parent":"21559d","children":["ca3efa","6a1162"],"settings":{"_direction":"row","_flexWrap":"nowrap","_alignSelf":"center","_justifyContent":"center","_alignItems":"center","_cssGlobalClasses":["akncgn"]},"label":"Trusted Block"},{"id":"ca3efa","name":"image","parent":"0013f6","children":[],"settings":{"image":{"id":176,"filename":"Profile-Images-Container.svg","size":"full","full":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2025\/04\/Profile-Images-Container.svg","url":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2025\/04\/Profile-Images-Container.svg"},"_cssGlobalClasses":["ofidnh"]}},{"id":"6a1162","name":"text-basic","parent":"0013f6","children":[],"settings":{"text":"Trusted by 1000+ clients","_cssGlobalClasses":["ehxkun"]}},{"id":"88f662","name":"heading","parent":"21559d","children":[],"settings":{"text":"Turn social ads into your best revenue channel","_cssGlobalClasses":["veazgd"],"tag":"h1"}},{"id":"e11000","name":"text-basic","parent":"21559d","children":[],"settings":{"text":"We help B2B tech companies generate predictable pipeline through data-driven paid social campaigns.","_cssGlobalClasses":["opglel"]}},{"id":"edd3cc","name":"button","parent":"21559d","children":[],"settings":{"text":"Get your campaign analysis","_cssGlobalClasses":["ulikfi"],"link":{"type":"external","url":"#"}}},{"id":"14d057","name":"container","parent":"22a526","children":["c4cee5","12870a","871747","673677","e972f6","474357"],"settings":{"_cssGlobalClasses":["vloxdg","qresdr"]},"label":"Logo Container"},{"id":"c4cee5","name":"image","parent":"14d057","children":[],"settings":{"_cssGlobalClasses":["wvdfed"],"image":{"id":172,"filename":"Logo.svg.svg","size":"full","full":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2025\/04\/Logo.svg.svg","url":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2025\/04\/Logo.svg.svg"}},"themeStyles":[]},{"id":"12870a","name":"image","parent":"14d057","children":[],"settings":{"_cssGlobalClasses":["wvdfed"],"image":{"id":189,"filename":"Group.svg","size":"full","full":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2025\/04\/Group.svg","url":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2025\/04\/Group.svg"}},"themeStyles":[]},{"id":"871747","name":"image","parent":"14d057","children":[],"settings":{"_cssGlobalClasses":["wvdfed"],"image":{"id":188,"filename":"Logo.svg-1.svg","size":"full","full":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2025\/04\/Logo.svg-1.svg","url":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2025\/04\/Logo.svg-1.svg"}},"themeStyles":[]},{"id":"673677","name":"image","parent":"14d057","children":[],"settings":{"_cssGlobalClasses":["wvdfed"],"image":{"id":187,"filename":"webflow_logo.svg.svg","size":"full","full":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2025\/04\/webflow_logo.svg.svg","url":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2025\/04\/webflow_logo.svg.svg"}},"themeStyles":[]},{"id":"e972f6","name":"image","parent":"14d057","children":[],"settings":{"_cssGlobalClasses":["wvdfed"],"image":{"id":186,"filename":"Logo.svg-2.svg","size":"full","full":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2025\/04\/Logo.svg-2.svg","url":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2025\/04\/Logo.svg-2.svg"}},"themeStyles":[]},{"id":"474357","name":"image","parent":"14d057","children":[],"settings":{"_cssGlobalClasses":["wvdfed"],"image":{"id":185,"filename":"Logo.svg-3.svg","size":"full","full":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2025\/04\/Logo.svg-3.svg","url":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2025\/04\/Logo.svg-3.svg"}},"themeStyles":[]}],"templateType":"section","global_classes":[{"id":"nnzedl","name":"metric-hero","settings":{"_rowGap":"150","_rowGap:mobile_landscape":"80","_rowGap:mobile_portrait":"60"}},{"id":"jszqyk","name":"metric-hero__container","settings":{"_alignSelf":"center","_justifyContent":"center","_alignItems":"center","_rowGap":"48","_widthMax":"872","_typography":{"text-align":"center"},"_widthMax:tablet_portrait":"100%","_rowGap:mobile_landscape":"32"}},{"id":"veazgd","name":"metric-hero__heading","settings":{"_typography":{"font-size":"72","font-weight":"500","color":{"hex":"#171717"},"line-height":"1.2"},"_typography:mobile_landscape":{"font-size":"48"},"_typography:mobile_portrait":{"font-size":"40"}}},{"id":"opglel","name":"metric-hero__textarea","settings":{"_typography":{"font-size":"20","color":{"hex":"#4c4c4c"}},"_typography:mobile_landscape":{"font-size":"16"},"_widthMax":"634","_widthMax:tablet_portrait":"100%"}},{"id":"ulikfi","name":"metric-btn_dark","settings":{"_background":{"color":{"hex":"#171717"}},"_padding":{"top":"10","right":"32","bottom":"10","left":"32"},"_typography":{"color":{"hex":"#ffffff"},"font-size":"16","font-weight":"500"},"_border":{"radius":{"top":"50","right":"50","bottom":"50","left":"50"}},"_heightMin":"56","_background:hover":{"color":{"hex":"#000000","rgb":"rgba(0, 0, 0, 0.73)","hsl":"hsla(0, 0%, 0%, 0.73)"}},"_heightMin:mobile_portrait":"48"}},{"id":"vloxdg","name":"metric-hero__logo-container","settings":{"_direction":"row","_alignSelf":"center","_justifyContent":"space-between","_alignItems":"center","_display:tablet_portrait":"grid","_gridTemplateColumns:tablet_portrait":"repeat(3, 1fr)","_gridGap:tablet_portrait":"50","_justifyItemsGrid:tablet_portrait":"center","_alignItemsGrid:tablet_portrait":"center","_justifyContentGrid:tablet_portrait":"center","_alignContentGrid:tablet_portrait":"center","_justifyContentGrid:mobile_landscape":"center","_alignItemsGrid:mobile_landscape":"center","_justifyItemsGrid:mobile_landscape":"center","_alignContentGrid:mobile_landscape":"center","_gridTemplateColumns:mobile_portrait":"repeat(2, 1fr)"}},{"id":"wvdfed","name":"metric-hero__logos","settings":{"_widthMax:mobile_portrait":"70%"}},{"id":"vneohb","name":"metric-default-section","settings":{"_padding":{"top":"100","bottom":"100","left":"5%","right":"5%"},"_padding:mobile_landscape":{"top":"80","bottom":"80"},"_padding:mobile_portrait":{"top":"60","bottom":"60"}}},{"id":"qresdr","name":"metric-default-container","settings":{"_width":"1728"}},{"id":"akncgn","name":"metric-hero__trusted-block","settings":{"_columnGap":"15"}},{"id":"ehxkun","name":"metric-hero__trusted-block_text","settings":{"_typography":{"color":{"hex":"#4c4c4c"},"font-size":"20"},"_typography:mobile_landscape":{"font-size":"16"}}},{"id":"ofidnh","name":"metric-hero__trusted-logo","settings":{"_width":"176","_width:mobile_portrait":"136"},"modified":1744787858,"user_id":1}]}
Profile Picture
Joe Warren

Hero Section with curved image and background graphic

Hero section with a curved image and background graphics
View now
Copy now
{"content":[{"id":"ldudix","name":"section","parent":0,"children":["hpghnt","fxlhkf","fbbrir"],"settings":{"_cssGlobalClasses":["zpukuq"]},"label":"Hero"},{"id":"hpghnt","name":"container","parent":"ldudix","children":["fydsik"],"settings":{"_cssGlobalClasses":["cmcajs"]}},{"id":"fydsik","name":"block","parent":"hpghnt","children":["jxrcqe","vefhpz","qmozsa"],"settings":{"_cssGlobalClasses":["piqfcm"]},"label":"Content"},{"id":"jxrcqe","name":"heading","parent":"fydsik","children":[],"settings":{"_cssGlobalClasses":["mgsplv"],"tag":"h1","text":"Glow naturally with Skin Care"}},{"id":"vefhpz","name":"text-basic","parent":"fydsik","children":[],"settings":{"text":"Our skincare line is crafted with pure, high-quality ingredients for visible results.","_cssGlobalClasses":["vjxosb"],"tag":"p"}},{"id":"qmozsa","name":"button","parent":"fydsik","children":[],"settings":{"text":"Book an appointment","style":"primary","_cssGlobalClasses":["dljujd"],"icon":{"library":"svg","svg":{"id":151,"filename":"Phone.svg","url":"https://darkturquoise-cormorant-212243.hostingersite.com/wp-content/uploads/2025/04/Phone.svg"},"height":"18","width":"18"},"iconPosition":"left","_margin":{"top":"30"},"link":{"type":"external","url":"#"}}},{"id":"fxlhkf","name":"image","parent":"ldudix","children":[],"settings":{"_cssGlobalClasses":["dcjmxk"],"image":{"id":152,"filename":"Rectangle-41.png","size":"large","full":"https://darkturquoise-cormorant-212243.hostingersite.com/wp-content/uploads/2025/04/Rectangle-41.png","url":"https://darkturquoise-cormorant-212243.hostingersite.com/wp-content/uploads/2025/04/Rectangle-41-1024x630.png"}},"themeStyles":{}},{"id":"fbbrir","name":"svg","parent":"ldudix","children":[],"settings":{"_cssGlobalClasses":["yhuhnh"],"file":{"id":155,"filename":"Backgroundvector.svg","url":"https://darkturquoise-cormorant-212243.hostingersite.com/wp-content/uploads/2025/04/Backgroundvector.svg"}}}],"source":"bricksCopiedElements","sourceUrl":"https://darkturquoise-cormorant-212243.hostingersite.com","version":"1.12.3","globalClasses":[{"id":"zpukuq","name":"hero","settings":{"_background":{"color":{"hex":"#fcf3ee"}},"_padding":{"top":"100","bottom":"100"},"_position":"relative","_height":"60vh","_height:mobile_portrait":"75vh"}},{"id":"cmcajs","name":"hero__container","settings":{"_height":"100%","_justifyContent":"flex-end","_justifyContent:mobile_portrait":"flex-start"}},{"id":"piqfcm","name":"hero__content","settings":{"_rowGap":"10","_widthMax":"30%","_position":"relative","_zIndex":"1","_widthMax:tablet_portrait":"39%","_widthMax:mobile_landscape":"50%","_widthMax:mobile_portrait":"100%"},"modified":1744719835,"user_id":1},{"id":"mgsplv","name":"h1","settings":{"_typography":{"font-family":"Playfair Display","font-weight":"600","font-size":"40"},"_typography:tablet_portrait":{"font-size":"32"}}},{"id":"vjxosb","name":"hero__text-lead","settings":{}},{"id":"dljujd","name":"button-primary","settings":{"_background":{"color":{"hex":"#ff835a"}},"_typography":{"font-weight":"700"},"_padding":{"left":"40","right":"40","bottom":"14","top":"14"},"_border":{"radius":{"right":"20"}},"_background:hover":{"color":{"hex":"#512729"}},"_typography:hover":{"color":{"hex":"#ffffff"}},"_cssTransition":"all 0.2s ease","_cssCustom":".button-primary:hover svg {\n stroke: #ffffff;\n}"}},{"id":"dcjmxk","name":"hero__image","settings":{"_position":"absolute","_top":"0","_right":"0","_objectFit":"cover","_bottom":"0","_height":"100%","_border":{"radius":{"left":"300"}},"_width":"60%","_width:tablet_portrait":"53%","_width:mobile_portrait":"100%","_height:mobile_portrait":"45%","_bottom:mobile_portrait":"0","_top:mobile_portrait":"auto","_border:mobile_portrait":{"radius":{"left":"0","right":"200"}},"_zIndex:mobile_portrait":"10"}},{"id":"yhuhnh","name":"hero__background-svg","settings":{"_position":"absolute","_top":"0","_left":"0","_height":"90%"},"modified":1744719835,"user_id":1}],"globalElements":[]}

Categories

Hero Sections

Nice, you've downloaded this template! Now let's get it on your website...

To use this component, go to your 'Templates', click 'Import', and upload the file you just downloaded! It's that simple. You can then copy/paste it to other sections of your website.
Close & continue

Nice, you've copied this component! Now let's paste it...

To paste this component, simply go to any Bricks page or component and click paste! Simple as that.
Close & continue