Content block `<x-content-block>`

Properties

Property	Attribute	Type	Default	Description
`Background`	`useBackground`	`boolean`	`false`	De optie om een grijze achtergrond toe te voegen aan het content blok
`Title`	`title`	`string`	`false`	De titel van het content blok
`Footer`	`footer`	`?string`	`false`	Een footer voor extra content onderaan het content blok

Voorbeeldcode:

<x-content-block>
    <x-slot:title>
        <h2 class="title title--h2">Dit is de titel</h2>
    </x-slot:title>

    Dit is content
</x-content-block>

Dit is de titel

Dit is content

Voorbeeldcode met achtergrond:

<x-content-block
    :useBackground="true"
>
    <x-slot:title>
        <h2 class="title title--h2">Dit is de titel</h2>
    </x-slot:title>

        Dit is content
</x-content-block>

Dit is de titel

Dit is content

@props(['title', 'footer' => false])

@php
    $hasPadding = $backgroundColor === 'brand-tertiary' || $backgroundColor === 'gray-100';
    $background = $backgroundColor === 'brand-tertiary' ? 'bg-tertiary' : ($backgroundColor === 'gray-100' ? 'bg-medium' : '');
@endphp

<div {{ $attributes->class(['content-block', 'content-block--has-bg' => $hasPadding, $background]) }}>
    <h2 {{ $title->attributes->merge(['class' => 'content-block__title']) }}>{!! $title !!}</h2>

    {!! $slot !!}

    @if($footer)
        <div {{ $footer->attributes }}>
            {!! $footer !!}
        </div>
    @endif
</div>

Content block <x-content-block>

Properties

Voorbeeldcode:

Dit is de titel

Voorbeeldcode met achtergrond:

Dit is de titel

Content block `<x-content-block>`