{"id":1441748,"date":"2026-09-29T11:59:05","date_gmt":"2026-09-29T11:59:05","guid":{"rendered":"https:\/\/wordpress.org\/patterns\/?post_type=wporg-pattern&#038;p=1441748"},"modified":"2026-09-29T11:59:05","modified_gmt":"2026-09-29T11:59:05","slug":"bento-style-feature-showcase-with-colored-cards","status":"publish","type":"wporg-pattern","link":"https:\/\/wordpress.org\/patterns\/pattern\/bento-style-feature-showcase-with-colored-cards\/","title":{"rendered":"Bento Style Feature Showcase with Colored Cards"},"content":{"rendered":"\n<div class=\"wp-block-group alignwide is-layout-constrained wp-container-core-group-is-layout-5c52abf1 wp-block-group-is-layout-constrained\" style=\"padding-top:64px;padding-bottom:64px\">\n<h2 class=\"wp-block-heading\">Everything you need, nothing you don&#8217;t<\/h2>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-755dc1a5 wp-block-columns-is-layout-flex\" style=\"margin-top:32px\">\n<div class=\"wp-block-column has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"border-radius:12px;background-color:#f0f4ff;padding-top:36px;padding-right:32px;padding-bottom:36px;padding-left:32px;flex-basis:60%\">\n<h3 class=\"wp-block-heading\">Real-time collaboration<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">See changes from your team as they happen, with no refresh and no merge conflicts to untangle later.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column has-white-color has-text-color has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"border-radius:12px;background-color:#1e1e1e;padding-top:36px;padding-right:32px;padding-bottom:36px;padding-left:32px;flex-basis:40%\">\n<h3 class=\"wp-block-heading has-white-color has-text-color\">Built-in analytics<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Track what matters without wiring up a separate dashboard tool.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-c19f41ab wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"border-radius:12px;background-color:#fff4e8;padding-top:36px;padding-right:32px;padding-bottom:36px;padding-left:32px\">\n<h3 class=\"wp-block-heading\">One-click deploys<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Ship straight from your workspace, no separate CI setup needed.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"border-radius:12px;background-color:#e8fff2;padding-top:36px;padding-right:32px;padding-bottom:36px;padding-left:32px\">\n<h3 class=\"wp-block-heading\">Granular permissions<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Control exactly who can view, edit, or publish, down to the individual file.<\/p>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":23277171,"parent":0,"template":"","meta":{"wpop_keywords":"bento, features, grid, cards, showcase","wpop_description":"An asymmetric, bento-box style grid of four colored feature cards of varying sizes \u2014 a modern alternative to a plain three-column feature list. No images needed.","wpop_viewport_width":1200,"wpop_block_types":[],"wpop_locale":"en_US","wpop_wp_version":"","wpop_contains_block_types":"core\/column,core\/columns,core\/group,core\/heading,core\/paragraph","footnotes":""},"pattern-categories":[3],"pattern-keywords":[],"wporg-pattern-flag-reason":[],"class_list":["post-1441748","wporg-pattern","type-wporg-pattern","status-publish","hentry","wporg-pattern-category-columns"],"category_slugs":["columns"],"keyword_slugs":[],"pattern_content":"<!-- wp:group {\"align\":\"wide\",\"style\":{\"spacing\":{\"padding\":{\"top\":\"64px\",\"bottom\":\"64px\"},\"blockGap\":\"20px\"}},\"layout\":{\"type\":\"constrained\"}} -->\n<div class=\"wp-block-group alignwide\" style=\"padding-top:64px;padding-bottom:64px\"><!-- wp:heading -->\n<h2 class=\"wp-block-heading\">Everything you need, nothing you don't<\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:columns {\"style\":{\"spacing\":{\"margin\":{\"top\":\"32px\"},\"blockGap\":{\"left\":\"20px\"}}}} -->\n<div class=\"wp-block-columns\" style=\"margin-top:32px\"><!-- wp:column {\"width\":\"60%\",\"style\":{\"color\":{\"background\":\"#f0f4ff\"},\"spacing\":{\"padding\":{\"top\":\"36px\",\"bottom\":\"36px\",\"left\":\"32px\",\"right\":\"32px\"}},\"border\":{\"radius\":\"12px\"}}} -->\n<div class=\"wp-block-column has-background\" style=\"border-radius:12px;background-color:#f0f4ff;padding-top:36px;padding-right:32px;padding-bottom:36px;padding-left:32px;flex-basis:60%\"><!-- wp:heading {\"level\":3} -->\n<h3 class=\"wp-block-heading\">Real-time collaboration<\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>See changes from your team as they happen, with no refresh and no merge conflicts to untangle later.<\/p>\n<!-- \/wp:paragraph --><\/div>\n<!-- \/wp:column -->\n\n<!-- wp:column {\"width\":\"40%\",\"style\":{\"color\":{\"background\":\"#1e1e1e\"},\"spacing\":{\"padding\":{\"top\":\"36px\",\"bottom\":\"36px\",\"left\":\"32px\",\"right\":\"32px\"}},\"border\":{\"radius\":\"12px\"}},\"textColor\":\"white\"} -->\n<div class=\"wp-block-column has-white-color has-text-color has-background\" style=\"border-radius:12px;background-color:#1e1e1e;padding-top:36px;padding-right:32px;padding-bottom:36px;padding-left:32px;flex-basis:40%\"><!-- wp:heading {\"level\":3,\"className\":\"has-white-color has-text-color\"} -->\n<h3 class=\"wp-block-heading has-white-color has-text-color\">Built-in analytics<\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Track what matters without wiring up a separate dashboard tool.<\/p>\n<!-- \/wp:paragraph --><\/div>\n<!-- \/wp:column --><\/div>\n<!-- \/wp:columns -->\n\n<!-- wp:columns {\"style\":{\"spacing\":{\"blockGap\":{\"left\":\"20px\"}}}} -->\n<div class=\"wp-block-columns\"><!-- wp:column {\"style\":{\"color\":{\"background\":\"#fff4e8\"},\"spacing\":{\"padding\":{\"top\":\"36px\",\"bottom\":\"36px\",\"left\":\"32px\",\"right\":\"32px\"}},\"border\":{\"radius\":\"12px\"}}} -->\n<div class=\"wp-block-column has-background\" style=\"border-radius:12px;background-color:#fff4e8;padding-top:36px;padding-right:32px;padding-bottom:36px;padding-left:32px\"><!-- wp:heading {\"level\":3} -->\n<h3 class=\"wp-block-heading\">One-click deploys<\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Ship straight from your workspace, no separate CI setup needed.<\/p>\n<!-- \/wp:paragraph --><\/div>\n<!-- \/wp:column -->\n\n<!-- wp:column {\"style\":{\"color\":{\"background\":\"#e8fff2\"},\"spacing\":{\"padding\":{\"top\":\"36px\",\"bottom\":\"36px\",\"left\":\"32px\",\"right\":\"32px\"}},\"border\":{\"radius\":\"12px\"}}} -->\n<div class=\"wp-block-column has-background\" style=\"border-radius:12px;background-color:#e8fff2;padding-top:36px;padding-right:32px;padding-bottom:36px;padding-left:32px\"><!-- wp:heading {\"level\":3} -->\n<h3 class=\"wp-block-heading\">Granular permissions<\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Control exactly who can view, edit, or publish, down to the individual file.<\/p>\n<!-- \/wp:paragraph --><\/div>\n<!-- \/wp:column --><\/div>\n<!-- \/wp:columns --><\/div>\n<!-- \/wp:group -->","favorite_count":2,"author_meta":{"name":"Parth Jogi","url":"https:\/\/wordpress.org\/patterns\/author\/parthjoginyusoft","avatar":"https:\/\/secure.gravatar.com\/avatar\/54822fc2d099aacf177fb0f42cbc37b6c04a0308f09a19bd62b9eab6fbe3b2e4?s=64&d=mm&r=g"},"unlisted_reason":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/wporg-pattern\/1441748","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/wporg-pattern"}],"about":[{"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/types\/wporg-pattern"}],"version-history":[{"count":1,"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/wporg-pattern\/1441748\/revisions"}],"predecessor-version":[{"id":1441755,"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/wporg-pattern\/1441748\/revisions\/1441755"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wporg\/v1\/users\/parthjoginyusoft"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/media?parent=1441748"}],"wp:term":[{"taxonomy":"wporg-pattern-category","embeddable":true,"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/pattern-categories?post=1441748"},{"taxonomy":"wporg-pattern-keyword","embeddable":true,"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/pattern-keywords?post=1441748"},{"taxonomy":"wporg-pattern-flag-reason","embeddable":true,"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/wporg-pattern-flag-reason?post=1441748"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}