--- title: Matrix Builder date: 2025-10-01T16:12:00+02:00 author: admin canonical_url: "https://craft-kit.dev/matrix-builder" section: Pages --- Flexible, component-based page layouts β€” editors combine blocks like text, images, CTAs and quotes without touching code. Every block is a reusable Twig component, placed into a custom CSS Grid with named areas like content, popout, or full. Editors control structure. Developers control markup. 🧱 What Is the Matrix Builder in Craft CMS? The Matrix Builder is a flexible content system for structured page layouts β€” reusable blocks like text, media, galleries, CTAs and sliders, freely combined by editors. Developers keep full control over clean, semantic markup and a consistent design system. πŸ“˜ 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=1777035500) [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=1777035500) 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=1777035500) ](https://craft-kit.dev/uploads/transforms/_1600xAUTO_crop_center-center_90_none_ns/Testimage-1.jpg?v=1777035500) [ ![](https://craft-kit.dev/uploads/transforms/_768xAUTO_crop_center-center_85_none_ns/Testimage-2.jpg?v=1777035500) ](https://craft-kit.dev/uploads/transforms/_1600xAUTO_crop_center-center_90_none_ns/Testimage-2.jpg?v=1777035500) [ ![](https://craft-kit.dev/uploads/transforms/_768xAUTO_crop_center-center_85_none_ns/Testimage-3.jpg?v=1777035499) ](https://craft-kit.dev/uploads/transforms/_1600xAUTO_crop_center-center_90_none_ns/Testimage-3.jpg?v=1777035500) [ ![](https://craft-kit.dev/uploads/transforms/_768xAUTO_crop_center-center_85_none_ns/Testimage-4.jpg?v=1777035499) ](https://craft-kit.dev/uploads/transforms/_1600xAUTO_crop_center-center_90_none_ns/Testimage-4.jpg?v=1777035500) 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=1777035500) ## ✍️ 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=1777035500) ## πŸš€ 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=1777035500) ## 🧭 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)