🧱 Matrix Builder
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, 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.
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.
A simple content block for headings, paragraphs, and rich text, perfect for introducing or explaining content.
Displays a single responsive image/video with automatic transforms and clean semantic markup.
Scroll to block media
A reusable CTA element for linking to pages, downloads, or external resources.
Scroll to block buttons
A structured card component for summaries, features, or highlights — fully responsive and reusable.
Scroll to block cards
A collapsible content element ideal for FAQs, technical explanations, or long structured text.
A responsive image gallery with a lightbox — optimized for showcasing multiple visuals.
Scroll to block gallery
A syntax-highlighted block for showing code examples in a clean, readable format.
Scroll to block code
A flexible carousel block using Embla, ideal for displaying multiple cards or media items in a smooth, touch-friendly slider.
Scroll to block slider
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
✍️ CKEditor Builder
Insert predefined components directly into CKEditor. A simple example of combining structured elements and rich text content.
🚀 Blog (Datastar)
A dynamic blog built with Craft DataStar. Features live filtering, pagination, and instant content updates without page reloads.
🧭 Grid Layout
Shows the responsive Grid Layout system used across all pages. Easily define full, content, feature, or popout columns.
Use these components in your own project!
👉 Download Craft KitDatastar Blog Example twig
{% set offset = offset ?? 0 %}
{% set limit = limit ?? 6 %}
{% set filter = signals.filter ?? '' %}
{% set entryAllCount = craft.entries.section('blog') %}
{% set entryQuery = craft.entries.section('blog').eagerly().limit(limit).offset(offset).orderBy('date DESC') %}
{% if filter %}
{% set filterEntry = craft.entries.section('categories').slug(filter).one() %}
{% do entryAllCount.andRelatedTo(filterEntry) %}
{% do entryQuery.andRelatedTo(filterEntry) %}
{% endif %}
{% set entries = entryQuery.all() %}
{% set hasMore = entryAllCount.count() > offset + (entries|length) %}
{% if not entries %}
{% patchelements %}
<div id="result">
<div class="text-2xl">
<p>🫣 No results found for "{{ filter }}".</p>
</div>
</div>
{% endpatchelements %}
{% patchelements %}
<div id="loadmore"></div>
{% endpatchelements %}
{% else %}
{% patchelements with {selector: '#result', mode: offset == 0 ? 'inner' : 'append'} %}
{% for entry in entries %}
{{ entry.render() }}
{% endfor %}
{% endpatchelements %}
{% if hasMore %}
{% patchelements %}
<div id="loadmore" class="mt-6">
<button data-on-click="{{ datastar.get('_datastar/blog.twig', {offset: offset + limit}) }}" class="ui-btn ui-btn--lg">{{ 'Load more'|t }}</button>
</div>
{% endpatchelements %}
{% else %}
{% patchelements %}
<div id="loadmore"></div>
{% endpatchelements %}
{% endif %}
{% endif %}