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

{"id":189,"name":"hero-section","title":"Hero Section","date":"2025-04-14 07:53:35","date_formatted":"April 14, 2025","author":{"name":"admin","avatar":"https:\/\/secure.gravatar.com\/avatar\/729ae85bf62b9917e93538db2f2688ca?s=60&d=mm&r=g","url":"http:\/\/board.local"},"permalink":"https:\/\/board.local\/template\/hero-section\/","thumbnail":null,"bundles":[],"tags":[],"type":"section","content":[{"id":"3a6af2","name":"section","parent":0,"children":["73a7ea"],"settings":{"_cssGlobalClasses":["ergbtp"],"_padding:mobile_portrait":{"left":"0","right":"0"}},"label":"Content Section"},{"id":"73a7ea","name":"container","parent":"3a6af2","children":["bd870e","890619"],"settings":{"_cssGlobalClasses":["oookpc"],"_padding:mobile_portrait":{"left":"3rem","right":"3rem","top":"3rem"}}},{"id":"bd870e","name":"block","parent":"73a7ea","children":["8ddd7b","83d7a3","kepchl"],"settings":{"_cssGlobalClasses":["wcigeu"]},"label":"Content"},{"id":"8ddd7b","name":"heading","parent":"bd870e","children":[],"settings":{"text":"What I do for my customers","tag":"h1","_cssGlobalClasses":["xtfraf"]},"label":"Heading"},{"id":"83d7a3","name":"text-basic","parent":"bd870e","children":[],"settings":{"text":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec feugiat fringilla lorem sed bibendum.","tag":"p","_cssGlobalClasses":["ohburj"]},"label":"Text-basic"},{"id":"890619","name":"block","parent":"73a7ea","children":["220a8f","c63dda","82f577"],"settings":{"_cssGlobalClasses":["lfjpby"],"tag":"ul"},"label":"List Grid"},{"id":"220a8f","name":"block","parent":"890619","children":["aee72a","b407ac","98e4aa"],"settings":{"tag":"li","_cssGlobalClasses":["qdzcfz"]},"label":"Card"},{"id":"aee72a","name":"heading","parent":"220a8f","children":[],"settings":{"text":"UI\/UX Design","_cssGlobalClasses":["lb4w0j"]},"label":"Heading"},{"id":"b407ac","name":"icon","parent":"220a8f","children":[],"settings":{"icon":{"library":"svg","svg":{"id":215,"filename":"ux-design-icon.svg","url":"https:\/\/board.local\/wp-content\/uploads\/2025\/04\/ux-design-icon.svg"}},"_cssGlobalClasses":["55dqs9"]},"label":"Icon","themeStyles":[]},{"id":"98e4aa","name":"text-basic","parent":"220a8f","children":[],"settings":{"text":"Websites, application or other design related tasks. I love tackling digital problems.\n\n","tag":"p","_cssGlobalClasses":["9dsnvk"]},"label":"Text"},{"id":"c63dda","name":"block","parent":"890619","children":["339ffd","4eeff5","78beda"],"settings":{"tag":"li","_cssGlobalClasses":["qdzcfz"]},"label":"Card"},{"id":"339ffd","name":"heading","parent":"c63dda","children":[],"settings":{"text":"Motion Graphics","_cssGlobalClasses":["lb4w0j"]},"label":"Heading"},{"id":"4eeff5","name":"icon","parent":"c63dda","children":[],"settings":{"icon":{"library":"svg","svg":{"id":216,"filename":"motion-graphics-icon.svg","url":"https:\/\/board.local\/wp-content\/uploads\/2025\/04\/motion-graphics-icon.svg"}},"_cssGlobalClasses":["55dqs9"]},"label":"Icon","themeStyles":[]},{"id":"78beda","name":"text-basic","parent":"c63dda","children":[],"settings":{"text":"Every interaction you apply to your brand makes you stronger and more priority.\n\n","tag":"p","_cssGlobalClasses":["9dsnvk"]},"label":"Text"},{"id":"82f577","name":"block","parent":"890619","children":["906b0e","b38c45","7f3d4d"],"settings":{"tag":"li","_cssGlobalClasses":["qdzcfz"]},"label":"Card"},{"id":"906b0e","name":"heading","parent":"82f577","children":[],"settings":{"text":"Branding","_cssGlobalClasses":["lb4w0j"]},"label":"Heading"},{"id":"b38c45","name":"icon","parent":"82f577","children":[],"settings":{"icon":{"library":"svg","svg":{"id":217,"filename":"branding-icon.svg","url":"https:\/\/board.local\/wp-content\/uploads\/2025\/04\/branding-icon.svg"}},"_cssGlobalClasses":["55dqs9"]},"label":"Icon","themeStyles":[]},{"id":"7f3d4d","name":"text-basic","parent":"82f577","children":[],"settings":{"text":"Positioning the brand first. I create visual identity across platforms.\n\n","tag":"p","_cssGlobalClasses":["9dsnvk"]},"label":"Text"},{"id":"kepchl","name":"button","parent":"bd870e","children":[],"settings":{"text":"connect with me","style":"primary","_cssGlobalClasses":["uvkehi"],"link":{"type":"external","url":"#"}}}],"templateType":"section","global_classes":[{"id":"ergbtp","name":"content-box","settings":{"_overflow":"hidden","_background:tablet_portrait":{"color":{"raw":"var(--neutral-ultra-light)"}}},"_exists":false},{"id":"oookpc","name":"content-box__container","settings":{"_display":"grid","_gridTemplateColumns:tablet_portrait":"var(--grid-1)","_gridGap:tablet_portrait":"var(--grid-gap)","_background":{"color":{"raw":"#f0fefa"}},"_height":"45rem","_alignContentGrid":"center","_alignItemsGrid":"stretch","_gridTemplateColumns":"repeat(12, 1fr);","_height:tablet_portrait":"100%","_padding":{"left":"5rem","right":"5rem","top":"5rem","bottom":"5rem"}},"_exists":false},{"id":"wcigeu","name":"content-box__content","settings":{"_gridItemColumnSpan":"1 \/ 9","_gridItemRowSpan":"1","_padding":{"bottom":"6rem","right":"calc(10rem * 3)","top":"6rem"},"_position":"relative","_justifyContent":"center","_gridItemColumnSpan:tablet_portrait":"1","_gridItemRowSpan:tablet_portrait":"1","_padding:tablet_portrait":{"right":"unset","top":"0"},"_padding:mobile_portrait":{"top":"0"},"_padding:mobile_landscape":{"top":"0"},"_rowGap":"3rem"},"_exists":false,"modified":1744617510,"user_id":1},{"id":"xtfraf","name":"content-box__heading","settings":{"_typography":{"font-weight":"600","letter-spacing":"-.025em"}},"_exists":false},{"id":"ohburj","name":"content-box__text","settings":[],"_exists":false},{"id":"lfjpby","name":"content-box-grid-ul","settings":{"_gridItemRowSpan":"1","_gridItemColumnSpan":"6 \/ -1","_display":"grid","_gridTemplateRows":"repeat(4, 1fr);","_gridGap":"3rem","_position":"relative","_gridItemColumnSpan:tablet_portrait":"1","_gridItemRowSpan:tablet_portrait":"unset","_gridTemplateColumns:mobile_landscape":"var(--grid-1)","_gridTemplateRows:mobile_landscape":"unset","_gridTemplateColumns":"repeat(2, 1fr);","_cssCustom":".content-box-grid-ul{\nlist-style: none;\npadding-left: 0;\nlist-style-type: none;\nmargin-left: 0em;\nmargin-right: 0;\n}"},"_exists":false,"modified":1744627295,"user_id":1},{"id":"qdzcfz","name":"content-box-card","settings":{"_padding":{"top":"3rem","right":"2rem","bottom":"3rem","left":"2rem"},"_rowGap":"calc(3rem \/ 2)","_cssCustom":"@media (min-width:767px) {\n\n.content-box-card:nth-child(1) {\n\t grid-row: 2 \/ 4;\n}\n\n.content-box-card:nth-child(2), .content-box-card:nth-child(3) {\n\tgrid-column: 2 \/ 3;\n grid-row: span 2;\n}\n \n}\n\n.content-box-card{\n box-shadow:24px 24px 40px -12px rgba(28, 44, 64, .08);\n}","_background":{"color":{"raw":"#fff"}}},"modified":1729870684,"user_id":7,"_exists":false},{"id":"lb4w0j","name":"content-box-card__heading","settings":{"_typography":{"font-weight":"600"}},"_exists":false},{"id":"55dqs9","name":"content-box-card__icon","settings":{"_order":"-1"},"_exists":false},{"id":"9dsnvk","name":"content-box-card__text","settings":[],"_exists":false},{"id":"uvkehi","name":"content-box__button","settings":{"_padding":{"top":"1.3rem","bottom":"1.3rem","right":"2rem","left":"2rem"},"_typography":{"color":{"hex":"#ffffff"},"font-size":"1.5rem","text-transform":"uppercase","font-weight":"600"},"_background":{"color":{"hex":"#5e3bee"}},"_border":{"radius":{"top":"50","right":"50","bottom":"50","left":"50"}}},"modified":1744629077,"user_id":1}]}
Similar components


Akshay Joshi
Metric Kit – Case Study Section
Case study showcase with customizable cards and call to action


Akshay Joshi
Metric Kit Three-Column Layout
Three-column layout with customizable icons and call to action