--- title: Matrix Builder – Modular Content Blocks for Craft CMS date: 2025-10-01T16:12:00+02:00 author: webworker canonical_url: "https://craftkit.webslingers.com.au/matrix-builder" section: Pages --- The **Matrix Builder** is a visual demonstration of how Craft CMS handles flexible, component-based content through Matrix fields. It shows how editors can create rich page layouts by combining different “blocks” — such as text, images, quotes, buttons, [code](#code-block-bottom), or call-to-action elements — without writing any code. Each block is powered by a reusable Twig component with consistent markup and a shared design system, making it easy for developers to maintain, extend, and customize. What makes this setup especially powerful is that **every component can be placed anywhere within the custom** [**CSS Grid layout**](/layout), using named grid areas like content, popout, feature, or full. This gives editors complete control over structure and visual hierarchy while developers retain full semantic and performance control. ![Etiam Egestas Risus Amet](https://craftkit.webslingers.com.au/uploads/transforms/_768xAUTO_crop_center-center_85_none_ns/Testimage-1.jpg?v=1786101373) Elit Porta Ipsum Cursus Pharetra Curabitur blandit tempus porttitor. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id elit non mi porta gravida at eget metus. Egestas Magna Tortor Condimentum Dolor Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nulla vitae elit libero, a pharetra augue. Curabitur blandit tempus porttitor. Maecenas faucibus mollis interdum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras Pellentesque Ligula Condimentum Tristique Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. [Richtext](https://craftkit.webslingers.com.au/richtext) [CKE Builder](https://craftkit.webslingers.com.au/cke-builder) [Search](https://craftkit.webslingers.com.au/search) [Blog](https://craftkit.webslingers.com.au/blog-hypermedia-datastar) [Code Block](#code-block-bottom) ![Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.](https://craftkit.webslingers.com.au/uploads/transforms/_768xAUTO_crop_center-center_85_none_ns/Testimage-2.jpg?v=1786101532) Tristique Ullamcorper Amet Dapibus — © Alfred E. Neumann ## Condimentum Vehicula Elit Magna 1 Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. [Map](https://craftkit.webslingers.com.au/map) ## Condimentum Vehicula Elit Magna 2 Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vestibulum id ligula porta felis euismod semper. [Map](https://craftkit.webslingers.com.au/map) ## Condimentum Vehicula Elit Magna 3 Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. [Map](https://craftkit.webslingers.com.au/map) ## Condimentum Vehicula Elit Magna 4 Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vestibulum id ligula porta felis euismod semper. [Map](https://craftkit.webslingers.com.au/map) ## Condimentum Vehicula Elit Magna 5 Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. [Map](https://craftkit.webslingers.com.au/map) ## Condimentum Vehicula Elit Magna 6 Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. [Map](https://craftkit.webslingers.com.au/map) ## Condimentum Vehicula Elit Magna 7 Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. [Map](https://craftkit.webslingers.com.au/map) [ ![Etiam Egestas Risus Amet](https://craftkit.webslingers.com.au/uploads/transforms/_768xAUTO_crop_center-center_85_none_ns/Testimage-1.jpg?v=1786101373) ](https://craftkit.webslingers.com.au/uploads/transforms/_1600xAUTO_crop_center-center_90_none_ns/Testimage-1.jpg?v=1786101575) [ ![Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.](https://craftkit.webslingers.com.au/uploads/transforms/_768xAUTO_crop_center-center_85_none_ns/Testimage-2.jpg?v=1786101532) ](https://craftkit.webslingers.com.au/uploads/transforms/_1600xAUTO_crop_center-center_90_none_ns/Testimage-2.jpg?v=1786101575) [ ![Sem Cursus Vehicula Consectetur](https://craftkit.webslingers.com.au/uploads/transforms/_768xAUTO_crop_center-center_85_none_ns/Testimage-3.jpg?v=1786101396) ](https://craftkit.webslingers.com.au/uploads/transforms/_1600xAUTO_crop_center-center_90_none_ns/Testimage-3.jpg?v=1786101575) [ ![Ornare Elit Ipsum Justo](https://craftkit.webslingers.com.au/uploads/transforms/_768xAUTO_crop_center-center_85_none_ns/Testimage-4.jpg?v=1786101442) ](https://craftkit.webslingers.com.au/uploads/transforms/_1600xAUTO_crop_center-center_90_none_ns/Testimage-4.jpg?v=1786101575) Open gallery (4 images) ## Malesuada Tortor Vulputate Euismod ![Etiam Egestas Risus Amet](https://craftkit.webslingers.com.au/uploads/transforms/_768xAUTO_crop_center-center_85_none_ns/Testimage-1.jpg?v=1786101373) ## Dapibus Nullam Egestas Consectetur Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh. [Read more](https://craftkit.webslingers.com.au/blog-hypermedia-datastar) ![Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.](https://craftkit.webslingers.com.au/uploads/transforms/_768xAUTO_crop_center-center_85_none_ns/Testimage-2.jpg?v=1786101532) ## Purus Ligula Vehicula Tortor Nulla vitae elit libero, a pharetra augue. Vestibulum id ligula porta felis euismod semper. [Read more](https://craftkit.webslingers.com.au/richtext) ![Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.](https://craftkit.webslingers.com.au/uploads/transforms/_768xAUTO_crop_center-center_85_none_ns/Testimage-2.jpg?v=1786101532) ## Mollis Vehicula Sem Consectetur Integer posuere erat a ante venenatis dapibus **posuere** velit aliquet. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. [Read more](https://craftkit.webslingers.com.au/cke-builder) ## Trusted by creators worldwide 8,000+ Ridiculus Ultricies Dapibus 3% Vulputate Sollicitudin 99.9% Pellentesque Ipsum $70M Malesuada Cras ## Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Curabitur blandit tempus porttitor. Maecenas faucibus mollis interdum. [CKE Builder](https://craftkit.webslingers.com.au/cke-builder)