{"id":373467,"date":"2023-07-13T02:18:07","date_gmt":"2023-07-13T02:18:07","guid":{"rendered":"https:\/\/wordpress.org\/patterns\/pattern\/service-listing-en_za\/"},"modified":"2026-04-19T21:47:11","modified_gmt":"2026-04-19T21:47:11","slug":"service-listing-en_za","status":"publish","type":"wporg-pattern","link":"https:\/\/wordpress.org\/patterns\/pattern\/service-listing-en_za\/","title":{"rendered":"Service listing"},"content":{"rendered":"\n<div class=\"wp-block-group alignwide has-background is-content-justification-center is-layout-flex wp-container-core-group-is-layout-e8cee86a wp-block-group-is-layout-flex\" style=\"background-color:#f5f5ff;padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)\">\n<div class=\"wp-block-columns has-white-background-color has-background is-layout-flex wp-container-core-columns-is-layout-2b7d1508 wp-block-columns-is-layout-flex\" style=\"border-radius:10px;padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;flex-basis:30%\">\n<figure class=\"wp-block-image aligncenter size-full has-custom-border is-style-rounded\"><img decoding=\"async\" src=\"https:\/\/images.rawpixel.com\/image_1300\/cHJpdmF0ZS9sci9pbWFnZXMvd2Vic2l0ZS8yMDIyLTA1L3B4MTM4OTA5Ni1pbWFnZS1rd3Z2emh5NC5qcGc.jpg\" alt=\"\" style=\"border-radius:20px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:70%\">\n<h4 class=\"wp-block-heading\" style=\"margin-top:0;margin-right:0;margin-bottom:0;margin-left:0\">Why do we use it?<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:25%\">\n<div class=\"wp-block-buttons is-content-justification-right is-layout-flex wp-container-core-buttons-is-layout-816c6e59 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-white-color has-vivid-cyan-blue-background-color has-text-color has-background wp-element-button\" style=\"border-radius:5px\">View more<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns has-white-background-color has-background is-layout-flex wp-container-core-columns-is-layout-2b7d1508 wp-block-columns-is-layout-flex\" style=\"border-radius:10px;padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;flex-basis:30%\">\n<figure class=\"wp-block-image aligncenter size-full has-custom-border is-style-rounded\"><img decoding=\"async\" src=\"https:\/\/images.rawpixel.com\/image_1300\/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvbHIvcHgxMTgxMTEwLWltYWdlLWt3dnkyeHA0LmpwZw.jpg\" alt=\"\" style=\"border-radius:20px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:70%\">\n<h4 class=\"wp-block-heading\">Where can I get some?<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:25%\">\n<div class=\"wp-block-buttons is-content-justification-right is-layout-flex wp-container-core-buttons-is-layout-816c6e59 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-white-color has-vivid-cyan-blue-background-color has-text-color has-background wp-element-button\" style=\"border-radius:5px\">View more<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns has-white-background-color has-background is-layout-flex wp-container-core-columns-is-layout-2b7d1508 wp-block-columns-is-layout-flex\" style=\"border-radius:10px;padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;flex-basis:30%\">\n<figure class=\"wp-block-image aligncenter size-full has-custom-border is-style-rounded\"><img decoding=\"async\" src=\"https:\/\/images.rawpixel.com\/image_1300\/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvbHIvcHgxNTUwNTctaW1hZ2Uta3d2eHQ2ZjEuanBn.jpg\" alt=\"\" style=\"border-radius:20px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:70%\">\n<h4 class=\"wp-block-heading\">What is Lorem Ipsum?<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:25%\">\n<div class=\"wp-block-buttons is-content-justification-right is-layout-flex wp-container-core-buttons-is-layout-816c6e59 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-white-color has-vivid-cyan-blue-background-color has-text-color has-background wp-element-button\" style=\"border-radius:5px\">View more<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":15357679,"parent":344938,"template":"","meta":{"_crdt_document":"","jetpack_post_was_ever_published":false,"wpop_keywords":"CTA, services, service lising, our services, services grid, post grid","wpop_description":"List of services in rows with image, description and button","wpop_viewport_width":800,"wpop_block_types":[""],"wpop_locale":"en_ZA","wpop_wp_version":"","wpop_contains_block_types":"core\/button,core\/buttons,core\/column,core\/columns,core\/group,core\/heading,core\/image,core\/paragraph","footnotes":""},"pattern-categories":[42,3,63],"pattern-keywords":[],"wporg-pattern-flag-reason":[],"class_list":["post-373467","wporg-pattern","type-wporg-pattern","status-publish","hentry","wporg-pattern-category-call-to-action","wporg-pattern-category-columns","wporg-pattern-category-services"],"category_slugs":["call-to-action","columns","services"],"keyword_slugs":[],"pattern_content":"<!-- wp:group {\"align\":\"wide\",\"style\":{\"spacing\":{\"padding\":{\"top\":\"var:preset|spacing|40\",\"right\":\"var:preset|spacing|40\",\"bottom\":\"var:preset|spacing|40\",\"left\":\"var:preset|spacing|40\"},\"blockGap\":\"var:preset|spacing|30\"},\"color\":{\"background\":\"#f5f5ff\"}},\"layout\":{\"type\":\"flex\",\"flexWrap\":\"wrap\",\"justifyContent\":\"center\"}} -->\n<div class=\"wp-block-group alignwide has-background\" style=\"background-color:#f5f5ff;padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)\"><!-- wp:columns {\"style\":{\"spacing\":{\"padding\":{\"top\":\"var:preset|spacing|30\",\"right\":\"var:preset|spacing|30\",\"bottom\":\"var:preset|spacing|30\",\"left\":\"var:preset|spacing|30\"}},\"border\":{\"radius\":\"10px\"}},\"backgroundColor\":\"white\"} -->\n<div class=\"wp-block-columns has-white-background-color has-background\" style=\"border-radius:10px;padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)\"><!-- wp:column {\"verticalAlignment\":\"center\",\"width\":\"30%\",\"style\":{\"spacing\":{\"padding\":{\"top\":\"0\",\"right\":\"0\",\"bottom\":\"0\",\"left\":\"0\"}}}} -->\n<div class=\"wp-block-column is-vertically-aligned-center\" style=\"padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;flex-basis:30%\"><!-- wp:image {\"align\":\"center\",\"id\":null,\"sizeSlug\":\"full\",\"linkDestination\":\"none\",\"style\":{\"border\":{\"radius\":\"20px\"}},\"className\":\"is-style-rounded\"} -->\n<figure class=\"wp-block-image aligncenter size-full has-custom-border is-style-rounded\"><img src=\"https:\/\/images.rawpixel.com\/image_1300\/cHJpdmF0ZS9sci9pbWFnZXMvd2Vic2l0ZS8yMDIyLTA1L3B4MTM4OTA5Ni1pbWFnZS1rd3Z2emh5NC5qcGc.jpg\" alt=\"\" style=\"border-radius:20px\" \/><\/figure>\n<!-- \/wp:image --><\/div>\n<!-- \/wp:column -->\n\n<!-- wp:column {\"width\":\"70%\"} -->\n<div class=\"wp-block-column\" style=\"flex-basis:70%\"><!-- wp:heading {\"level\":4,\"style\":{\"spacing\":{\"margin\":{\"top\":\"0\",\"right\":\"0\",\"bottom\":\"0\",\"left\":\"0\"}}}} -->\n<h4 class=\"wp-block-heading\" style=\"margin-top:0;margin-right:0;margin-bottom:0;margin-left:0\">Why do we use it?<\/h4>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal.<\/p>\n<!-- \/wp:paragraph --><\/div>\n<!-- \/wp:column -->\n\n<!-- wp:column {\"verticalAlignment\":\"center\",\"width\":\"25%\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\" style=\"flex-basis:25%\"><!-- wp:buttons {\"layout\":{\"type\":\"flex\",\"verticalAlignment\":\"center\",\"justifyContent\":\"right\"}} -->\n<div class=\"wp-block-buttons\"><!-- wp:button {\"backgroundColor\":\"vivid-cyan-blue\",\"textColor\":\"white\",\"style\":{\"border\":{\"radius\":\"5px\"}}} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-white-color has-vivid-cyan-blue-background-color has-text-color has-background wp-element-button\" style=\"border-radius:5px\">View more<\/a><\/div>\n<!-- \/wp:button --><\/div>\n<!-- \/wp:buttons --><\/div>\n<!-- \/wp:column --><\/div>\n<!-- \/wp:columns -->\n\n<!-- wp:columns {\"style\":{\"spacing\":{\"padding\":{\"top\":\"var:preset|spacing|30\",\"right\":\"var:preset|spacing|30\",\"bottom\":\"var:preset|spacing|30\",\"left\":\"var:preset|spacing|30\"}},\"border\":{\"radius\":\"10px\"}},\"backgroundColor\":\"white\"} -->\n<div class=\"wp-block-columns has-white-background-color has-background\" style=\"border-radius:10px;padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)\"><!-- wp:column {\"verticalAlignment\":\"center\",\"width\":\"30%\",\"style\":{\"spacing\":{\"padding\":{\"top\":\"0\",\"right\":\"0\",\"bottom\":\"0\",\"left\":\"0\"}}}} -->\n<div class=\"wp-block-column is-vertically-aligned-center\" style=\"padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;flex-basis:30%\"><!-- wp:image {\"align\":\"center\",\"id\":null,\"sizeSlug\":\"full\",\"linkDestination\":\"none\",\"style\":{\"border\":{\"radius\":\"20px\"}},\"className\":\"is-style-rounded\"} -->\n<figure class=\"wp-block-image aligncenter size-full has-custom-border is-style-rounded\"><img src=\"https:\/\/images.rawpixel.com\/image_1300\/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvbHIvcHgxMTgxMTEwLWltYWdlLWt3dnkyeHA0LmpwZw.jpg\" alt=\"\" style=\"border-radius:20px\" \/><\/figure>\n<!-- \/wp:image --><\/div>\n<!-- \/wp:column -->\n\n<!-- wp:column {\"width\":\"70%\"} -->\n<div class=\"wp-block-column\" style=\"flex-basis:70%\"><!-- wp:heading {\"level\":4} -->\n<h4 class=\"wp-block-heading\">Where can I get some?<\/h4>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal.<\/p>\n<!-- \/wp:paragraph --><\/div>\n<!-- \/wp:column -->\n\n<!-- wp:column {\"verticalAlignment\":\"center\",\"width\":\"25%\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\" style=\"flex-basis:25%\"><!-- wp:buttons {\"layout\":{\"type\":\"flex\",\"verticalAlignment\":\"center\",\"justifyContent\":\"right\"}} -->\n<div class=\"wp-block-buttons\"><!-- wp:button {\"backgroundColor\":\"vivid-cyan-blue\",\"textColor\":\"white\",\"style\":{\"border\":{\"radius\":\"5px\"}}} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-white-color has-vivid-cyan-blue-background-color has-text-color has-background wp-element-button\" style=\"border-radius:5px\">View more<\/a><\/div>\n<!-- \/wp:button --><\/div>\n<!-- \/wp:buttons --><\/div>\n<!-- \/wp:column --><\/div>\n<!-- \/wp:columns -->\n\n<!-- wp:columns {\"style\":{\"spacing\":{\"padding\":{\"top\":\"var:preset|spacing|30\",\"right\":\"var:preset|spacing|30\",\"bottom\":\"var:preset|spacing|30\",\"left\":\"var:preset|spacing|30\"}},\"border\":{\"radius\":\"10px\"}},\"backgroundColor\":\"white\"} -->\n<div class=\"wp-block-columns has-white-background-color has-background\" style=\"border-radius:10px;padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)\"><!-- wp:column {\"verticalAlignment\":\"center\",\"width\":\"30%\",\"style\":{\"spacing\":{\"padding\":{\"top\":\"0\",\"right\":\"0\",\"bottom\":\"0\",\"left\":\"0\"}}}} -->\n<div class=\"wp-block-column is-vertically-aligned-center\" style=\"padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;flex-basis:30%\"><!-- wp:image {\"align\":\"center\",\"id\":null,\"sizeSlug\":\"full\",\"linkDestination\":\"none\",\"style\":{\"border\":{\"radius\":\"20px\"}},\"className\":\"is-style-rounded\"} -->\n<figure class=\"wp-block-image aligncenter size-full has-custom-border is-style-rounded\"><img src=\"https:\/\/images.rawpixel.com\/image_1300\/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvbHIvcHgxNTUwNTctaW1hZ2Uta3d2eHQ2ZjEuanBn.jpg\" alt=\"\" style=\"border-radius:20px\" \/><\/figure>\n<!-- \/wp:image --><\/div>\n<!-- \/wp:column -->\n\n<!-- wp:column {\"width\":\"70%\"} -->\n<div class=\"wp-block-column\" style=\"flex-basis:70%\"><!-- wp:heading {\"level\":4} -->\n<h4 class=\"wp-block-heading\">What is Lorem Ipsum?<\/h4>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal.<\/p>\n<!-- \/wp:paragraph --><\/div>\n<!-- \/wp:column -->\n\n<!-- wp:column {\"verticalAlignment\":\"center\",\"width\":\"25%\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\" style=\"flex-basis:25%\"><!-- wp:buttons {\"layout\":{\"type\":\"flex\",\"verticalAlignment\":\"center\",\"justifyContent\":\"right\"}} -->\n<div class=\"wp-block-buttons\"><!-- wp:button {\"backgroundColor\":\"vivid-cyan-blue\",\"textColor\":\"white\",\"style\":{\"border\":{\"radius\":\"5px\"}}} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-white-color has-vivid-cyan-blue-background-color has-text-color has-background wp-element-button\" style=\"border-radius:5px\">View more<\/a><\/div>\n<!-- \/wp:button --><\/div>\n<!-- \/wp:buttons --><\/div>\n<!-- \/wp:column --><\/div>\n<!-- \/wp:columns --><\/div>\n<!-- \/wp:group -->","favorite_count":0,"author_meta":{"name":"Ronik@UnlimitedWP","url":"https:\/\/wordpress.org\/patterns\/author\/jdsofttech","avatar":"https:\/\/secure.gravatar.com\/avatar\/88c19f92e15eb3608b6ff3a4330f95b40fcdfc6459e57a53ccdbdaed6945f1bf?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\/373467","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\/373467\/revisions"}],"predecessor-version":[{"id":374186,"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/wporg-pattern\/373467\/revisions\/374186"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wporg\/v1\/users\/jdsofttech"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/media?parent=373467"}],"wp:term":[{"taxonomy":"wporg-pattern-category","embeddable":true,"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/pattern-categories?post=373467"},{"taxonomy":"wporg-pattern-keyword","embeddable":true,"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/pattern-keywords?post=373467"},{"taxonomy":"wporg-pattern-flag-reason","embeddable":true,"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/wporg-pattern-flag-reason?post=373467"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}