Block Types

Kompass ships with a set of built-in block types that cover the most common content patterns. Each block has its own Blade view, a set of editable fields, and configurable layout options. You can also create custom blocks at any time.

Overview

Blocks are the building units of every page and post. Editors add them from the block palette inside the Block Builder, arrange them by drag & drop, and configure each block independently — no page rebuild needed.

Every block shares a common set of layout settings:

Setting	Options	Description
Grid span	1–12	How many grid columns the block occupies
Layout	fullpage, popout, content	Width variant relative to the page container
Alignment	align-left, align-center, align-right	Horizontal text alignment
CSS class	free text	Extra Tailwind or custom classes on the block wrapper
ID anchor	free text	HTML id for scroll-to-section links
Status	published, draft	Hide a block without deleting it

Button

A single call-to-action link rendered as a button. It uses the link field type, which contains the URL, title, target, and icon settings.

Field	Type	Description
Link	link	Object containing URL, Title, Target, and Icon

@props(['item' => ''])

@if($item->type == 'button')
@php
    $link = get_field_as('link', $item->datafield, 'object');
@endphp

@if($link)
    <a href="{{ $link->url }}" 
       target="{{ $link->target ?? '_self' }}" 
       class="btn btn-primary {{ get_meta($item, 'css-classname', '') }}">
        
        @if(($link->iconclass ?? null) && ($link->iconposition ?? 'left') == 'left')
            <x-icon :name="$link->iconclass" class="w-5 h-5 mr-2" />
        @endif
        
        {{ $link->title }}

        @if(($link->iconclass ?? null) && ($link->iconposition ?? 'left') == 'right')
            <x-icon :name="$link->iconclass" class="w-5 h-5 ml-2" />
        @endif
    </a>
@endif
@endif

WYSIWYG (Textblock)

A rich text block powered by the Kompass Editor. Editors write and format content directly in the block — no switching context.

Field	Type	Description
Content	wysiwyg	Block-based rich text

@props(['item' => ''])

@if($item->type == 'wysiwyg')
@php
    $raw    = get_field('wysiwyg', $item->datafield);
    $blocks = wysiwyg_blocks($raw);
@endphp
<div class="prose">
    @foreach($blocks as $block)
        {{-- render logic --}}
    @endforeach
</div>
@endif

Gallery

An image grid that supports multiple images, configurable column counts, and an optional photo slider.

Field	Type	Description
Images	gallery	Collection of images

@props(['item' => ''])

@if($item->type == 'gallery')
<div class="md:grid gap-4 grid-cols-{{ $item->grid }}">
    @foreach($item->datafield as $image)
        <x-image :id="$image['data']" class="w-full h-full rounded-lg" />
    @endforeach
</div>
@endif

Group (Layout Block)

A layout container that holds other blocks in a nested grid. Use groups to build multi-column layouts.

@props(['item' => ''])

@if ($item->type == 'group')
<div class="group md:grid gap-6 grid-cols-{{ $item->layoutgrid ?? 12 }}">
    @foreach ($item->children as $child)
        <x-blocks.components :item="$child" />
    @endforeach
</div>
@endif

Accordion

A container for collapsible content items. Like the Group block, it acts as a container for child blocks.

@props(['item' => ''])

@if ($item->type == 'accordiongroup')
<div class="accordion">
    @foreach ($item->children as $child)
        <x-blocks.components :item="$child" />
    @endforeach
</div>
@endif

Video

A flexible block for displaying videos via oEmbed (YouTube/Vimeo) or local uploads.

Field	Type	Description
Video	video	Local video file
Poster	poster	Video thumbnail image
oEmbed	oembed	YouTube or Vimeo URL

@props(['item' => ''])

@if($item->type == 'video')
@php
    $video = get_field('video', $item->datafield);
    $poster = get_field('poster', $item->datafield);
    $oembed = get_field('oembed', $item->datafield);
@endphp

<div class="video-container">
    @if($oembed)
        {{-- Handle oEmbed rendering --}}
        <div class="aspect-video">
            <iframe src="{{ $oembed }}" ...></iframe>
        </div>
    @elseif($video)
        <video controls poster="{{ $poster }}" class="w-full">
            <source src="{{ $video }}" type="video/mp4">
        </video>
    @endif
</div>
@endif

Anchor Menu

A navigational menu that links to HTML anchors on the same page.

Field	Type	Description
Name	text	Display name of the menu

@props(['item' => ''])

@if($item->type == 'anchormenu')
<nav class="anchor-menu">
    {{-- anchor menu logic --}}
</nav>
@endif

Relationship

Pulls records from any registered Eloquent model (e.g., Blog posts, Team members).

Configuration lives entirely in block meta. See the Relationship Block documentation.

Built-in Field Types

These field types can be used when creating custom blocks:

Key	Label	Edit Widget
text	Text	Input
wysiwyg	WYSIWYG Editor	Editor
image	Image	Image Picker
gallery	Gallery	Gallery Picker
link	Link	Input
true_false	true/false	Toggle
file	File	File Upload
color	Color	Color Picker
oembed	Video embed	YouTube/Vimeo URL