{"id":388171,"date":"2023-07-27T09:30:38","date_gmt":"2023-07-27T09:30:38","guid":{"rendered":"https:\/\/wordpress.org\/patterns\/pattern\/content-with-image-on-the-left-side-en_au\/"},"modified":"2026-04-19T21:35:12","modified_gmt":"2026-04-19T21:35:12","slug":"content-with-image-on-the-left-side-en_au","status":"publish","type":"wporg-pattern","link":"https:\/\/wordpress.org\/patterns\/pattern\/content-with-image-on-the-left-side-en_au\/","title":{"rendered":"Content with image on the left side"},"content":{"rendered":"\n<div class=\"wp-block-media-text is-stacked-on-mobile is-image-fill has-black-background-color has-background\" style=\"grid-template-columns:35% auto\"><figure class=\"wp-block-media-text__media\" style=\"background-image:url(https:\/\/images.rawpixel.com\/image_1300\/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvbHIvcGQzNi0yLWtzYy0wN3BwMTQ1NS5qcGc.jpg);background-position:50% 50%\"><img decoding=\"async\" src=\"https:\/\/images.rawpixel.com\/image_1300\/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvbHIvcGQzNi0yLWtzYy0wN3BwMTQ1NS5qcGc.jpg\" alt=\"\" \/><\/figure><div class=\"wp-block-media-text__content\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-0e47273b wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-white-color has-text-color has-link-color wp-elements-bb92ec4d592c64a498d40daa52f2731c\" style=\"font-size:48px\">Where can I get some?<\/h2>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity is-style-wide\" \/>\n\n\n\n<p class=\"has-white-color has-text-color has-link-color has-small-font-size wp-elements-6f1a17f347ab952f9d8f490f51d00673 wp-block-paragraph\" style=\"line-height:1.5\">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don&#8217;t look even slightly believable.<br><br>If you are going to use a passage of Lorem Ipsum, you need to be sure there isn&#8217;t anything embarrassing hidden in the middle of text.<\/p>\n\n\n\n<div style=\"height:5px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-text-color has-background wp-element-button\" href=\"#\" style=\"border-radius:50px;background-color:#ffffff\">read more<\/a><\/div>\n<\/div>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div>\n<\/div>\n<\/div><\/div>\n","protected":false},"author":13367167,"parent":387088,"template":"","meta":{"_crdt_document":"","jetpack_post_was_ever_published":false,"wpop_keywords":"","wpop_description":"you can see examples for the original image on the left-hand side and then we see the contnt on right side with button.","wpop_viewport_width":800,"wpop_block_types":[""],"wpop_locale":"en_AU","wpop_wp_version":"","wpop_contains_block_types":"core\/button,core\/buttons,core\/column,core\/columns,core\/heading,core\/media-text,core\/paragraph,core\/separator,core\/spacer","footnotes":""},"pattern-categories":[47,2,42,3,13,6],"pattern-keywords":[],"wporg-pattern-flag-reason":[],"class_list":["post-388171","wporg-pattern","type-wporg-pattern","status-publish","hentry","wporg-pattern-category-about","wporg-pattern-category-buttons","wporg-pattern-category-call-to-action","wporg-pattern-category-columns","wporg-pattern-category-images","wporg-pattern-category-text"],"category_slugs":["about","buttons","call-to-action","columns","images","text"],"keyword_slugs":[],"pattern_content":"<!-- wp:media-text {\"mediaType\":\"image\",\"mediaWidth\":35,\"imageFill\":true,\"backgroundColor\":\"black\"} -->\n<div class=\"wp-block-media-text is-stacked-on-mobile is-image-fill has-black-background-color has-background\" style=\"grid-template-columns:35% auto\"><figure class=\"wp-block-media-text__media\" style=\"background-image:url(https:\/\/images.rawpixel.com\/image_1300\/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvbHIvcGQzNi0yLWtzYy0wN3BwMTQ1NS5qcGc.jpg);background-position:50% 50%\"><img src=\"https:\/\/images.rawpixel.com\/image_1300\/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvbHIvcGQzNi0yLWtzYy0wN3BwMTQ1NS5qcGc.jpg\" alt=\"\" \/><\/figure><div class=\"wp-block-media-text__content\"><!-- wp:columns -->\n<div class=\"wp-block-columns\"><!-- wp:column {\"width\":\"\"} -->\n<div class=\"wp-block-column\"><!-- wp:spacer {\"height\":\"40px\"} -->\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<!-- \/wp:spacer -->\n\n<!-- wp:heading {\"style\":{\"typography\":{\"fontSize\":\"48px\"},\"elements\":{\"link\":{\"color\":{\"text\":\"var:preset|color|white\"}}}},\"textColor\":\"white\"} -->\n<h2 class=\"wp-block-heading has-white-color has-text-color has-link-color\" style=\"font-size:48px\">Where can I get some?<\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:separator {\"opacity\":\"css\",\"className\":\"is-style-wide\"} -->\n<hr class=\"wp-block-separator has-css-opacity is-style-wide\" \/>\n<!-- \/wp:separator -->\n\n<!-- wp:paragraph {\"style\":{\"typography\":{\"lineHeight\":\"1.5\"},\"elements\":{\"link\":{\"color\":{\"text\":\"var:preset|color|white\"}}}},\"textColor\":\"white\",\"fontSize\":\"small\"} -->\n<p class=\"has-white-color has-text-color has-link-color has-small-font-size\" style=\"line-height:1.5\">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.<br><br>If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:spacer {\"height\":\"5px\"} -->\n<div style=\"height:5px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<!-- \/wp:spacer -->\n\n<!-- wp:buttons -->\n<div class=\"wp-block-buttons\"><!-- wp:button {\"textColor\":\"black\",\"style\":{\"color\":{\"background\":\"#ffffff\"},\"border\":{\"radius\":\"50px\"}}} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-text-color has-background wp-element-button\" href=\"#\" style=\"border-radius:50px;background-color:#ffffff\">read more<\/a><\/div>\n<!-- \/wp:button --><\/div>\n<!-- \/wp:buttons -->\n\n<!-- wp:spacer {\"height\":\"40px\"} -->\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<!-- \/wp:spacer --><\/div>\n<!-- \/wp:column --><\/div>\n<!-- \/wp:columns --><\/div><\/div>\n<!-- \/wp:media-text -->","favorite_count":0,"author_meta":{"name":"Sumit Singh","url":"https:\/\/wordpress.org\/patterns\/author\/sumitsingh","avatar":"https:\/\/secure.gravatar.com\/avatar\/93cdcbd88409cfd76d914650908bdef77325976aaba83d6b8ffa52ed4364bda1?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\/388171","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\/388171\/revisions"}],"predecessor-version":[{"id":388819,"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/wporg-pattern\/388171\/revisions\/388819"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wporg\/v1\/users\/sumitsingh"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/media?parent=388171"}],"wp:term":[{"taxonomy":"wporg-pattern-category","embeddable":true,"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/pattern-categories?post=388171"},{"taxonomy":"wporg-pattern-keyword","embeddable":true,"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/pattern-keywords?post=388171"},{"taxonomy":"wporg-pattern-flag-reason","embeddable":true,"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/wporg-pattern-flag-reason?post=388171"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}