--- title: Matrix Builder date: 2025-10-01T16:12:00+02:00 author: admin canonical_url: "https://craft-kit.dev/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, 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**](/flexible-grid-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. 🧱 What Is the Matrix Builder in Craft CMS? The Matrix Builder is a flexible content system that lets you create structured page layouts using reusable, component-based blocks. Instead of rigid templates, editors can freely combine text, media, galleries, CTAs, or sliders β€” all while developers keep full control over clean, semantic markup and consistent design. πŸ“˜ Block Text A simple content block for headings, paragraphs, and rich text, perfect for introducing or explaining content. πŸ–Ό Block Media Displays a single responsive image/video with automatic transforms and clean semantic markup. [Scroll to block media](#block-media) πŸ”˜ Block Buttons A reusable CTA element for linking to pages, downloads, or external resources. [Scroll to block buttons](#block-buttons) πŸ“¦ Block Cards A structured card component for summaries, features, or highlights β€” fully responsive and reusable. [Scroll to block cards](#block-cards) πŸ“š Block Accordion A collapsible content element ideal for FAQs, technical explanations, or long structured text. 🎞️ Block Gallery A responsive image gallery with a lightbox β€” optimized for showcasing multiple visuals. [Scroll to block gallery](#block-gallery) 🎠 Block Slider A flexible carousel block using Embla, ideal for displaying multiple cards or media items in a smooth, touch-friendly slider. [Scroll to block slider](#block-slider) πŸš€ Block CTA A visual call-to-action block that combines a full-width background image with an overlaid headline and button β€” perfect for spotlighting key messages with strong visual impact. [Scroll to block CTA](#block-cta) ![](https://craft-kit.dev/uploads/transforms/_768xAUTO_crop_center-center_85_none_ns/MatrixBuilder.png?v=1773407147) [Map](https://craft-kit.dev/map) [Blog](https://craft-kit.dev/blog-hypermedia-datastar) [CKE Builder](https://craft-kit.dev/cke-builder) [Search](https://craft-kit.dev/search) ![Etiam Egestas Risus Amet](https://craft-kit.dev/uploads/transforms/_768xAUTO_crop_center-center_85_none_ns/Testimage-1.jpg?v=1773407149) Curabitur blandit tempus porttitor. β€” Β© Alfred E. Neumann ## ✍️ Richtext Builder Insert predefined components directly into CKEditor. A simple example of combining structured elements and rich text content. [Read more](https://craft-kit.dev/cke-builder) ## ⚑ Datastar Search Fast and lightweight search using Craft Datastar. Instant results, live updates, and minimal JavaScript. [Read more](https://craft-kit.dev/search) ## πŸš€ Datastar Blog A dynamic blog built with Craft DataStar. Features live filtering, pagination, and instant content updates without page reloads. [Read more](https://craft-kit.dev/blog-hypermedia-datastar) ## πŸ—ΊοΈ Datastar Map Dynamic, data-driven maps built with Craft CMS, Datastar, and Leaflet. Features real-time marker updates, category filters, and clustering β€” all rendered directly in Twig. [Read more](https://craft-kit.dev/map) ## 🧭 Grid Layout Shows the responsive Grid Layout system used across all pages. Easily define full, content, feature, or popout columns. [Read more](/flexible-grid-layout) ## πŸ§‘β€πŸ’» Webworker I partner with agencies to deliver high-quality Craft CMS sites β€” performant, maintainable, and built with a clear technical vision. [hire me!](https://webworker.me/) ## Rick & Morty This demo showcases how Datastar can turn any external API into a fully reactive browsing experience. [Read more](/rick-and-morty-datastar) [ ![Etiam Egestas Risus Amet](https://craft-kit.dev/uploads/transforms/_768xAUTO_crop_center-center_85_none_ns/Testimage-1.jpg?v=1773407149) ](https://craft-kit.dev/uploads/transforms/_1600xAUTO_crop_center-center_90_none_ns/Testimage-1.jpg?v=1773407150) [ ![](https://craft-kit.dev/uploads/transforms/_768xAUTO_crop_center-center_85_none_ns/Testimage-2.jpg?v=1773407152) ](https://craft-kit.dev/uploads/transforms/_1600xAUTO_crop_center-center_90_none_ns/Testimage-2.jpg?v=1773407151) [ ![](https://craft-kit.dev/uploads/transforms/_768xAUTO_crop_center-center_85_none_ns/Testimage-3.jpg?v=1773407155) ](https://craft-kit.dev/uploads/transforms/_1600xAUTO_crop_center-center_90_none_ns/Testimage-3.jpg?v=1773407155) [ ![](https://craft-kit.dev/uploads/transforms/_768xAUTO_crop_center-center_85_none_ns/Testimage-4.jpg?v=1773407157) ](https://craft-kit.dev/uploads/transforms/_1600xAUTO_crop_center-center_90_none_ns/Testimage-4.jpg?v=1773407156) Open gallery (4 images) ## Cards ![Etiam Egestas Risus Amet](https://craft-kit.dev/uploads/transforms/_768xAUTO_crop_center-center_85_none_ns/Testimage-1.jpg?v=1773407149) ## ✍️ CKEditor Builder Insert predefined components directly into CKEditor. A simple example of combining structured elements and rich text content. [Read more](https://craft-kit.dev/cke-builder) ![](https://craft-kit.dev/uploads/transforms/_768xAUTO_crop_center-center_85_none_ns/Testimage-2.jpg?v=1773407152) ## πŸš€ Blog (Datastar) A dynamic blog built with Craft DataStar. Features live filtering, pagination, and instant content updates without page reloads. [Read more](https://craft-kit.dev/blog-hypermedia-datastar) ![](https://craft-kit.dev/uploads/transforms/_768xAUTO_crop_center-center_85_none_ns/Testimage-2.jpg?v=1773407152) ## 🧭 Grid Layout Shows the responsive Grid Layout system used across all pages. Easily define full, content, feature, or popout columns. [Read more](/layout) ## Features - ⚑ Hypermedia-first No JavaScript frameworks. Datastar handles reactivity via SSE β€” server stays the source of truth. - 🧱 Matrix Content Builder Flexible page layouts with reusable blocks. Mix and match sections without touching code. - 🎨 Tailwind CSS Utility-first styling with CSS custom properties, oklch colors, and zero config overhead. - πŸ› οΈ Production-ready Setup Vite, DDEV, and Craft CMS 5 pre-configured and ready to build on from day one. Use these components in your own project! [πŸ‘‰ Download Craft Kit](https://github.com/handplant/craftcms-lazy-starter-kit)