
Akshay Joshi
Bento Grid Section
Bento-style grid section featuring icon cards, image-based cards, statistic highlights, and visually structured content blocks.
Copy component
Download JSON

{"id":7644,"name":"bento-grid-section-2","title":"Bento Grid Section","date":"2026-05-01 12:33:13","date_formatted":"May 1, 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\/bento-grid-section-2\/","thumbnail":null,"bundles":[],"tags":[],"type":"section","content":[{"id":"f3d120","name":"section","parent":0,"children":["26d39b"],"settings":{"_cssGlobalClasses":["bento__section"]},"label":"Bento Grid Section"},{"id":"26d39b","name":"container","parent":"f3d120","children":["eecc7e","34d6d9"],"settings":{"_cssGlobalClasses":["bento__inner","wrredp"]},"label":"Inner"},{"id":"eecc7e","name":"container","parent":"26d39b","children":["f266d8","e421cb","47d840"],"settings":{"_cssGlobalClasses":["xwroce"]}},{"id":"f266d8","name":"block","parent":"eecc7e","children":["1befb1","47ee90","88eee5","013070"],"settings":{"_cssGlobalClasses":["bento__card","bento__card--article","bento__card--span2"],"_gridItemColumnSpan":"1 \/ 2","_gridItemRowSpan":"1 \/ 3","_gridItemColumnSpan:mobile_landscape":"1 \/ 2","_gridItemRowSpan:mobile_landscape":"1 \/ 2"},"label":"Card: Scroll Animations That Feel Al"},{"id":"1befb1","name":"image","parent":"f266d8","children":[],"settings":{"image":{"id":6905,"filename":"69722431993ac6c1d54b6f4e_c54210726554d12ec3d9cf840c3dd75b_hero_image_1-1-scaled.webp","size":"full","full":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2026\/03\/69722431993ac6c1d54b6f4e_c54210726554d12ec3d9cf840c3dd75b_hero_image_1-1-scaled.webp","url":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2026\/03\/69722431993ac6c1d54b6f4e_c54210726554d12ec3d9cf840c3dd75b_hero_image_1-1-scaled.webp"},"_cssGlobalClasses":["bento__card-img"]},"label":"Img: Man silhouette against orange ","themeStyles":[]},{"id":"47ee90","name":"text-basic","parent":"f266d8","children":[],"settings":{"text":"01","tag":"span","_cssGlobalClasses":["bento__card-num"]},"label":"Number"},{"id":"88eee5","name":"text-basic","parent":"f266d8","children":[],"settings":{"text":"MOTION","tag":"span","_cssGlobalClasses":["bento__pill","bento__pill--tag"]},"label":"Tag"},{"id":"013070","name":"block","parent":"f266d8","children":["cec76e","342344"],"settings":{"_cssGlobalClasses":["kaawjy"]}},{"id":"cec76e","name":"block","parent":"013070","children":["5999a1","c6e043","4061d4"],"settings":{"_cssGlobalClasses":["jskfqx"]}},{"id":"5999a1","name":"text-basic","parent":"cec76e","children":[],"settings":{"text":"APR 12, 2026 \u2014 8 MIN","tag":"span","_cssGlobalClasses":["bento__card-meta"]},"label":"Meta"},{"id":"c6e043","name":"heading","parent":"cec76e","children":[],"settings":{"text":"Scroll Animations That Feel Alive","tag":"h3","_cssGlobalClasses":["bento__card-title"],"_padding":{"left":"0","right":"0"}},"label":"Title"},{"id":"4061d4","name":"text-basic","parent":"cec76e","children":[],"settings":{"text":"Most scroll animations feel like afterthoughts. Here is how to make them feel intentional, responsive, and genuinely delightful using GSAP ScrollTrigger and modern techniques.","tag":"p","_cssGlobalClasses":["bento__card-excerpt"],"_padding":{"left":"0","right":"0"}},"label":"Excerpt"},{"id":"342344","name":"button","parent":"013070","children":[],"settings":{"text":"READ ARTICLE \u2192","link":{"type":"external","url":"#"},"_cssGlobalClasses":["bento__card-link"],"_cssTransition":"ease .2s","_typography:hover":{"color":{"hex":"#d9ff3f"}}},"label":"Read Link"},{"id":"e421cb","name":"block","parent":"eecc7e","children":["1fb1ca","513a00","f1faf1","a18a35"],"settings":{"_cssGlobalClasses":["bento__card","bento__card--profile"]},"label":"Card: Profile"},{"id":"1fb1ca","name":"image","parent":"e421cb","children":[],"settings":{"image":{"id":6949,"filename":"6968cfcb2e32c0680bd32be0_59cb32d7b6fef7a7b3a2215c76f78a8c_Placeholder-Image.webp","size":"large","full":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2026\/03\/6968cfcb2e32c0680bd32be0_59cb32d7b6fef7a7b3a2215c76f78a8c_Placeholder-Image.webp","url":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2026\/03\/6968cfcb2e32c0680bd32be0_59cb32d7b6fef7a7b3a2215c76f78a8c_Placeholder-Image-1024x501.webp"},"_cssGlobalClasses":["bento__profile-avatar"]},"label":"Avatar"},{"id":"513a00","name":"heading","parent":"e421cb","children":[],"settings":{"text":"Alex Chen","tag":"h3","_cssGlobalClasses":["bento__profile-name"]},"label":"Name"},{"id":"f1faf1","name":"text-basic","parent":"e421cb","children":[],"settings":{"text":"Design engineer obsessed with making the web feel tangible. Writing about interfaces, motion, and the details that matter.","tag":"p","_cssGlobalClasses":["bento__card-excerpt"]},"label":"Bio"},{"id":"a18a35","name":"block","parent":"e421cb","children":["feefb9","df33ed"],"settings":{"_cssGlobalClasses":["jfuulu"]}},{"id":"feefb9","name":"text-basic","parent":"a18a35","children":[],"settings":{"text":"\u25cf Open to work","tag":"span","_cssGlobalClasses":["bento__status-pill"]},"label":"Status"},{"id":"df33ed","name":"block","parent":"a18a35","children":["35066a","a3a122","7f2b8c"],"settings":{"_cssGlobalClasses":["vmuvij"]}},{"id":"35066a","name":"button","parent":"df33ed","children":[],"settings":{"text":"X","link":{"type":"external","url":"#"},"_cssGlobalClasses":["bento__social-btn"],"_cssTransition":"ease .2s","_background:hover":{"color":{"hex":"#d9ff3f"}},"_typography:hover":{"color":{"hex":"#05070a"}}},"label":"Social X"},{"id":"a3a122","name":"button","parent":"df33ed","children":[],"settings":{"text":"GH","link":{"type":"external","url":"#"},"_cssGlobalClasses":["bento__social-btn"],"_cssTransition":"ease .2s","_background:hover":{"color":{"hex":"#d9ff3f"}},"_typography:hover":{"color":{"hex":"#05070a"}}},"label":"Social GH"},{"id":"7f2b8c","name":"button","parent":"df33ed","children":[],"settings":{"text":"LI","link":{"type":"external","url":"#"},"_cssGlobalClasses":["bento__social-btn"],"_cssTransition":"ease .2s","_background:hover":{"color":{"hex":"#d9ff3f"}},"_typography:hover":{"color":{"hex":"#05070a"}}},"label":"Social LI"},{"id":"47d840","name":"block","parent":"eecc7e","children":["6ba9a5","d2f288","bbc70c","ee1980"],"settings":{"_cssGlobalClasses":["bento__card","bento__card--nl"]},"label":"Card: Newsletter"},{"id":"6ba9a5","name":"icon","parent":"47d840","children":[],"settings":{"icon":{"library":"fontawesomeSolid","icon":"fas fa-shapes"},"_cssGlobalClasses":["bento__nl-icon"]},"label":"NL Icon","themeStyles":[]},{"id":"d2f288","name":"heading","parent":"47d840","children":[],"settings":{"text":"Weekly deep dives","tag":"h3","_cssGlobalClasses":["bento__card-title"]},"label":"NL Heading"},{"id":"bbc70c","name":"text-basic","parent":"47d840","children":[],"settings":{"text":"One focused article per week. No fluff, just craft. Join 2,400+ readers.","tag":"p","_cssGlobalClasses":["bento__card-excerpt"]},"label":"NL Body"},{"id":"ee1980","name":"form","parent":"47d840","children":[],"settings":{"_cssGlobalClasses":["bento__nl-form"],"fields":[{"id":"5bec3b","type":"email","label":"","placeholder":"you@email.com","required":"1","width":"80"}],"submitButton":{"text":"Join","style":"primary"},"actions":["email"]},"label":"NL Form"},{"id":"34d6d9","name":"block","parent":"26d39b","children":["e12041","2ce63d","e73dd5","88dd6d","fa1df8","5cdec2"],"settings":{"_cssGlobalClasses":["bento__grid-main"]},"label":"Bento Grid"},{"id":"e12041","name":"block","parent":"34d6d9","children":["0dd51d","a8c8ad","0cb92b","46d9b8"],"settings":{"_cssGlobalClasses":["bento__card","bento__card--article"]},"label":"Card: The Bento Grid: A Deep Dive"},{"id":"0dd51d","name":"image","parent":"e12041","children":[],"settings":{"image":{"id":6982,"filename":"695fac507a6273bd6d738572_CTA_Image_3.webp","size":"full","full":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2026\/03\/695fac507a6273bd6d738572_CTA_Image_3.webp","url":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2026\/03\/695fac507a6273bd6d738572_CTA_Image_3.webp"},"_cssGlobalClasses":["bento__card-img"]},"label":"Img: Black leather handbag minimali","themeStyles":[]},{"id":"a8c8ad","name":"text-basic","parent":"e12041","children":[],"settings":{"text":"02","tag":"span","_cssGlobalClasses":["bento__card-num"]},"label":"Number"},{"id":"0cb92b","name":"text-basic","parent":"e12041","children":[],"settings":{"text":"MOTION","tag":"span","_cssGlobalClasses":["bento__pill","bento__pill--tag"]},"label":"Tag"},{"id":"46d9b8","name":"block","parent":"e12041","children":["f56714","40c093"],"settings":{"_cssGlobalClasses":["kaawjy"]}},{"id":"f56714","name":"block","parent":"46d9b8","children":["a3218b","c17155","ba694b"],"settings":{"_cssGlobalClasses":["jskfqx"]}},{"id":"a3218b","name":"text-basic","parent":"f56714","children":[],"settings":{"text":"APR 8, 2026 \u2014 12 MIN","tag":"span","_cssGlobalClasses":["bento__card-meta"]},"label":"Meta"},{"id":"c17155","name":"heading","parent":"f56714","children":[],"settings":{"text":"The Bento Grid: A Deep Dive","tag":"h3","_cssGlobalClasses":["bento__card-title"],"_padding":{"left":"0","right":"0"}},"label":"Title"},{"id":"ba694b","name":"text-basic","parent":"f56714","children":[],"settings":{"text":"Apple made it famous. Now every portfolio uses it. Let us break down the CSS Grid magic behind bento layouts.","tag":"p","_cssGlobalClasses":["bento__card-excerpt"],"_padding":{"left":"0","right":"0"}},"label":"Excerpt"},{"id":"40c093","name":"button","parent":"46d9b8","children":[],"settings":{"text":"READ ARTICLE \u2192","link":{"type":"external","url":"#"},"_cssGlobalClasses":["bento__card-link"],"_cssTransition":"ease .2s","_typography:hover":{"color":{"hex":"#d9ff3f"}}},"label":"Read Link"},{"id":"2ce63d","name":"block","parent":"34d6d9","children":["150e90","9898bc","848483","60a676","7b2168"],"settings":{"_cssGlobalClasses":["bento__card","bento__card--stats"]},"label":"Card: Stats"},{"id":"150e90","name":"text-basic","parent":"2ce63d","children":[],"settings":{"text":"\/\/ STATS","tag":"span","_cssGlobalClasses":["bento__card-meta"]},"label":"Stats Label"},{"id":"9898bc","name":"block","parent":"2ce63d","children":["0de769","a1585d"],"settings":{"_cssGlobalClasses":["grbjdi"]}},{"id":"0de769","name":"heading","parent":"9898bc","children":[],"settings":{"text":"48","tag":"span","_cssGlobalClasses":["bento__stat-number"]},"label":"Stat 48"},{"id":"a1585d","name":"text-basic","parent":"9898bc","children":[],"settings":{"text":"Articles","tag":"span","_cssGlobalClasses":["bento__stat-label"]},"label":"Label Articles"},{"id":"848483","name":"block","parent":"2ce63d","children":["a5d387","58fe02"],"settings":{"_cssGlobalClasses":["grbjdi"]}},{"id":"a5d387","name":"heading","parent":"848483","children":[],"settings":{"text":"12K","tag":"span","_cssGlobalClasses":["bento__stat-number"]},"label":"Stat 48"},{"id":"58fe02","name":"text-basic","parent":"848483","children":[],"settings":{"text":"Monthly readers","tag":"span","_cssGlobalClasses":["bento__stat-label"]},"label":"Label Articles"},{"id":"60a676","name":"block","parent":"2ce63d","children":["0788ba","ed3589"],"settings":{"_cssGlobalClasses":["grbjdi"]}},{"id":"0788ba","name":"heading","parent":"60a676","children":[],"settings":{"text":"2.4K","tag":"span","_cssGlobalClasses":["bento__stat-number"]},"label":"Stat 48"},{"id":"ed3589","name":"text-basic","parent":"60a676","children":[],"settings":{"text":"Subscribers","tag":"span","_cssGlobalClasses":["bento__stat-label"]},"label":"Label Articles"},{"id":"7b2168","name":"block","parent":"2ce63d","children":["3da72d","ee8211"],"settings":{"_cssGlobalClasses":["grbjdi"]}},{"id":"3da72d","name":"heading","parent":"7b2168","children":[],"settings":{"text":"5Yr.","tag":"span","_cssGlobalClasses":["bento__stat-number"]},"label":"Stat 48"},{"id":"ee8211","name":"text-basic","parent":"7b2168","children":[],"settings":{"text":"Writing","tag":"span","_cssGlobalClasses":["bento__stat-label"]},"label":"Label Articles"},{"id":"e73dd5","name":"block","parent":"34d6d9","children":["e4870e","0e01c1","787d5f","992b2b"],"settings":{"_cssGlobalClasses":["bento__card","bento__card--article"]},"label":"Card: Dark Mode Beyond Color Inversi"},{"id":"e4870e","name":"image","parent":"e73dd5","children":[],"settings":{"image":{"id":6924,"filename":"697076e22c449fbf79933ece_project_main_image.webp","size":"large","full":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2026\/03\/697076e22c449fbf79933ece_project_main_image.webp","url":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2026\/03\/697076e22c449fbf79933ece_project_main_image-1024x614.webp"},"_cssGlobalClasses":["bento__card-img"]},"label":"Img: Man with bright smile portrait"},{"id":"0e01c1","name":"text-basic","parent":"e73dd5","children":[],"settings":{"text":"03","tag":"span","_cssGlobalClasses":["bento__card-num"]},"label":"Number"},{"id":"787d5f","name":"text-basic","parent":"e73dd5","children":[],"settings":{"text":"DESIGN","tag":"span","_cssGlobalClasses":["bento__pill","bento__pill--tag"]},"label":"Tag"},{"id":"992b2b","name":"block","parent":"e73dd5","children":["d760a4","d09588"],"settings":{"_cssGlobalClasses":["kaawjy"]}},{"id":"d760a4","name":"block","parent":"992b2b","children":["feaf0b","44fb95","8f6088"],"settings":{"_cssGlobalClasses":["jskfqx"]}},{"id":"feaf0b","name":"text-basic","parent":"d760a4","children":[],"settings":{"text":"MAR 30, 2026 \u2014 6 MIN","tag":"span","_cssGlobalClasses":["bento__card-meta"]},"label":"Meta"},{"id":"44fb95","name":"heading","parent":"d760a4","children":[],"settings":{"text":"Dark Mode Beyond Color Inversion","tag":"h3","_cssGlobalClasses":["bento__card-title"],"_padding":{"left":"0","right":"0"}},"label":"Title"},{"id":"8f6088","name":"text-basic","parent":"d760a4","children":[],"settings":{"text":"Dark mode is not just a CSS filter. Proper dark themes need adjusted contrast ratios, warm grays, and intentional shadows.","tag":"p","_cssGlobalClasses":["bento__card-excerpt"],"_padding":{"left":"0","right":"0"}},"label":"Excerpt"},{"id":"d09588","name":"button","parent":"992b2b","children":[],"settings":{"text":"READ ARTICLE \u2192","link":{"type":"external","url":"#"},"_cssGlobalClasses":["bento__card-link"],"_cssTransition":"ease .2s","_typography:hover":{"color":{"hex":"#d9ff3f"}}},"label":"Read Link"},{"id":"88dd6d","name":"block","parent":"34d6d9","children":["ebd6ac","ddd3ac","74fa9a","42f497"],"settings":{"_cssGlobalClasses":["bento__card","bento__card--article"]},"label":"Card: React Server Components in 202"},{"id":"ebd6ac","name":"image","parent":"88dd6d","children":[],"settings":{"_cssGlobalClasses":["bento__card-img"],"image":{"id":6981,"filename":"695fac5053634b2c8ecab542_CTA_Image_2.webp","size":"full","full":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2026\/03\/695fac5053634b2c8ecab542_CTA_Image_2.webp","url":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2026\/03\/695fac5053634b2c8ecab542_CTA_Image_2.webp"}},"label":"Img: Yellow geometric cube 3D abstr"},{"id":"ddd3ac","name":"text-basic","parent":"88dd6d","children":[],"settings":{"_cssGlobalClasses":["bento__card-num"],"text":"04","tag":"span"},"label":"Number"},{"id":"74fa9a","name":"text-basic","parent":"88dd6d","children":[],"settings":{"text":"REACT","tag":"span","_cssGlobalClasses":["bento__pill","bento__pill--tag"]},"label":"Tag"},{"id":"42f497","name":"block","parent":"88dd6d","children":["c7df50","919281"],"settings":{"_cssGlobalClasses":["kaawjy"]}},{"id":"c7df50","name":"block","parent":"42f497","children":["d46cc8","a0e3b3","8f1c4b"],"settings":{"_cssGlobalClasses":["jskfqx"]}},{"id":"d46cc8","name":"text-basic","parent":"c7df50","children":[],"settings":{"text":"MAR 22, 2026 \u2014 15 MIN","tag":"span","_cssGlobalClasses":["bento__card-meta"]},"label":"Meta"},{"id":"a0e3b3","name":"heading","parent":"c7df50","children":[],"settings":{"text":"React Server Components in 2026","tag":"h3","_cssGlobalClasses":["bento__card-title"],"_padding":{"left":"0","right":"0"}},"label":"Title"},{"id":"8f1c4b","name":"text-basic","parent":"c7df50","children":[],"settings":{"text":"RSCs changed how we think about rendering. Here is what I learned after shipping three production apps.","tag":"p","_cssGlobalClasses":["bento__card-excerpt"],"_padding":{"left":"0","right":"0"}},"label":"Excerpt"},{"id":"919281","name":"button","parent":"42f497","children":[],"settings":{"text":"READ ARTICLE \u2192","link":{"type":"external","url":"#"},"_cssGlobalClasses":["bento__card-link"],"_cssTransition":"ease .2s","_typography:hover":{"color":{"hex":"#d9ff3f"}}},"label":"Read Link"},{"id":"fa1df8","name":"block","parent":"34d6d9","children":["53a7f4","c036d3","f20e22","0a6079"],"settings":{"_cssGlobalClasses":["bento__card","bento__card--article"]},"label":"Card: Typography That Actually Speak"},{"id":"53a7f4","name":"image","parent":"fa1df8","children":[],"settings":{"image":{"id":6952,"filename":"6961ef9473c926d983625c48_fad2410f1ac383a85571b5f35d6528d6_Award_Image_2.webp","size":"large","full":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2026\/03\/6961ef9473c926d983625c48_fad2410f1ac383a85571b5f35d6528d6_Award_Image_2.webp","url":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2026\/03\/6961ef9473c926d983625c48_fad2410f1ac383a85571b5f35d6528d6_Award_Image_2-1024x501.webp"},"_cssGlobalClasses":["bento__card-img"]},"label":"Img: Woman with backpack jumping jo"},{"id":"c036d3","name":"text-basic","parent":"fa1df8","children":[],"settings":{"text":"05","tag":"span","_cssGlobalClasses":["bento__card-num"]},"label":"Number"},{"id":"f20e22","name":"text-basic","parent":"fa1df8","children":[],"settings":{"text":"TYPE","tag":"span","_cssGlobalClasses":["bento__pill","bento__pill--tag"]},"label":"Tag"},{"id":"0a6079","name":"block","parent":"fa1df8","children":["62a72f","b8c6a2"],"settings":{"_cssGlobalClasses":["kaawjy"]}},{"id":"62a72f","name":"block","parent":"0a6079","children":["c2bbc4","fb9852","707a10"],"settings":{"_cssGlobalClasses":["jskfqx"]}},{"id":"c2bbc4","name":"text-basic","parent":"62a72f","children":[],"settings":{"text":"MAR 15, 2026 \u2014 7 MIN","tag":"span","_cssGlobalClasses":["bento__card-meta"]},"label":"Meta"},{"id":"fb9852","name":"heading","parent":"62a72f","children":[],"settings":{"text":"Typography That Actually Speaks","tag":"h3","_cssGlobalClasses":["bento__card-title"],"_padding":{"left":"0","right":"0"}},"label":"Title"},{"id":"707a10","name":"text-basic","parent":"62a72f","children":[],"settings":{"text":"Inter is safe. But safe is boring. A guide to pairing typefaces that give your site personality without sacrificing readability.","tag":"p","_cssGlobalClasses":["bento__card-excerpt"],"_padding":{"left":"0","right":"0"}},"label":"Excerpt"},{"id":"b8c6a2","name":"button","parent":"0a6079","children":[],"settings":{"text":"READ ARTICLE \u2192","link":{"type":"external","url":"#"},"_cssGlobalClasses":["bento__card-link"],"_cssTransition":"ease .2s","_typography:hover":{"color":{"hex":"#d9ff3f"}}},"label":"Read Link"},{"id":"5cdec2","name":"block","parent":"34d6d9","children":["8e374a","7744fb","4277e2","569556"],"settings":{"_cssGlobalClasses":["bento__card","bento__card--article"]},"label":"Card: When Speed Becomes the Feature"},{"id":"8e374a","name":"image","parent":"5cdec2","children":[],"settings":{"image":{"id":6915,"filename":"696a5ff09b173f1e644b8074_444711bd9af2b787d3f305f2e0e85b8c_Personal-Portrait.webp","size":"full","full":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2026\/03\/696a5ff09b173f1e644b8074_444711bd9af2b787d3f305f2e0e85b8c_Personal-Portrait.webp","url":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2026\/03\/696a5ff09b173f1e644b8074_444711bd9af2b787d3f305f2e0e85b8c_Personal-Portrait.webp"},"_cssGlobalClasses":["bento__card-img"]},"label":"Img: Woman with colorful glasses fa"},{"id":"7744fb","name":"text-basic","parent":"5cdec2","children":[],"settings":{"text":"06","tag":"span","_cssGlobalClasses":["bento__card-num"]},"label":"Number"},{"id":"4277e2","name":"text-basic","parent":"5cdec2","children":[],"settings":{"text":"PERF","tag":"span","_cssGlobalClasses":["bento__pill","bento__pill--tag"]},"label":"Tag"},{"id":"569556","name":"block","parent":"5cdec2","children":["60532d","abeba5"],"settings":{"_cssGlobalClasses":["kaawjy"]}},{"id":"60532d","name":"block","parent":"569556","children":["7f1b8c","e2c2d5","f3621d"],"settings":{"_cssGlobalClasses":["jskfqx"]}},{"id":"7f1b8c","name":"text-basic","parent":"60532d","children":[],"settings":{"text":"MAR 8, 2026 \u2014 10 MIN","tag":"span","_cssGlobalClasses":["bento__card-meta"]},"label":"Meta"},{"id":"e2c2d5","name":"heading","parent":"60532d","children":[],"settings":{"text":"When Speed Becomes the Feature","tag":"h3","_cssGlobalClasses":["bento__card-title"],"_padding":{"left":"0","right":"0"}},"label":"Title"},{"id":"f3621d","name":"text-basic","parent":"60532d","children":[],"settings":{"text":"Your site loads in 1.2 seconds? Mine loads in 0.4. Here is every trick I used to get there and which ones actually matter.","tag":"p","_cssGlobalClasses":["bento__card-excerpt"],"_padding":{"left":"0","right":"0"}},"label":"Excerpt"},{"id":"abeba5","name":"button","parent":"569556","children":[],"settings":{"text":"READ ARTICLE \u2192","link":{"type":"external","url":"#"},"_cssGlobalClasses":["bento__card-link"],"_cssTransition":"ease .2s","_typography:hover":{"color":{"hex":"#d9ff3f"}}},"label":"Read Link"}],"templateType":"section","global_classes":[{"id":"bento__section","name":"bento__section","settings":{"_background":{"color":{"hex":"#05070a"}},"_padding":{"top":"120","bottom":"120","left":"20","right":"20"},"_padding:mobile_landscape":{"top":"60","bottom":"60"},"_cssCustom":".bento__section.brxe-section{\n overflow: hidden;\n}"}},{"id":"bento__inner","name":"bento__inner","settings":{"_widthMax":"1300","_width":"100%"}},{"id":"bento__pill","name":"bento__pill","settings":{"_display":"inline-block","_padding":{"top":"6","bottom":"6","left":"12","right":"12"},"_border":{"radius":{"top":"999","right":"999","bottom":"999","left":"999"},"width":{"top":"1","right":"1","bottom":"1","left":"1"},"style":"solid","color":{"raw":"#ffffff"}},"_typography":{"font-size":"12","color":{"raw":"#ffffff"}}}},{"id":"bento__stat-number","name":"bento__stat-number","settings":{"_typography":{"font-size":"64","font-weight":"800","color":{"hex":"#d9ff3f"},"line-height":"1.0"},"_typography:tablet_portrait":{"font-size":"52"},"_typography:mobile_landscape":{"font-size":"36"}}},{"id":"bento__stat-label","name":"bento__stat-label","settings":{"_typography":{"font-size":"12","color":{"hex":"#9ca3af"}}}},{"id":"bento__grid-main","name":"bento__grid-main","settings":{"_display":"grid","_gridTemplateColumns":"repeat(3, 1fr)","_gridGap":"16","_gridTemplateColumns:tablet_portrait":"repeat(2, 1fr)","_gridTemplateColumns:mobile_portrait":"repeat(1, 1fr)"},"_exists":false},{"id":"bento__card","name":"bento__card","settings":{"_background":{"color":{"hex":"#0b0f14"}},"_border":{"radius":{"top":"16","right":"16","bottom":"16","left":"16"},"width":{"top":"1","right":"1","bottom":"1","left":"1"},"style":"solid","color":{"hex":"#1f2933"}},"_padding":{"top":"0","bottom":"0","left":"0","right":"0"},"_display:mobile_landscape":"flex","_direction:mobile_landscape":"row","_height:mobile_landscape":"max-content"},"_exists":false,"modified":1776951190,"user_id":1},{"id":"bento__card--article","name":"bento__card--article","settings":{"_position":"relative"},"_exists":false},{"id":"bento__card--span2","name":"bento__card--span2","settings":[],"_exists":false},{"id":"bento__card-img","name":"bento__card-img","settings":{"_width":"100%","_border":{"radius":{"top":"12","right":"12","bottom":"12","left":"12"}}},"_exists":false},{"id":"bento__card-num","name":"bento__card-num","settings":{"_position":"absolute","_typography":{"font-size":"80","font-weight":"800","color":{"hex":"rgba(255,255,255,0.06)"},"line-height":"1"},"_cssCustom":".bento__card-num { top: 12px; right: 20px; pointer-events: none; }"},"_exists":false},{"id":"bento__pill--tag","name":"bento__pill--tag","settings":{"_position":"absolute","_cssCustom":".bento__pill--tag { top: 16px; left: 16px; z-index: 5; color: #d9ff3f; border-color: rgba(217,255,63,0.3); background: rgba(217,255,63,0.08);}"},"_exists":false},{"id":"bento__card-meta","name":"bento__card-meta","settings":{"_typography":{"font-size":"11","color":{"hex":"#6b7280"},"letter-spacing":"0.04em"},"_padding":{"left":"0","top":"0","right":"0"}},"_exists":false},{"id":"bento__card-title","name":"bento__card-title","settings":{"_typography":{"font-size":"18","font-weight":"600","color":{"hex":"#ffffff"}},"_padding":{"left":"0","right":"0"}},"_exists":false},{"id":"bento__card-excerpt","name":"bento__card-excerpt","settings":{"_typography":{"font-size":"13","color":{"hex":"#9ca3af"},"line-height":"1.6"},"_cssCustom":".bento__card-excerpt { display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; }"},"_exists":false},{"id":"bento__card-link","name":"bento__card-link","settings":{"_background":{"color":{"hex":"transparent"}},"_typography":{"font-size":"12","font-weight":"600","color":{"hex":"#9ca3af"},"letter-spacing":"0.06em"},"_padding":{"top":"0","bottom":"0","left":"0","right":"0"},"_border":{"width":{"top":"0","right":"0","bottom":"0","left":"0"}},"_cssTransition":"ease .2s","_typography:hover":{"color":{"hex":"#d9ff3f"}},"_alignSelf":"flex-start"},"_exists":false},{"id":"bento__card--profile","name":"bento__card--profile","settings":{"_padding":{"top":"24","bottom":"24","left":"24","right":"24"},"_rowGap":"12","_cssCustom":".bento__card--profile { justify-content: space-between; }","_direction:mobile_landscape":"column","_justifyContent:mobile_landscape":"flex-start"},"_exists":false,"modified":1776951190,"user_id":1},{"id":"bento__profile-avatar","name":"bento__profile-avatar","settings":{"_width":"52","_height":"52","_objectFit":"cover","_border":{"radius":{"top":"999","right":"999","bottom":"999","left":"999"}},"_flexShrink":"0"},"_exists":false},{"id":"bento__profile-name","name":"bento__profile-name","settings":{"_typography":{"font-size":"18","font-weight":"700","color":{"hex":"#ffffff"}}},"_exists":false},{"id":"bento__status-pill","name":"bento__status-pill","settings":{"_typography":{"font-size":"12","color":{"hex":"#4ade80"}},"_background":{"color":{"hex":"rgba(74,222,128,0.08)"}},"_border":{"radius":{"top":"999","right":"999","bottom":"999","left":"999"},"width":{"top":"1","right":"1","bottom":"1","left":"1"},"style":"solid","color":{"hex":"rgba(74,222,128,0.2)"}},"_padding":{"top":"4","bottom":"4","left":"10","right":"10"},"_display":"inline-block"},"_exists":false},{"id":"bento__social-btn","name":"bento__social-btn","settings":{"_background":{"color":{"hex":"rgba(255,255,255,0.06)"}},"_border":{"radius":{"top":"8","right":"8","bottom":"8","left":"8"},"width":{"top":"1","right":"1","bottom":"1","left":"1"},"style":"solid","color":{"hex":"#2a2f36"}},"_typography":{"font-size":"12","font-weight":"600","color":{"hex":"#9ca3af"},"letter-spacing":"0.04em"},"_padding":{"top":"6","bottom":"6","left":"12","right":"12"},"_cssTransition":"ease .2s","_background:hover":{"color":{"hex":"#d9ff3f"}},"_typography:hover":{"color":{"hex":"#05070a"}}},"_exists":false},{"id":"bento__card--nl","name":"bento__card--nl","settings":{"_padding":{"top":"28","bottom":"28","left":"28","right":"28"},"_rowGap":"16","_justifyContent":"space-between","_direction:mobile_landscape":"column","_justifyContent:mobile_landscape":"flex-start"},"_exists":false,"modified":1776951190,"user_id":1},{"id":"bento__nl-icon","name":"bento__nl-icon","settings":{"_width":"36","_height":"36","_background":{"color":{"hex":"#d9ff3f"}},"_border":{"radius":{"top":"10","right":"10","bottom":"10","left":"10"}},"_display":"flex","_alignItems":"center","_justifyContent":"center","_typography":{"font-size":"16","color":{"hex":"#05070a"}},"_flexShrink":"0"},"_exists":false},{"id":"bento__nl-form","name":"bento__nl-form","settings":{"_cssCustom":".bento__nl-form .brxe-form { display:flex; flex-direction:row; gap:0; }.bento__nl-form input[type=email] { flex:1; padding:10px 14px; background:rgba(255,255,255,0.06); border:1px solid #2a2f36; border-right:none; border-radius:8px 0 0 8px; color:#fff; font-size:13px; outline:none; transition:border-color ease .2s;}.bento__nl-form input::placeholder { color:rgba(255,255,255,0.3); }.bento__nl-form input:focus { border-color:rgba(217,255,63,0.5); }.bento__nl-form button[type=submit] { padding:10px 18px; background:#d9ff3f; color:#05070a; font-size:13px; font-weight:700; border:none; border-radius:0 8px 8px 0; cursor:pointer; transition:background ease .2s; white-space:nowrap;}.bento__nl-form button[type=submit]:hover { background:#c5f135; }","submitButtonWidth":"20","fieldMargin":{"bottom":"0"},"fieldPadding":{"bottom":"0","top":"0"},"submitButtonTypography":{"line-height":"1.6"}},"_exists":false,"modified":1776951190,"user_id":1},{"id":"bento__card--stats","name":"bento__card--stats","settings":{"_padding":{"top":"28","bottom":"28","left":"28","right":"28"},"_direction:mobile_portrait":"column","_display":"flex","_rowGap":"40"},"_exists":false,"modified":1776951190,"user_id":1},{"id":"kaawjy","name":"bento__card--inner-block","settings":{"_padding":{"top":"20","bottom":"20","right":"20","left":"20"},"_justifyContent":"space-between","_rowGap":"20","_height":"100%","_justifyContent:mobile_landscape":"flex-start"}},{"id":"jskfqx","name":"bento__card--inner","settings":{"_columnGap":"10","_rowGap":"5"}},{"id":"xwroce","name":"bento__grid-one--container","settings":{"_display":"grid","_gridTemplateColumns":"minmax(0, 1fr) minmax(0, 1fr)","_cssCustom":"\/** VISUAL GRID BUILDER - START **\/\n\n\/** zlyaoc - 3 **\/\n.bento__grid-one--container :nth-child(3) {\n grid-column: 2 \/ 3;\n grid-row: 2 \/ 3;\n}\n\/** gxsjzp - 1 **\/\n.bento__grid-one--container :nth-child(1) {\n grid-column: 1 \/ 2;\n grid-row: 1 \/ 3;\n}\n\n\/** VISUAL GRID BUILDER - END **\/","_gridGap":"16","_gridTemplateRows:mobile_landscape":"minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr)","_gridTemplateColumns:mobile_landscape":"minmax(0, 1fr)","_cssCustom:mobile_landscape":"\/** VISUAL GRID BUILDER - START **\/\n\n\/** grzwgz - 2 **\/\n.bento__grid-one--container :nth-child(2) {\n grid-column: 1 \/ 2;\n grid-row: 2 \/ 3;\n}\n\n\/** gxsjzp - 1 **\/\n.bento__grid-one--container :nth-child(1) {\n grid-column: 1 \/ 2;\n grid-row: 1 \/ 2;\n}\n\/** zlyaoc - 3 **\/\n.bento__grid-one--container :nth-child(3) {\n grid-column: 1 \/ 2;\n grid-row: 3 \/ 4;\n}\n\n\/** VISUAL GRID BUILDER - END **\/","_margin":{"left":"0","right":"0"},"_width":"100%","_display:mobile_landscape":"flex"},"modified":1776951190,"user_id":1},{"id":"wrredp","name":"bento__grid-container","settings":{"_columnGap":"16","_rowGap":"16"}},{"id":"jfuulu","name":"bento__card--profile-social","settings":{"_direction":"row","_justifyContent":"space-between","_padding":{"top":"20","bottom":"5"},"_border":{"width":{"top":"1"},"style":"solid","color":{"raw":"#1f2933"}}},"modified":1776951190,"user_id":1},{"id":"vmuvij","name":"bento__card--profile-social-inner","settings":{"_alignItems":"flex-end","_direction":"row","_justifyContent":"flex-end","_width":"max-content","_columnGap":"16"},"modified":1776951190,"user_id":1},{"id":"grbjdi","name":"bento__card--stats--inner-block","settings":{"_direction":"row","_alignItems":"flex-end","_rowGap":"20","_columnGap":"20"}}]}
Similar components


Shahid Hussain
Content Section with Cards
Content section with cards which display the list of your cards

Shahid Hussain
Grid with Image and Content Section
This is the grid component as grid that works as content and image block. please change the images with your own paths.


Julian Galluzzo
InvestKit News Section
Show off what's happening in your company with this bento-grid style news or features section!