Profile Picture
Julian Galluzzo

PostPilot Icon Cards Section

A dark section with 6 simple cards - with an icon, heading, and paragraph.
Copy component
Download JSON
{"content":[{"id":"zznvei","name":"section","parent":0,"children":["yqakyo"],"settings":{"_cssGlobalClasses":["xdjjuf","jiaqax"]},"label":"Dark Section"},{"id":"yqakyo","name":"container","parent":"zznvei","children":["jckhuw","bmayyu"],"settings":{"_cssGlobalClasses":["dccpwx"]}},{"id":"jckhuw","name":"heading","parent":"yqakyo","children":[],"settings":{"text":"The Direct Mail Platform For eComm Brands.","_cssGlobalClasses":["pneycn","dnxudm"],"_margin":{"bottom":"75"},"_widthMax":"700"},"label":"H2"},{"id":"bmayyu","name":"div","parent":"yqakyo","children":["theexj","bnuofv","oxtqux","mbxcec","dljcjk","kjomvd"],"settings":{"_cssGlobalClasses":["omouls"]},"label":"Icon Grid"},{"id":"theexj","name":"div","parent":"bmayyu","children":["ssldwz","xdhkpy","ipkqou"],"settings":{"_cssGlobalClasses":["krzegf"],"_background":{"color":{"hex":"#2e2f34","id":"rzwavb","name":"Color #4"}},"_padding:mobile_portrait":{"top":"0"}},"label":"Icon Grid Card"},{"id":"ssldwz","name":"icon","parent":"theexj","children":[],"settings":{"icon":{"library":"svg","svg":{"id":120,"filename":"clap.svg","url":"https://postpilot.local/wp-content/uploads/2025/01/clap.svg"}}}},{"id":"xdhkpy","name":"heading","parent":"theexj","children":[],"settings":{"text":"Ridiculously Easy","_cssGlobalClasses":["elqwhw"]}},{"id":"ipkqou","name":"text-basic","parent":"theexj","children":[],"settings":{"text":"Leave the work to us—strategy, creative, execution and optimization. It’s like having your own direct mail department.","_cssGlobalClasses":["kvwhyj"],"_typography":{"font-size":"18"}}},{"id":"bnuofv","name":"div","parent":"bmayyu","children":["ajjzql","jletsf","crdvzq"],"settings":{"_cssGlobalClasses":["krzegf"],"_background":{"color":{"hex":"#2e2f34","id":"rzwavb","name":"Color #4"}}},"label":"Icon Grid Card"},{"id":"ajjzql","name":"icon","parent":"bnuofv","children":[],"settings":{"icon":{"library":"svg","svg":{"id":121,"filename":"fast.svg","url":"https://postpilot.local/wp-content/uploads/2025/01/fast.svg"}}}},{"id":"jletsf","name":"heading","parent":"bnuofv","children":[],"settings":{"text":"Insanely Fast","_cssGlobalClasses":["elqwhw"]}},{"id":"crdvzq","name":"text-basic","parent":"bnuofv","children":[],"settings":{"text":"From concept to your customer’s hands in under a week. We even run our own state-of-the-art printing facilities for the fastest time to home and best quality.","_cssGlobalClasses":["kvwhyj"],"_typography":{"font-size":"18"}}},{"id":"oxtqux","name":"div","parent":"bmayyu","children":["ilcbqr","kdzaes","yvmciw"],"settings":{"_cssGlobalClasses":["krzegf"],"_background":{"color":{"hex":"#2e2f34","id":"rzwavb","name":"Color #4"}}},"label":"Icon Grid Card"},{"id":"ilcbqr","name":"icon","parent":"oxtqux","children":[],"settings":{"icon":{"library":"svg","svg":{"id":122,"filename":"effective.svg","url":"https://postpilot.local/wp-content/uploads/2025/01/effective.svg"}}}},{"id":"kdzaes","name":"heading","parent":"oxtqux","children":[],"settings":{"text":"Shockingly Effective","_cssGlobalClasses":["elqwhw"]}},{"id":"yvmciw","name":"text-basic","parent":"oxtqux","children":[],"settings":{"text":"Direct mail works. It's worked for over a century. PostPilot made it easy, more targeted, and more relevant. You'll be blown away by your results.","_cssGlobalClasses":["kvwhyj"],"_typography":{"font-size":"18"}}},{"id":"mbxcec","name":"div","parent":"bmayyu","children":["qnebok","cyopzx","dnzvch"],"settings":{"_cssGlobalClasses":["krzegf"],"_background":{"color":{"hex":"#2e2f34","id":"rzwavb","name":"Color #4"}}},"label":"Icon Grid Card"},{"id":"qnebok","name":"icon","parent":"mbxcec","children":[],"settings":{"icon":{"library":"svg","svg":{"id":126,"filename":"funnel.svg","url":"https://postpilot.local/wp-content/uploads/2025/01/funnel.svg"}}}},{"id":"cyopzx","name":"heading","parent":"mbxcec","children":[],"settings":{"text":"Full-funnel","_cssGlobalClasses":["elqwhw"]}},{"id":"dnzvch","name":"text-basic","parent":"mbxcec","children":[],"settings":{"text":"Direct mail can do it all: cold prospecting, retargeting, abandoned cart, loyalty, subscriptions, winbacks, retail, and more.","_cssGlobalClasses":["kvwhyj"],"_typography":{"font-size":"18"}}},{"id":"dljcjk","name":"div","parent":"bmayyu","children":["oelsdq","efsutu","zjtrcy"],"settings":{"_cssGlobalClasses":["krzegf"],"_background":{"color":{"hex":"#2e2f34","id":"rzwavb","name":"Color #4"}}},"label":"Icon Grid Card"},{"id":"oelsdq","name":"icon","parent":"dljcjk","children":[],"settings":{"icon":{"library":"svg","svg":{"id":123,"filename":"66ea7f884dfeeddb123d1f94_stack-friendly.svg","url":"https://postpilot.local/wp-content/uploads/2025/01/66ea7f884dfeeddb123d1f94_stack-friendly.svg"}}}},{"id":"efsutu","name":"heading","parent":"dljcjk","children":[],"settings":{"text":"Stack friendly","_cssGlobalClasses":["elqwhw"]}},{"id":"zjtrcy","name":"text-basic","parent":"dljcjk","children":[],"settings":{"text":"We natively integrate directly with Shopify, Klaviyo, and your tech stack to make setup a cinch.","_cssGlobalClasses":["kvwhyj"],"_typography":{"font-size":"18"}}},{"id":"kjomvd","name":"div","parent":"bmayyu","children":["lurxpr","xzxaqf","xubmro"],"settings":{"_cssGlobalClasses":["krzegf"],"_background":{"color":{"hex":"#2e2f34","id":"rzwavb","name":"Color #4"}},"_padding:mobile_portrait":{"bottom":"0"}},"label":"Icon Grid Card"},{"id":"lurxpr","name":"icon","parent":"kjomvd","children":[],"settings":{"icon":{"library":"svg","svg":{"id":124,"filename":"click.svg","url":"https://postpilot.local/wp-content/uploads/2025/01/click.svg"}}}},{"id":"xzxaqf","name":"heading","parent":"kjomvd","children":[],"settings":{"text":"Less than the cost of a click","_cssGlobalClasses":["elqwhw"]}},{"id":"xubmro","name":"text-basic","parent":"kjomvd","children":[],"settings":{"text":"As low as $.50 per card, including postage. Algorithms be damned.","_cssGlobalClasses":["kvwhyj"],"_typography":{"font-size":"18"}}}],"source":"bricksCopiedElements","sourceUrl":"https://postpilot.local","version":"1.11.1.1","globalClasses":[{"id":"xdjjuf","name":"dark-section","settings":{"_background":{"color":{"hex":"#2e2f34","id":"rzwavb","name":"Color #4"}}}},{"id":"jiaqax","name":"section-padding","settings":{"_padding":{"top":"100","bottom":"100","left":"5%","right":"5%"}}},{"id":"dccpwx","name":"container-width","settings":{"_width":"100%","_widthMax":"1300px"}},{"id":"pneycn","name":"h2--light","settings":{"_typography":{"color":{"hex":"#ffffff","id":"edddcc","name":"Color #2"},"font-family":"Merriweather","font-size":"52","font-weight":"400"},"_typography:mobile_portrait":{"font-size":"30"}}},{"id":"dnxudm","name":"text-align-center","settings":{"_typography":{"text-align":"center"},"_margin":{"left":"auto","right":"auto"}}},{"id":"omouls","name":"icon-grid","settings":{"_width":"100%","_display":"grid","_gridTemplateColumns":"1fr 1fr 1fr","_gridGap":"1px","_background":{"color":{"hex":"#3b3d47"}},"_gridTemplateColumns:tablet_portrait":"1fr 1fr","_gridTemplateColumns:mobile_portrait":"1fr"}},{"id":"krzegf","name":"icon-grid__card","settings":{"_display":"flex","_direction":"column","_justifyContent":"flex-start","_alignItems":"center","_columnGap":"20","_rowGap":"20","_typography":{"color":{"hex":"#ffffff","id":"edddcc","name":"Color #2"},"text-align":"center"},"_padding":{"bottom":"50","top":"50","right":"50","left":"50"},"_padding:mobile_portrait":{"right":"25","left":"25"}}},{"id":"elqwhw","name":"h3--small-white","settings":{"_typography":{"color":{"hex":"#ffffff","id":"edddcc","name":"Color #2"},"font-weight":"500"},"_typography:mobile_portrait":{"font-size":"25"}}},{"id":"kvwhyj","name":"icon-grid__card-paragraph","settings":[]}],"globalElements":[]}

Our notes on this component

Quickly showcase your top features or benefits with this simple & beautiful dark icon cards section.

This component features a 3-wide grid, so you can showcase 3, 6, or 9 (and beyond) different things using this one section.

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
Akshay Joshi

App Feature Section API

Feature-focused section with visually rich cards highlighting key functionalities, benefits, and use cases in a clean, organized layout
View now
Copy now
{"id":6879,"name":"app-feature-section-api","title":"App Feature Section API","date":"2026-03-19 07:29:28","date_formatted":"March 19, 2026","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\/app-feature-section-api\/","thumbnail":null,"bundles":[],"tags":[],"type":"section","content":[{"id":"dfb1f2","name":"section","parent":0,"children":["302986","49427f"],"settings":{"_cssGlobalClasses":["feature__section"]},"label":"Feature Section API"},{"id":"302986","name":"container","parent":"dfb1f2","children":["955e03","1a7ee5"],"settings":{"_cssGlobalClasses":["feature__header-container"]},"label":"Header Row"},{"id":"955e03","name":"block","parent":"302986","children":["1a347c","1b3e3d"],"settings":{"_cssGlobalClasses":["feature__header-left"]},"label":"Left Column"},{"id":"1a347c","name":"text-basic","parent":"955e03","children":[],"settings":{"text":"FEATURES","tag":"span","_cssGlobalClasses":["feature__badge"]},"label":"Badge"},{"id":"1b3e3d","name":"heading","parent":"955e03","children":[],"settings":{"text":"Everything your API needs","tag":"h2","_cssGlobalClasses":["feature__heading"]},"label":"Main Heading"},{"id":"1a7ee5","name":"block","parent":"302986","children":["b0ad70"],"settings":{"_cssGlobalClasses":["feature__header-right"]},"label":"Right Column"},{"id":"b0ad70","name":"text-basic","parent":"1a7ee5","children":[],"settings":{"text":"From schema to production in minutes. Every tool, every safeguard, every insight \u2014 in one platform.","tag":"p","_cssGlobalClasses":["feature__description"]},"label":"Description"},{"id":"49427f","name":"container","parent":"dfb1f2","children":["f62bb7","b44515"],"settings":{"_cssGlobalClasses":["feature__cards-container"]},"label":"Cards Row"},{"id":"f62bb7","name":"block","parent":"49427f","children":["816461","08dd56","dd5e01"],"settings":{"_cssGlobalClasses":["feature__card"]},"label":"Card 1 - Auto-Generated Docs"},{"id":"816461","name":"block","parent":"f62bb7","children":["29c12c"],"settings":{"_cssGlobalClasses":["feature__card-icon-wrap"]},"label":"Card 1 Icon Wrapper"},{"id":"29c12c","name":"icon","parent":"816461","children":[],"settings":{"icon":{"library":"themify","icon":"ti-pencil-alt"},"_cssGlobalClasses":["feature__card-icon"]},"label":"Icon Docs","themeStyles":[]},{"id":"08dd56","name":"heading","parent":"f62bb7","children":[],"settings":{"text":"Auto-Generated Docs","tag":"h3","_cssGlobalClasses":["feature__card-title"]},"label":"Card 1 Title"},{"id":"dd5e01","name":"text-basic","parent":"f62bb7","children":[],"settings":{"text":"Your API schema becomes beautiful, interactive documentation \u2014 automatically. Always in sync, never outdated.","tag":"p","_cssGlobalClasses":["feature__card-text"]},"label":"Card 1 Text"},{"id":"b44515","name":"block","parent":"49427f","children":["31750e","1d5007","2e5133"],"settings":{"_cssGlobalClasses":["feature__card"]},"label":"Card 2 - Instant SDK Generation"},{"id":"31750e","name":"block","parent":"b44515","children":["8215db"],"settings":{"_cssGlobalClasses":["feature__card-icon-wrap"]},"label":"Card 2 Icon Wrapper"},{"id":"8215db","name":"icon","parent":"31750e","children":[],"settings":{"icon":{"library":"ionicons","icon":"ion-md-barcode"},"_cssGlobalClasses":["feature__card-icon"]},"label":"Icon SDK","themeStyles":[]},{"id":"1d5007","name":"heading","parent":"b44515","children":[],"settings":{"text":"Instant SDK Generation","tag":"h3","_cssGlobalClasses":["feature__card-title"]},"label":"Card 2 Title"},{"id":"2e5133","name":"text-basic","parent":"b44515","children":[],"settings":{"text":"One click generates type-safe SDKs for TypeScript, Python, Go, Ruby, and more. Ship client libraries without writing them.","tag":"p","_cssGlobalClasses":["feature__card-text"]},"label":"Card 2 Text"}],"templateType":"section","global_classes":[{"id":"feature__section","name":"feature__section","settings":{"_background":{"color":{"hex":"#edf4f2"}},"_padding":{"top":"8%","bottom":"8%","left":"5%","right":"5%"},"_rowGap":"60"}},{"id":"feature__header-container","name":"feature__header-container","settings":{"_display":"flex","_direction":"row","_alignItems":"flex-end","_justifyContent":"space-between","_columnGap":"40","_widthMax":"100%","_width":"1240","_direction:tablet_portrait":"column","_alignItems:tablet_portrait":"flex-start"}},{"id":"feature__header-left","name":"feature__header-left","settings":{"_width":"55%","_rowGap":"16","_width:tablet_portrait":"100%"}},{"id":"feature__badge","name":"feature__badge","settings":{"_typography":{"font-size":"13","font-weight":"600","letter-spacing":"0.08em","text-transform":"uppercase","color":{"hex":"#2daa85"}},"_background":{"color":{"hex":"#d4ede7"}},"_padding":{"top":"6","bottom":"6","left":"14","right":"14"},"_border":{"radius":{"top":"999","right":"999","bottom":"999","left":"999"}},"_display":"inline-block"}},{"id":"feature__heading","name":"feature__heading","settings":{"_typography":{"font-family":"Inter","font-size":"58","font-weight":"800","line-height":"1.1","color":{"hex":"#0f1c18"}},"_typography:tablet_portrait":{"font-size":"44"},"_typography:mobile_landscape":{"font-size":"36"},"_typography:mobile_portrait":{"font-size":"30"}}},{"id":"feature__header-right","name":"feature__header-right","settings":{"_width":"30%","_width:tablet_portrait":"100%"}},{"id":"feature__description","name":"feature__description","settings":{"_typography":{"font-size":"18","font-family":"Inter","font-weight":"400","line-height":"1.6","color":{"hex":"#6b7280"},"text-align":"right"},"_typography:tablet_portrait":{"text-align":"left"}}},{"id":"feature__cards-container","name":"feature__cards-container","settings":{"_display":"grid","_gridTemplateColumns":"repeat(2, 1fr)","_gridGap":"24","_widthMax":"100%","_width":"1240","_gridTemplateColumns:tablet_portrait":"repeat(1, 1fr)","_gridTemplateColumns:mobile_landscape":"repeat(1, 1fr)"}},{"id":"feature__card","name":"feature__card","settings":{"_background":{"color":{"hex":"#ffffff"}},"_padding":{"top":"32","bottom":"40","left":"32","right":"32"},"_border":{"radius":{"top":"20","right":"20","bottom":"20","left":"20"}},"_boxShadow":{"values":{"offsetX":"0","offsetY":"2","blur":"12","spread":"0"},"color":{"hex":"#000000","rgb":"rgba(0,0,0,0.06)"}},"_rowGap":"16","_display":"flex","_direction":"column","_cssCustom":".feature__card:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.10); transform: translateY(-2px); } .feature__card { transition: box-shadow 0.3s ease, transform 0.3s ease; position: relative; }","_position":"relative"},"modified":1772824568,"user_id":1},{"id":"feature__card-icon-wrap","name":"feature__card-icon-wrap","settings":{"_background":{"color":{"hex":"#d4ede7"}},"_border":{"radius":{"top":"12","right":"12","bottom":"12","left":"12"}},"_padding":{"top":"14","bottom":"14","left":"14","right":"14"},"_width":"52","_height":"52","_display":"flex","_alignItems":"center","_justifyContent":"center"}},{"id":"feature__card-icon","name":"feature__card-icon","settings":{"_typography":{"font-size":"22","color":{"hex":"#2daa85"}}}},{"id":"feature__card-title","name":"feature__card-title","settings":{"_typography":{"font-family":"Inter","font-size":"22","font-weight":"700","line-height":"1.3","color":{"hex":"#0f1c18"}},"_margin":{"top":"8"}}},{"id":"feature__card-text","name":"feature__card-text","settings":{"_typography":{"font-family":"Inter","font-size":"16","font-weight":"400","line-height":"1.65","color":{"hex":"#6b7280"}}}}]}
Profile Picture
Akshay Joshi

PH Press Section

Simple featured content section with a two-column layout.
View now
Copy now
{"id":6871,"name":"ph-press-section","title":"PH Press Section","date":"2026-03-16 13:38:40","date_formatted":"March 16, 2026","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\/ph-press-section\/","thumbnail":null,"bundles":[],"tags":[],"type":"section","content":[{"id":"b55e2f","name":"section","parent":0,"children":["745678"],"settings":{"_cssGlobalClasses":["hunt__press-section","hunt__section"]},"label":"Press Section"},{"id":"745678","name":"container","parent":"b55e2f","children":["994c3f"],"settings":{"_cssGlobalClasses":["hunt__inner"]},"label":"Inner"},{"id":"994c3f","name":"block","parent":"745678","children":["d76a9e","4dec24"],"settings":{"_cssGlobalClasses":["hunt__two-col"]},"label":"2-Col"},{"id":"d76a9e","name":"block","parent":"994c3f","children":["0909a9","e5cd2a","2b56d1","f08e58"],"settings":{"_cssGlobalClasses":["hunt__press-left","hunt__anim-fadein-up"]},"label":"Left"},{"id":"0909a9","name":"text-basic","parent":"d76a9e","children":[],"settings":{"text":"PRESS KIT","tag":"span","_cssGlobalClasses":["hunt__badge--orange"]},"label":"Badge"},{"id":"e5cd2a","name":"heading","parent":"d76a9e","children":[],"settings":{"text":"Everything press needs, one click away","tag":"h2","_cssGlobalClasses":["hunt__section-heading","hunt__heading--left"]},"label":"Heading"},{"id":"2b56d1","name":"block","parent":"d76a9e","children":["dff55a","04913f","33b22a","361324"],"settings":{"_cssGlobalClasses":["hunt__press-features"]},"label":"Features"},{"id":"dff55a","name":"block","parent":"2b56d1","children":["c86333","e3ec18"],"settings":{"_cssGlobalClasses":["hunt__check-row"]},"label":"Item High-res screenshots"},{"id":"c86333","name":"icon","parent":"dff55a","children":[],"settings":{"icon":{"library":"fontawesomeSolid","icon":"fas fa-image"},"_cssGlobalClasses":["hunt__check-icon"]},"label":"Icon","themeStyles":[]},{"id":"e3ec18","name":"text-basic","parent":"dff55a","children":[],"settings":{"text":"High-res screenshots","tag":"span","_cssGlobalClasses":["hunt__check-text"]},"label":"Text"},{"id":"04913f","name":"block","parent":"2b56d1","children":["8cfc39","b2210c"],"settings":{"_cssGlobalClasses":["hunt__check-row"]},"label":"Item Brand logo pack"},{"id":"8cfc39","name":"icon","parent":"04913f","children":[],"settings":{"icon":{"library":"fontawesomeSolid","icon":"fas fa-palette"},"_cssGlobalClasses":["hunt__check-icon"]},"label":"Icon","themeStyles":[]},{"id":"b2210c","name":"text-basic","parent":"04913f","children":[],"settings":{"text":"Brand logo pack","tag":"span","_cssGlobalClasses":["hunt__check-text"]},"label":"Text"},{"id":"33b22a","name":"block","parent":"2b56d1","children":["6e4749","354ad4"],"settings":{"_cssGlobalClasses":["hunt__check-row"]},"label":"Item Press-ready copy"},{"id":"6e4749","name":"icon","parent":"33b22a","children":[],"settings":{"icon":{"library":"fontawesomeSolid","icon":"fas fa-file-lines"},"_cssGlobalClasses":["hunt__check-icon"]},"label":"Icon","themeStyles":[]},{"id":"354ad4","name":"text-basic","parent":"33b22a","children":[],"settings":{"text":"Press-ready copy","tag":"span","_cssGlobalClasses":["hunt__check-text"]},"label":"Text"},{"id":"361324","name":"block","parent":"2b56d1","children":["f3bb0b","99375c"],"settings":{"_cssGlobalClasses":["hunt__check-row"]},"label":"Item Embeddable widgets"},{"id":"f3bb0b","name":"icon","parent":"361324","children":[],"settings":{"icon":{"library":"fontawesomeSolid","icon":"fas fa-link"},"_cssGlobalClasses":["hunt__check-icon"]},"label":"Icon","themeStyles":[]},{"id":"99375c","name":"text-basic","parent":"361324","children":[],"settings":{"text":"Embeddable widgets","tag":"span","_cssGlobalClasses":["hunt__check-text"]},"label":"Text"},{"id":"f08e58","name":"button","parent":"d76a9e","children":[],"settings":{"text":"Download Press Kit","link":{"type":"external","url":"#"},"_cssGlobalClasses":["hunt__btn--primary"],"_cssTransition":"ease .3s"},"label":"CTA"},{"id":"4dec24","name":"block","parent":"994c3f","children":["874e81"],"settings":{"_cssGlobalClasses":["hunt__press-right","hunt__anim-fadein-up"]},"label":"Right"},{"id":"874e81","name":"block","parent":"4dec24","children":["cdc954","77cd36","31de2d"],"settings":{"_cssGlobalClasses":["hunt__press-card"]},"label":"Press Card"},{"id":"cdc954","name":"icon","parent":"874e81","children":[],"settings":{"icon":{"library":"fontawesomeSolid","icon":"fas fa-newspaper"},"_cssGlobalClasses":["hunt__press-card-icon"]},"label":"Icon","themeStyles":[]},{"id":"77cd36","name":"heading","parent":"874e81","children":[],"settings":{"text":"Press Kit Ready","tag":"h3","_cssGlobalClasses":["hunt__press-card-title"]},"label":"Title"},{"id":"31de2d","name":"text-basic","parent":"874e81","children":[],"settings":{"text":"Everything journalists, bloggers, and media partners need in one place. Our press kit includes brand assets, high-resolution screenshots, company information, and ready-to-use resources to make covering our story quick and effortless.","tag":"p","_cssGlobalClasses":["hunt__press-card-sub"]},"label":"Sub"}],"templateType":"section","global_classes":[{"id":"hunt__section","name":"hunt__section","settings":{"_background":{"color":{"hex":"#ffffff"}},"_padding":{"top":"100","bottom":"100","left":"24","right":"24"},"_padding:mobile_landscape":{"top":"60","bottom":"60"}},"modified":1773493462,"user_id":1},{"id":"hunt__inner","name":"hunt__inner","settings":{"_display":"flex","_direction":"column","_alignItems":"center","_rowGap":"28","_widthMax":"100%","_width":"1280","_textAlign":"center"},"modified":1773479545,"user_id":1},{"id":"hunt__anim-fadein-up","name":"hunt__anim-fadein-up","settings":{"_interactions":[{"id":"192518","trigger":"enterView","action":"startAnimation","animationType":"fadeInUp","animationDuration":"0.6s","animationDelay":"0s","target":"self","runOnce":true}]}},{"id":"hunt__badge--orange","name":"hunt__badge--orange","settings":{"_typography":{"font-family":"Inter","font-size":"12","font-weight":"700","color":{"hex":"#FF6154"},"letter-spacing":"0.08em","text-transform":"uppercase"},"_background":{"color":{"hex":"#fff0ee"}},"_border":{"radius":{"top":"999","right":"999","bottom":"999","left":"999"},"width":{"top":"1","right":"1","bottom":"1","left":"1"},"style":"solid","color":{"hex":"#FF6154","rgb":"rgba(255,97,84,0.25)"}},"_padding":{"top":"6","bottom":"6","left":"14","right":"14"},"_display":"inline-block"}},{"id":"hunt__section-heading","name":"hunt__h2","settings":{"_typography":{"font-family":"Inter","font-size":"40","font-weight":"800","color":{"hex":"#1a1a2e"},"text-align":"center","line-height":"1.2"},"_typography:tablet_portrait":{"font-size":"32"},"_widthMax":"680"}},{"id":"hunt__two-col","name":"hunt__two-col","settings":{"_alignItems":"stretch","_widthMax":"100%","_gridTemplateColumns:tablet_portrait":"1fr","_gridGap:tablet_portrait":"40","_display":"flex","_direction":"row","_columnGap":"40","_rowGap":"40"}},{"id":"hunt__heading--left","name":"hunt__heading--left","settings":{"_typography":{"text-align":"left"}}},{"id":"hunt__check-row","name":"hunt__check-row","settings":{"_display":"flex","_direction":"row","_alignItems":"flex-start","_columnGap":"12"}},{"id":"hunt__check-icon","name":"hunt__check-icon","settings":{"_typography":{"font-size":"18","color":{"hex":"#FF6154"}},"_margin":{"top":"2"}}},{"id":"hunt__check-text","name":"hunt__check-text","settings":{"_typography":{"font-family":"Inter","font-size":"15","font-weight":"500","color":{"hex":"#1a1a2e"},"line-height":"1.6"}}},{"id":"hunt__btn--primary","name":"hunt__btn--primary","settings":{"_background":{"color":{"hex":"#5B4FE8"}},"_typography":{"font-family":"Inter","font-size":"15","font-weight":"700","color":{"hex":"#ffffff"}},"_padding":{"top":"14","bottom":"14","left":"28","right":"28"},"_border":{"radius":{"top":"12","right":"12","bottom":"12","left":"12"},"width":{"top":"0","right":"0","bottom":"0","left":"0"}},"_cssTransition":"ease .3s","_background:hover":{"color":{"hex":"#4a3fd4"}},"_transform:hover":"translateY(-2px)","_boxShadow:hover":{"values":{"offsetX":"0","offsetY":"8","blur":"24","spread":"0"},"color":{"hex":"#5B4FE8","rgb":"rgba(91,79,232,0.35)"}}}},{"id":"hunt__press-section","name":"hunt__press-section","settings":{"_background":{"color":{"hex":"#ffffff"}},"_padding":{"left":"24","right":"24"}},"modified":1773493462,"user_id":1},{"id":"hunt__press-left","name":"hunt__press-left","settings":{"_display":"flex","_direction":"column","_rowGap":"28","_alignItems":"flex-start","_interactions":[{"id":"31b812","trigger":"enterView","action":"startAnimation","animationType":"fadeInLeft","animationDuration":"0.6s","animationDelay":"0s","target":"self","runOnce":true}]}},{"id":"hunt__press-features","name":"hunt__press-features","settings":{"_display":"flex","_direction":"column","_rowGap":"16"}},{"id":"hunt__press-right","name":"hunt__press-right","settings":{"_display":"flex","_alignItems":"center","_justifyContent":"center","_interactions":[{"id":"00a9fe","trigger":"enterView","action":"startAnimation","animationType":"fadeInRight","animationDuration":"0.6s","animationDelay":"0s","target":"self","runOnce":true}]}},{"id":"hunt__press-card","name":"hunt__press-card","settings":{"_display":"flex","_direction":"column","_rowGap":"16","_padding":{"top":"36","bottom":"36","left":"36","right":"36"},"_background":{"color":{"hex":"#f3f2ff"}},"_border":{"radius":{"top":"24","right":"24","bottom":"24","left":"24"},"width":{"top":"1","right":"1","bottom":"1","left":"1"},"style":"solid","color":{"hex":"#eeecff"}},"_boxShadow":{"values":{"offsetX":"0","offsetY":"24","blur":"64","spread":"0"},"color":{"hex":"#5B4FE8","rgb":"rgba(91,79,232,0.1)"}}}},{"id":"hunt__press-card-icon","name":"hunt__press-card-icon","settings":{"_typography":{"font-size":"48","color":{"hex":"#5B4FE8"}}}},{"id":"hunt__press-card-title","name":"hunt__press-card-title","settings":{"_typography":{"font-family":"Inter","font-size":"22","font-weight":"800","color":{"hex":"#1a1a2e"}}}},{"id":"hunt__press-card-sub","name":"hunt__press-card-sub","settings":{"_typography":{"font-family":"Inter","font-size":"14","font-weight":"400","color":{"hex":"#6b7280"},"line-height":"1.65"}}}]}
Profile Picture
Akshay Joshi

PH – Steps Cards Section

Feature section with step card design.
View now
Copy now
{"id":6866,"name":"ph-steps-cards-section","title":"PH - Steps Cards Section","date":"2026-03-16 13:03:18","date_formatted":"March 16, 2026","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\/ph-steps-cards-section\/","thumbnail":null,"bundles":[],"tags":[],"type":"section","content":[{"id":"b4a84d","name":"section","parent":0,"children":["3c9fac"],"settings":{"_cssGlobalClasses":["hunt__steps-section","hunt__section"]},"label":"Steps Section"},{"id":"3c9fac","name":"container","parent":"b4a84d","children":["a3503d","2f686d"],"settings":{"_cssGlobalClasses":["hunt__inner","hunt__inner--col"]},"label":"Inner"},{"id":"a3503d","name":"block","parent":"3c9fac","children":["9a7baa","b49180","522db9"],"settings":{"_cssGlobalClasses":["hunt__section-header"]},"label":"Header"},{"id":"9a7baa","name":"text-basic","parent":"a3503d","children":[],"settings":{"text":"HOW IT WORKS","tag":"span","_cssGlobalClasses":["hunt__badge--orange"]},"label":"Badge"},{"id":"b49180","name":"heading","parent":"a3503d","children":[],"settings":{"text":"From zero to launch in 4 steps","tag":"h2","_cssGlobalClasses":["hunt__section-heading"]},"label":"Heading"},{"id":"522db9","name":"text-basic","parent":"a3503d","children":[],"settings":{"text":"Get your launch page live in under 30 minutes.","tag":"p","_cssGlobalClasses":["hunt__section-sub"]},"label":"Subtext"},{"id":"2f686d","name":"block","parent":"3c9fac","children":["c0c188","5b10bc","013316","2d5938"],"settings":{"_cssGlobalClasses":["hunt__steps-grid"]},"label":"Steps Grid"},{"id":"c0c188","name":"block","parent":"2f686d","children":["56d3ce","7375ff","e52525","4ecd53"],"settings":{"_cssGlobalClasses":["hunt__step-card","hunt__anim-fadein-up"],"_cssTransition":"ease .3s"},"label":"Step 1"},{"id":"56d3ce","name":"text-basic","parent":"c0c188","children":[],"settings":{"text":"01","tag":"span","_cssGlobalClasses":["hunt__step-num"]},"label":"Number"},{"id":"7375ff","name":"icon","parent":"c0c188","children":[],"settings":{"icon":{"library":"fontawesomeSolid","icon":"fas fa-plug"},"_cssGlobalClasses":["hunt__step-icon"]},"label":"Icon","themeStyles":[]},{"id":"e52525","name":"heading","parent":"c0c188","children":[],"settings":{"text":"Connect your product","tag":"h3","_cssGlobalClasses":["hunt__step-title"]},"label":"Title"},{"id":"4ecd53","name":"text-basic","parent":"c0c188","children":[],"settings":{"text":"Link your Product Hunt listing and configure your launch settings in seconds.","tag":"p","_cssGlobalClasses":["hunt__step-desc"]},"label":"Desc"},{"id":"5b10bc","name":"block","parent":"2f686d","children":["d3c11b","5fce7d","691590","53798b"],"settings":{"_cssGlobalClasses":["hunt__step-card","hunt__anim-fadein-up"],"_cssTransition":"ease .3s"},"label":"Step 2"},{"id":"d3c11b","name":"text-basic","parent":"5b10bc","children":[],"settings":{"text":"02","tag":"span","_cssGlobalClasses":["hunt__step-num"]},"label":"Number"},{"id":"5fce7d","name":"icon","parent":"5b10bc","children":[],"settings":{"icon":{"library":"fontawesomeSolid","icon":"fas fa-sliders"},"_cssGlobalClasses":["hunt__step-icon"]},"label":"Icon","themeStyles":[]},{"id":"691590","name":"heading","parent":"5b10bc","children":[],"settings":{"text":"Customise your page","tag":"h3","_cssGlobalClasses":["hunt__step-title"]},"label":"Title"},{"id":"53798b","name":"text-basic","parent":"5b10bc","children":[],"settings":{"text":"Add your branding, demo video, referral rewards, and countdown timer.","tag":"p","_cssGlobalClasses":["hunt__step-desc"]},"label":"Desc"},{"id":"013316","name":"block","parent":"2f686d","children":["460644","4d589b","414741","0be44b"],"settings":{"_cssGlobalClasses":["hunt__step-card","hunt__anim-fadein-up"],"_cssTransition":"ease .3s"},"label":"Step 3"},{"id":"460644","name":"text-basic","parent":"013316","children":[],"settings":{"text":"03","tag":"span","_cssGlobalClasses":["hunt__step-num"]},"label":"Number"},{"id":"4d589b","name":"icon","parent":"013316","children":[],"settings":{"icon":{"library":"fontawesomeSolid","icon":"fas fa-share-nodes"},"_cssGlobalClasses":["hunt__step-icon"]},"label":"Icon","themeStyles":[]},{"id":"414741","name":"heading","parent":"013316","children":[],"settings":{"text":"Start collecting signups","tag":"h3","_cssGlobalClasses":["hunt__step-title"]},"label":"Title"},{"id":"0be44b","name":"text-basic","parent":"013316","children":[],"settings":{"text":"Share your launch page and watch referrals and waitlist signups roll in.","tag":"p","_cssGlobalClasses":["hunt__step-desc"]},"label":"Desc"},{"id":"2d5938","name":"block","parent":"2f686d","children":["5b25b2","265158","22338c","e32b84"],"settings":{"_cssGlobalClasses":["hunt__step-card","hunt__anim-fadein-up"],"_cssTransition":"ease .3s"},"label":"Step 4"},{"id":"5b25b2","name":"text-basic","parent":"2d5938","children":[],"settings":{"text":"04","tag":"span","_cssGlobalClasses":["hunt__step-num"]},"label":"Number"},{"id":"265158","name":"icon","parent":"2d5938","children":[],"settings":{"icon":{"library":"fontawesomeSolid","icon":"fas fa-trophy"},"_cssGlobalClasses":["hunt__step-icon"]},"label":"Icon","themeStyles":[]},{"id":"22338c","name":"heading","parent":"2d5938","children":[],"settings":{"text":"Launch & win","tag":"h3","_cssGlobalClasses":["hunt__step-title"]},"label":"Title"},{"id":"e32b84","name":"text-basic","parent":"2d5938","children":[],"settings":{"text":"Go live on Product Hunt with a warm audience ready to upvote from minute one.","tag":"p","_cssGlobalClasses":["hunt__step-desc"]},"label":"Desc"}],"templateType":"section","global_classes":[{"id":"hunt__section","name":"hunt__section","settings":{"_background":{"color":{"hex":"#ffffff"}},"_padding":{"top":"100","bottom":"100","left":"24","right":"24"},"_padding:mobile_landscape":{"top":"60","bottom":"60"}},"modified":1773493462,"user_id":1},{"id":"hunt__inner","name":"hunt__inner","settings":{"_display":"flex","_direction":"column","_alignItems":"center","_rowGap":"28","_widthMax":"100%","_width":"1280","_textAlign":"center"},"modified":1773479545,"user_id":1},{"id":"hunt__anim-fadein-up","name":"hunt__anim-fadein-up","settings":{"_interactions":[{"id":"192518","trigger":"enterView","action":"startAnimation","animationType":"fadeInUp","animationDuration":"0.6s","animationDelay":"0s","target":"self","runOnce":true}]}},{"id":"hunt__inner--col","name":"hunt__inner--col","settings":{"_display":"flex","_direction":"column","_alignItems":"center","_rowGap":"48"}},{"id":"hunt__section-header","name":"hunt__section-header","settings":{"_display":"flex","_direction":"column","_alignItems":"center","_rowGap":"16","_textAlign":"center"}},{"id":"hunt__badge--orange","name":"hunt__badge--orange","settings":{"_typography":{"font-family":"Inter","font-size":"12","font-weight":"700","color":{"hex":"#FF6154"},"letter-spacing":"0.08em","text-transform":"uppercase"},"_background":{"color":{"hex":"#fff0ee"}},"_border":{"radius":{"top":"999","right":"999","bottom":"999","left":"999"},"width":{"top":"1","right":"1","bottom":"1","left":"1"},"style":"solid","color":{"hex":"#FF6154","rgb":"rgba(255,97,84,0.25)"}},"_padding":{"top":"6","bottom":"6","left":"14","right":"14"},"_display":"inline-block"}},{"id":"hunt__section-heading","name":"hunt__h2","settings":{"_typography":{"font-family":"Inter","font-size":"40","font-weight":"800","color":{"hex":"#1a1a2e"},"text-align":"center","line-height":"1.2"},"_typography:tablet_portrait":{"font-size":"32"},"_widthMax":"680"}},{"id":"hunt__section-sub","name":"hunt__section-sub","settings":{"_typography":{"font-family":"Inter","font-size":"16","font-weight":"400","color":{"hex":"#6b7280"},"text-align":"center","line-height":"1.7"},"_widthMax":"560"}},{"id":"hunt__steps-section","name":"hunt__steps-section","settings":{"_background":{"color":{"hex":"#ffffff"}},"_padding":{"left":"24","right":"24"}},"modified":1773493462,"user_id":1},{"id":"hunt__steps-grid","name":"hunt__steps-grid","settings":{"_display":"grid","_gridTemplateColumns":"repeat(4,1fr)","_gridGap":"24","_widthMax":"100%","_gridTemplateColumns:tablet_portrait":"repeat(2,1fr)","_gridTemplateColumns:mobile_portrait":"repeat(1,1fr)"}},{"id":"hunt__step-card","name":"hunt__step-card","settings":{"_display":"flex","_direction":"column","_rowGap":"14","_padding":{"top":"28","bottom":"28","left":"24","right":"24"},"_background":{"color":{"hex":"#ffffff"}},"_border":{"radius":{"top":"20","right":"20","bottom":"20","left":"20"},"width":{"top":"1","right":"1","bottom":"1","left":"1"},"style":"solid","color":{"hex":"#eeecff"}},"_background:hover":{"color":{"hex":"#f8f7ff"}},"_transform:hover":"translateY(-6px)","_boxShadow:hover":{"values":{"offsetX":"0","offsetY":"16","blur":"40","spread":"0"},"color":{"hex":"#5B4FE8","rgb":"rgba(91,79,232,0.12)"}},"_cssTransition":"ease .3s","_interactions":[{"id":"fac789","trigger":"enterView","action":"startAnimation","animationType":"fadeInUp","animationDuration":"0.55s","animationDelay":"0s","target":"self","runOnce":true}]}},{"id":"hunt__step-num","name":"hunt__step-num","settings":{"_typography":{"font-family":"Inter","font-size":"13","font-weight":"800","color":{"hex":"#FF6154"},"letter-spacing":"0.05em"}}},{"id":"hunt__step-icon","name":"hunt__step-icon","settings":{"_typography":{"font-size":"32","color":{"hex":"#5B4FE8"}}}},{"id":"hunt__step-title","name":"hunt__step-title","settings":{"_typography":{"font-family":"Inter","font-size":"17","font-weight":"700","color":{"hex":"#1a1a2e"},"line-height":"1.3"}}},{"id":"hunt__step-desc","name":"hunt__step-desc","settings":{"_typography":{"font-family":"Inter","font-size":"14","font-weight":"400","color":{"hex":"#6b7280"},"line-height":"1.65"}}}]}

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