Quick event `<x-quick-event>`

Properties

Property	Attribute	Type	Default	Description
`elementType`	`element-type`	`string`	`''`	Type element wat gebruikt wordt voor de container van de quick-event. Dit wordt automatisch een `a` als er geen `buttonTitle` gedefinieerd is, `highlight` false is maar er wel een `url` wordt meegegeven
`url`	`url`	`string`	`''`
`icon`	`icon`	`string`	`assets/img/new-svg/Vektis_Icoon_A02_RGB.svg`
`title`	`title`	`string`	`''`
`buttonTitle`	`button-title`	`string`	`''`
`highlight`	`highlight`	`boolean`	`false`
`inline`	`inline`	`boolean`	`false`

Voorbeeldcode:

<x-quick-event"
        title="Titel"
        :highlight="true"
        url="#"
        button-title="Voorbeeld knop"
>
    Dit is een voorbeeld
</x-quick-event>

Titel

Dit is een voorbeeld

Voorbeeld knop

<{{ $inline && $url ? 'a' : $elementType }}
    {{ $attributes->class([
        'quick-event--spotlight' => $spotlight,
        'quick-event--highlight' => $highlight,
        'quick-event--inline' => $inline,
    ])->merge([
        'class' => 'quick-event gtm-quick-event',
        'href' => $url ?? null,
    ]) }}
>
    <div class="quick-event__content">
        <span class="quick-event__icon">
            {!! !empty($icon) ? $icon : icon('hospital') !!}
        </span>

        <span class="quick-event__body">
            <{{ $titleElementType === 'a' && $inline ? 'span' : $titleElementType }}
                class="quick-event__title"
                @if($url && ($highlight || $spotlight) && !$inline) href="{{ $url }}" @endif
            >
                {{ $title }}
            </{{ $titleElementType === 'a' && $inline ? 'span' : $titleElementType }}>

            @if($text)
                <span class="quick-event__text">
                    {{ $text }}
                </span>
            @endif

            @if($linkText)
                <span class="quick-event__link-text">
                    {{ $linkText }}
                </span>
            @endif

            @if($slot->isNotEmpty())
                <div class="quick-event__slot">
                    {!! $slot !!}
                </div>
            @endif
        </span>
    </div>

    @if($inline)
        <span class="quick-event__cta-icon">
            @icon('chevron-right')
        </span>
    @endif

    @if($buttonTitle && !$inline)
        <a class="quick-event__button button button--sm button--dark" href="{{ $url }}">
            {{ $buttonTitle }}
        </a>
    @endif
</{{ $inline && $url ? 'a' : $elementType }}>

Quick event <x-quick-event>

Properties

Voorbeeldcode:

Quick event `<x-quick-event>`